CSS布局固定寬度

Question

我的目標是固定寬度布局，所有顯示器的width:1008px 。 這是我的HTML-

<body>
<div id="god_container">
    <div id="root">
        ... all content ...
    </div>
</div>
</body>

和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;
}

我以為這會解決。 但是，當我渲染時， root css不會遵守1008px值。 根的background-color也不會顯示為#FFFFFF即白色。 它仍然顯示我body的background-color 。 我究竟做錯了什么？

更新：對於任何感興趣的人我都在http://www.dynamicdrive.com/style/layouts/category/C12/找到了優秀的現成CSS布局

Answer 1

將background-image和顏色賦予正文，確保其顯示在所有頁面上，並讓#god_container充當頁面的包裝，以margin:0 auto; 並將其width:1008px; 。

同樣，您也不必給出position:static; 到#god_container包裝div，而不是使用position:relative; 確保所有兒童div，即使絕對定位也放在里面。

最后，給#root一個width:100%將div放到它的父div寬度。

嘗試使用此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;
}

Answer 2

不確定我是否在這里遺漏了一些東西，但它可能會簡單得多。 你不需要一個包裝DIV ......身體可以處理它。 您只需要根目錄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>

你去這里： http : //jsfiddle.net/XdA92/1/

Answer 3

試試下面的內容。

將背景網址提供給主體，以便轉到所有頁面

#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;                                                                                                   
    }

CSS布局固定寬度

問題描述

3 個解決方案

解決方案1
1 已采納 2010-11-13 14:41:28

解決方案2
1 2010-11-13 23:36:18

解決方案3
0 2010-11-13 14:38:31

CSS布局固定寬度

問題描述

3 個解決方案

解決方案1 1 已采納 2010-11-13 14:41:28

解決方案2 1 2010-11-13 23:36:18

解決方案3 0 2010-11-13 14:38:31

解決方案1
1 已采納 2010-11-13 14:41:28

解決方案2
1 2010-11-13 23:36:18

解決方案3
0 2010-11-13 14:38:31