Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
Hi there,
I'm going nuts. I just can't find a solution for this. This is how it SHOULD look like:
The navigation will have background image (full width), but the menu itself should be centered. Same for the footer. And that's my problem. This is how it currently looks:
The red box in the background is the footer, which of course should be at the bottom below the blue box.
That's my HTML:
div id="menu"
div id="menu-content" /div
/div
div id="header" /div
div id="conten" /div
div id="footer" /div
And my CSS:
#menu{width:100%;height:60px;background:#FF0;}
#menu-content {left:50%;margin-
left:-512px;position:absolute;overflow:hidden;height:60px;width:1024px;background:#0FF;}
#header {width:1024px;height:300px;background:#CF0;left:50%;position:absolute;margin-left:-512px;}
#content{width:1024px;height:500px;background:#03C;left:50%;position:absolute;margin-left:-512px;margin-top:300px;}
#footer{width:100%;height:100px;background:#C33;}
Any suggestions what I'm doing wrong or how I could solve this?
Thanks a lot
Nicole -
I'll answer that questions myself: after I got rid of all the absolute positioning and used margin:0 auto; instead, everything looks fine :)
-
great!
-
- CommentAuthordanidallia123
- CommentTimeMay 20th 2010
HTML code for the page
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-language" content="en" />
<title>Test page</title>
</head>
<body>
<div id="container">
Lorem ipsum
</div>
</body>
</html>
CSS code:
body
{
/*some browsers add margins and padding by default, remove them*/
margin:0px;
padding:0px;
}
#container
{
width:800px;
height:600px;
/*visual aid so we can see the div*/
border:1px solid #000;
/*center div*/
margin:0 auto;
}
Text align center, this method works for internet explorer and requires you to put "text-align:center" css attribute in your "body" style and later reset it by adding "text-align:left" (or right) in your divs (or other layout structure). This method works on all versions of internet explorer
body
{
/*some browsers add margins and padding by default, remove them*/
margin:0px;
padding:0px;
/* center everything*/
text-align:center;
}
#container
{
/* reset text centering*/
text-align:left;
width:800px;
height:600px;
/*visual aid so we can see the div*/
border:1px solid #000;
}
By combining the two methods above you can center your layout on all browsers including internet explorer
http://www.websitedesignerschennai.com -
danidallia123 has given the right solution. There are really browsers that add margins and paddings as defaults. These should be eliminated to put things in proper place. Learned this in Millionaire Mind Intensive Seminar
1 to 5 of 5