CSS Layout с фиксированной шириной - PullRequest
Новая
       30

CSS Layout с фиксированной шириной

0 голосов
/ 13 ноября 2010

Я стремлюсь к компоновке с фиксированной шириной, с 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. Что я делаю не так?

ОБНОВЛЕНИЕ: Для всех, кто заинтересовался, я нашел отличные готовые макеты CSS на http://www.dynamicdrive.com/style/layouts/category/C12/

Ответы [ 3 ]

1 голос
/ 13 ноября 2010

Придав background-image и цвет для тела, убедитесь, что он отображается на всех страницах, а #god_container действует как обертка для страницы, отцентрируйте ее по margin:0 auto; и присвойте ей width:1008px;.

Также вам не нужно указывать position:static; для #god_container оберточного div, вместо этого используйте position:relative;, чтобы убедиться, что все дочерние элементы div размещены внутри него, даже если они расположены абсолютно.

Наконец, предоставление #root a 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;
}
1 голос
/ 14 ноября 2010

Не уверен, что я что-то здесь упускаю, но это может быть намного проще.Вам не нужна оболочка 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/

0 голосов
/ 13 ноября 2010

Попробуйте ниже.

задайте задний 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;                                                                                                   
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...