CSS 布局固定宽度

发布于 2024-10-02 10:36:41 字数 2317 浏览 8 评论 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;
}

我认为这可以解决这个问题。但是当我渲染时，root css 不遵守 1008px 值。此外，root 的 background-color 不会显示为 #FFFFFF 即白色。它仍然显示我的body的background-color。我做错了什么？

更新：对于任何感兴趣的人，我在 http: //www.dynamicdrive.com/style/layouts/category/C12/

原文

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/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

痴骨ら 2024-10-09 10:36:41

为正文提供背景图像和颜色，确保它显示在所有页面上，并让#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;
}

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

回复收藏 0 原文

三生池水覆流年 2024-10-09 10:36:41

不确定我是否在这里遗漏了一些东西，但它可以更简单。您不需要包装 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.网/XdA92/1/

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/

回复收藏 0 原文

眼睛会笑 2024-10-09 10:36:41

尝试下面的方法。

将后台 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;                                                                                                   
    }

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

回复收藏 0 原文

~没有更多了~