I am trying to push the footer in to down when the content page height increase.but I am not able to do that. footer is always stick with side bar.because of this my content page overflow over the footer .
My css code is below:
#header
{
height: 150px;
background-color: #375BB0;
}
#nav
{
**strong text**height: 100%;
width: 231px;
float: left;
}
#nav2
{
height: 100%;
width: 250px;
float: right;
}
#content
{
height: 100%;
bottom: 0;
}
#footer
{
clear: both;
height: 50px;
background-color: #CCCCCC;
color: #333333;
text-align: center;
}
My markup code:
<body>
<form id="form1" runat="server">
<div>
<div id="header">
</div>
<div id="nav">
<table class="style1" style="width: 100%; position: static ;" >
</table>
</div>
<div id="nav2">
<table style="border: 1px solid #000066; width: 100%; position: static;background-color:#9DAFD8;" >
</table>
</div>
<div id="content">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer" style="clear: both; height:500px;" >
Copy rihgt # xyzoman.com
</div>
</div>
</form>
Please help me
Try this, I changed 2 things. First, you were making the height of elements at 100% to an element that was 100% to the page, so they would never line up unless the content was bigger than the page, and 2, I made the content display: inline block; so that your menus would be on either side and not just on teh side and then to wrap around the content, but you can change this back if you wanted.. But your main main main issue was the height 100% in the nav css tags!
Everything else stayed the same.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#header
{
height: 150px;
background-color: #375BB0;
}
#nav
{
width: 231px;
float: left;
}
#nav2
{
width: 250px;
float: right;
}
#content
{
display:inline-block;
height: 100%;
bottomL 0;
}
#footer {
display:block;
bottom: 0;
height: 50px;
background-color: #CCCCCC;
color: #333333;
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="header">
</div>
<div id="nav">
<table class="style1" style="width: 100%; position: static ;" >
<tr><td>Table</tr>
</table>
</div>
<div id="nav2">
<table style="border: 1px solid #000066; width: 100%; position: static;background-color:#9DAFD8;" >
<tr><td>Table</tr>
</table>
</div>
<div id="content">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer" style="clear: both; height:500px;" >
Copy rihgt # xyzoman.com
</div>
</div>
</form>
</body>
</html>
Related
Basically, I have a navigation bar in my website. In the centre of the nav bar, I want my website's name centred. This was easy of course, but now I want my website's logo positioned to the left of it. Float: left does not work, as this simply puts the logo on the far left of the nav bar.
<!doctype html>
<html>
<head>
<style>
*
{
margin: 0em;
padding: 0em;
}
#container {
width:100%;
border:1px solid #999;
margin:0px auto 0;
overflow:hidden;
background: gray;
}
#name {
text-align: center;
position: relative;
}
#top-left {
position: relative;
float: left;
border: 1px solid black;
}
#top-right {
float:right;
margin-bottom:10px;
}
#bottom-right {
float:right;
clear:both;
}
</style>
</head>
<body>
<div id="container">
<img id="top-left" src="http://www.webmasterworld.com/gfx/logo.png" alt="">
<img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
<img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
<h1 id="name">champion</h1>
</div>
</body>
</html>
You can do this trick:
<table style="background-color:Gray; width:100%;" >
<tr>
<td style="text-align:right; width:45%">
<img id="top-left" src="http://www.webmasterworld.com/gfx/logo.png" alt="">
</td>
<td style="text-align:left; width:30%"">
<h1 id="name">champion</h1>
</td>
<td style="text-align:right; width:25%;">
<img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
</td>
</tr>
<tr style="text-align:right;">
<td colspan="3">
<img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
</td>
</tr>
</table>
I have it running here where the float: left appears to be working. I'm guessing there may be something I'm missing. Could you put a jsfiddle or show a live example by chance.
Here's what I see
You can do something like this. It uses :before to attach the logo to the heading text: http://codepen.io/pageaffairs/pen/bchLo
<!doctype html>
<html>
<head>
<style>
*
{
margin: 0em;
padding: 0em;
}
#container {
width:100%;
border:1px solid #999;
margin:0px auto 0;
overflow:hidden;
background: gray;
text-align: center;
}
#name {
line-height: 56px;
position: absolute;
width: 100%;
}
#top-right {
float:right;
margin-bottom:10px;
}
#bottom-right {
float:right;
clear:both;
}
h1 span {
position: relative;
display: inline-block;
padding: 0 20px;
}
h1 span:before {
content: "";
width: 109px;
height: 56px;
background: url(http://www.webmasterworld.com/gfx/logo.png);
position: absolute;
top: 0;
right: 100%;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
<img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
<h1 id="name"><span>champion</span></h1>
</div>
</body>
</html>
Given this HTML document
<html>
<head>
<title>CSS Layout</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">Header 900x100 px</div>
<div id="righttop">RightTop <br />150x200 px</div>
<div id="lefttop">LeftTop 150x75 px</div>
<div id="content">Content 600x400 px</div>
<div id="rightbottom">RightBottom 150x200 px</div>
<div id="footer">Footer 900x100 px</div>
</body>
and this CSS style sheet
body, div {
padding: 0;
margin: 0;
border: solid 1px;
width: 900px;
}
#header, #footer {
width: 898px;
clear: both;
height: 100px;
}
#righttop, #rightbottom{
float: right;
width: 150px;
height: 200px;
}
#rightbottom {
clear: right;
}
#content {
float: left;
width: 591px;
height: 403px;
}
#lefttop {
width: 150px;
height: 100px;
float: left;
}
How would I go about moving the "RightBottom" box to be directly underneath the "LeftTop" box without messing up the general layout?
I have updated your code for you with the necessary corrections. Here is a JSFiddle file for your review: http://jsfiddle.net/yv7vs/
HTML:
<html>
<head>
<title>CSS Layout</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">Header 900x100 px</div>
<div id="righttop">RightTop<br/>150x200 px</div>
<div id="lefttop">LeftTop 150x75 px</div>
<div id="content">Content 600x400 px</div>
<div id="rightbottom">RightBottom 150x200 px</div>
<div id="footer">Footer 900x100 px</div>
</body>
CSS:
body, div {
padding:0;
margin:0;
border:solid 1px;
width: 900px;
}
#header, #footer {
width:898px;
clear: both;
height: 100px;
}
#righttop, #rightbottom {
width:150px;
height: 200px;
}
#righttop {
float:right;
}
#rightbottom {
position: absolute;
top: 205px;
}
#content {
float:left;
width:591px;
height: 403px;
}
#lefttop {
width:150px;
height: 100px;
float: left;
position: relative;
}
I have a 9-box with a div structure like so:
<div class="NBWrapper">
<div class="NBTopRow">
<div class="NBLeft" />
<div class="NBRight" />
<div class="NBMiddle" />
</div>
<div class="NBMiddleRow">
<div class="NBLeft"> </div>
<div class="NBRight"> </div>
<div class="NBMiddle">SharePoint WebPart goes here</div>
</div>
<div class="NBBottomRow">
<div class="NBLeft" />
<div class="NBRight" />
<div class="NBMiddle" />
</div>
</div>
And have the following CSS Rules:
.NBTopRow .NBLeft {
height: 18px;
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-top-left.png') no-repeat;
}
.NBTopRow .NBRight {
height: 18px;
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-top-right.png') no-repeat;
}
.NBTopRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
height: 18px;
background: transparent url('/Style Library/Images/qp-bg-top.png') repeat-x;
}
.NBMiddleRow .NBLeft {
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-left.png') repeat-y;
}
.NBMiddleRow .NBRight {
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-right.png') repeat-y;
}
.NBMiddleRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
background-color: #ffffff;
}
.NBMiddleRow {
height: 100%;
}
.NBBottomRow .NBLeft {
height: 18px;
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-bottom-left.png') no-repeat;
}
.NBBottomRow .NBRight {
height: 18px;
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-bottom-right.png') no-repeat;
}
.NBBottomRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
height: 18px;
background: transparent url('/Style Library/Images/qp-bg-bottom.png') repeat-x;
}
Everything is in the right place and has the right attributes however, the NBLeft and NBRight elements of the middle row are not taking up any height. Using height:100% does not have any effect.
I have added   and still nothing.
I am usually good with this sort of stuff, but I am stumped. Does anyone have any advice?
your NBleft & NBright are self closing make it like <div></div>
Are self closing divs supported correctly in the HTML Version you're using? You could try using instead?
I can see...
<div class="NBMiddle">SharePoint WebPart goes here<div>
Should be ...
<div class="NBMiddle">SharePoint WebPart goes here</div>
Other thing to try is overflow:auto in the CSS class of the div givin you trouble. As long as the div has content, the CSS will make sure it's displayed.
I'm not 100% sure what you're trying to do, but does the below help? I've added borders to everything so you can see what's happening.
The HTML...
<html>
<head>
<link rel="stylesheet" media="screen" href="bla.css" >
</head>
<body>
<div class="NBWrapper">
<div class="NBrow">
<div class="NBcell">Top Left</div>
<div class="NBcell">Top Middle</div>
<div class="NBcell">Top Right</div>
</div>
<div class="NBrow">
<div class="NBcellFullHeight">Middle Left</div>
<div class="NBcellFullHeight">Middle Middle</div>
<div class="NBcellFullHeight">Middle Right</div>
</div>
<div class="NBrow">
<div class="NBcell">Bottom Left</div>
<div class="NBcell">Bottom Middle</div>
<div class="NBcell">Bottom Right</div>
</div>
</div>
</body>
</html>
Then the CSS...
.NBWrapper {
width: 800px;
margin: auto;
}
.NBcell {
width: 266px;
float: left;
border: 1px solid #000000;
}
.NBrow {
float: left;
width: 804px;
border: 1px solid #000000;
}
.NBcellFullHeight {
width: 266px;
float: left;
height: 500px;
border: 1px solid #000000;
}
What i ended up doing was restructuring the divs:
<div class="NBWrapper">
<div class="NBTopRow">
<div class="NBLeft" />
<div class="NBMiddle" />
<div class="NBRight" />
</div>
<div class="NBMiddleRow">
<div class="NBLeft"> </div>
<div class="NBMiddle">SharePoint WebPart goes here</div>
<div class="NBRight"> </div>
</div>
<div class="NBBottomRow">
<div class="NBLeft" />
<div class="NBMiddle" />
<div class="NBRight" />
</div>
</div>
Taking away the floats and the margins in the attributes and adding this:
.NBWrapper {
display: table;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.NBTopRow, .NBMiddleRow, .NBBottomRow {
display: table-row;
}
.NBLeft, .NBRight, .NBMiddle {
display: table-cell;
}
You might ask, why not just use a table? SharePoint 2010 may use less of them, but but its still tables all the way down. I prefer using div structures.
pxI created a style defenition like this:
#container {
width: 900px;
margin: 0 auto;
background-image:url(images/back.JPG);
}
#header {
width: 900px;
height: 200px;
background-image:url(images/logo2.jpg);
border-bottom: 2px solid #000;
}
#leftnav {
float:left;
width: 150px;
height: 500px;
}
#rightnav {
float:right;
width: 150px;
height: 500px;
}
#body {
margin-left: 150px;
width: 600px;
text-align:center;
background-image:url(images/tb.png);
}
#footer {
clear:both;
background-image:url(images/tb.png);
}
Then I created a index file like that used the container around everything, then put the header, then leftnav, then rightnav, then body, then footer.
This works greate on Chrome and firefox, but on IE, the "BODY" container is not where it is supposed to be, it starts under the "leftnav" container. Is there a simple fix for this?
Updated cod from first answer, still same problem.
My index file is a php file.
You don't have units defined on #body's width. Should be width: 600px;
Also, remove margin-left: 150;
Try this. It works in IE7 for me. I think you were just missing a doctype.
<!DOCTYPE html>
<html>
<head>
<title>Test for StackOverflow</title>
<style>
#container {
width: 900px;
margin: 0 auto;
background-image:url(http://www.uffdarc.com/cantonspeedway/images/back.JPG);
}
#header {
width: 900px;
height: 200px;
background-image:url(http://www.uffdarc.com/cantonspeedway/images/logo2.jpg);
border-bottom: 2px solid #000;
}
#leftnav {
float:left;
width: 150px;
height: 500px;
}
#rightnav {
float:right;
width: 150px;
height: 500px;
}
#body {
margin-left: 150px;
width: 600px;
text-align:center;
background-image:url(http://www.uffdarc.com/cantonspeedway/images/tb.png);
}
#footer {
clear:both;
background-image:url(http://www.uffdarc.com/cantonspeedway/images/tb.png);
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="leftnav">
<img src="http://www.uffdarc.com/cantonspeedway/images/p1.jpg" width="140" height="140"><br>
<br>
<img src="http://www.uffdarc.com/cantonspeedway/images/p2.jpg" width="140" height="140"><br>
<br>
<img src="http://www.uffdarc.com/cantonspeedway/images/p6.jpg" width="140" height="80"><br>
</div>
<div id="rightnav">
<img src="http://www.uffdarc.com/cantonspeedway/images/p3.jpg" width="140" height="80"><br>
<br>
<img src="http://www.uffdarc.com/cantonspeedway/images/p4.jpg" width="140" height="80"><br>
<br>
<img src="http://www.uffdarc.com/cantonspeedway/images/p5.jpg" width="140" height="80"><br>
</div>
<div id="body"> This Page is still under construction <br>
<br>
<img src="http://www.uffdarc.com/cantonspeedway/images/logo3.jpg" width="550" height="362"> <br>
<br>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Hihi, I am trying to create a slide down menu using DIV, but hit a problem that I can't really figure out how to overcome. Let's take a look at the code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>test</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#menu").click(function () {
$('#menuItem').slideDown('slow');
});
});
</script>
</head>
<body>
<div style="width: 500px; margin: 0px auto; padding: 10px;">
<div id="menuItem" style="border: 1px solid blue; position: relative; z-index: 10; float: right; display: none; cursor: pointer;">
MenuItem1<br />
MenuItem2<br />
MenuItem3<br />
MenuItem4<br />
MenuItem5<br />
MenuItem6<br />
MenuItem7
</div>
<div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
My Menu
</div>
</div>
<div style="margin: 50px 0px; padding: 0px; text-align: center;">
<div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
<div style=" position: relative; z-index: 1; float: right;">Form Element</div>
</div>
</div>
</body>
</html>
All I want to achieve is to make my slide down menu stay on top of my form element div. Please advice how can this be done. Many thanks!
:)
Quick and dirty: I added an absolutely-positioned outer containing for the menu, and then applied top:40px to the content div to push it down to compensate for the height of the menu.
<div style="position:absolute;width:100%;">
<div style="width: 500px; margin: 0px auto; padding: 10px; ">
<div id="menuItem" style="border: 1px solid blue; position: relative; z-index: 10; float: right; display: none; cursor: pointer;">
MenuItem1<br />
MenuItem2<br />
MenuItem3<br />
MenuItem4<br />
MenuItem5<br />
MenuItem6<br />
MenuItem7
</div>
<div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
My Menu
</div>
</div>
</div>
<div style="margin: 50px 0px; padding: 0px; text-align: center; position:relative; top:40px; ">
<div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
<div style=" clear:both; z-index: 1; float: right;">Form Element</div>
</div>
</div>
</body>
</html>
As I type this, dotty's already answered before me with a pretty much identical approach. However, in the code above, the individual menu divs are properly floating next to each other as you want them to, as they do in the first code you posted in the question.
There are probably some div and styling elements that are a little redundant there now.
Edit: It does occur to me now that the operation of the menu in dotty's code is actually probably how you intended for the menu to be.
Put the #menuItem div inside the #menu div, and set the #menuItem div's position to absolute and remove it's float.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>test</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#menu").click(function () {
$('#menuItem').slideDown('slow');
});
});
</script>
</head>
<body>
<div style="width: 500px; margin: 0px auto; padding: 10px;">
<div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
My Menu
<div id="menuItem" style="border: 1px solid blue; position: absolute; z-index: 10; display: none; cursor: pointer;">
MenuItem1<br />
MenuItem2<br />
MenuItem3<br />
MenuItem4<br />
MenuItem5<br />
MenuItem6<br />
MenuItem7
</div>
</div>
</div>
<div style="margin: 50px 0px; padding: 0px; text-align: center;">
<div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
<div style=" position: relative; z-index: 1; float: right;">Form Element</div>
</div>
</div>
</body>
</html>