CSS Layout Fixed-Width
I am aiming for a fixed width layout, with width:1008px across all monitors. Here's my HTML-
<body>
<div id="god_container">
<div id="root">
... all content ...
</div>
</div>
</body>
and CSS -
#god_container{
background:url("/site_media/images/bg-1008.png") repeat-y scroll center center #D4D9DD;
margin:auto;
position:static;
width:auto;
} 开发者_如何学运维
#root {
background-color:#FFFFFF;
margin:auto;
width:1008px;
color:#000000;
font-family:Verdana,Arial,sans-serif;
font-size:10pt;
}
body{
color:#373737;
font:16px arial;
line-height:1;
background-color:#D4D9DD;
}
I thought this would solve it. But when I render, the root css does not adhere to 1008px value. Also root's background-color does not show as #FFFFFF i.e. White. It still shows my body's background-color. What am I doing wrong?
UPDATE: To anyone interested I have found excellent ready-made CSS layouts at http://www.dynamicdrive.com/style/layouts/category/C12/
Giving the background-image and color to the body, makes sure it is displayed on all pages, and have the #god_container act as a wrapper for the page, center it by margin:0 auto; and give it the width:1008px;.
Also you don't have to give the position:static; to the #god_container wrapping div, instead use position:relative; to make sure all child divs, are placed inside it even if positioned absolutely.
At last, giving #root a width:100% will place the div to it's parent div width.
Try using this CSS:
body{
color:#373737;
font:16px arial;
line-height:1;
background:url("/site_media/images/bg-1008.png") repeat-y scroll center center #D4D9DD;
}
#god_container{
margin:0 auto;
position:relative;
width:1008px;
}
#root{
background-color:#FFFFFF;
margin:auto;
width:100%;
color:#000000;
font-family:Verdana,Arial,sans-serif;
font-size:10pt;
}
Not sure if I'm missing something here, but it could be much simpler. You don't need a wrapper DIV... the body can handle that. All you need is your root DIV.
CSS
body{
background: #D4D9DD url("/site_media/images/bg-1008.png") repeat-y center;
color:#373737;
font: 16px/1 Arial;
}
#root {
background: #FFFFFF;
color: #000000;
margin: 0 auto;
width: 1008px;
}
HTML
<body>
<div id="root">
... all content ...
</div>
</body>
Here ya go: http://jsfiddle.net/XdA92/1/
Try the below.
give the back ground url to the main body so that it will go to all pages
#god_container{
background:url("/site_media/images/bg-1008.png") repeat-y scroll center center #D4D9DD;
margin:auto;
position:static;
text-align:left;
width:1008px;
}
加载中,请稍侯......
精彩评论