0

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

これで解決すると思いました。しかし、レンダリングすると、rootcss が値に準拠しません1008px。また、ルートは白background-colorとして表示されません。#FFFFFFそれはまだ私bodyの ものを示していますbackground-color。私は何を間違っていますか？

更新: 興味のある方へhttp://www.dynamicdrive.com/style/layouts/category/C12/で優れた既製の CSS レイアウトを見つけました。

4

3 に答える 3

1

本文にbackground-imageと 色を指定すると、それがすべてのページに表示されるようになり#god_container、ページのラッパーとして機能し、中央margin:0 auto;にwidth:1008px;.

position:static;また、#god_containerラッピング div にを指定する必要はありません。代わりposition:relative;に、絶対に配置されている場合でも、すべての子 div がその中に配置されていることを確認するために使用します。

最後に、#rootawidth: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;
}
于 2010-11-13T14:41:28.173 に答える
1

ここで何かが欠けているかどうかはわかりませんが、もっと簡単かもしれません。ラッパー 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/

于 2010-11-13T23:36:18.580 に答える
0

以下を試してください。

すべてのページに移動するように、本文にバックグラウンド URL を指定します

#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;                                                                                                   
    }
于 2010-11-13T14:38:31.297 に答える