具有连续背景图像但居中内容的布局？

我试图找出我将如何去创建一个网站，有3个独立的“层”（顶部的导航，然后内容，然后页脚）每一个不同的背景图片，那砖100％的宽度......但我希望我的内容能够居中（好像包含div的边距：0自动应用）。具有连续背景图像但居中内容的布局？

到目前为止，我一直在试图只为背景图像创建的div，然后绝对定位我的内容div但允许它们自动中心。

但是科西嘉的，我取出文件存在的“流动”的元素，所以我的背景图片的div结束堆放反目成仇。

这是真的很难，所以希望解释这个例子可以帮助：

http://jsfiddle.net/RB46S/

正如你所看到的，我有我的蓝格，在后台一直延伸到100％，但我想我的导航和一个大型的图像中心在这里。

我有我的身体，这是绿色的，然后一个hp_content股利，这将是我所有的内容将坐，居中，这里的问题是你不能申请一个保证金或填充值（我已经应用它们来显示他们不工作），只有父母/浏览器顶部的位置，这使我的网站响应我相信时会导致问题。

然后我有我的红色div，它与顶部导航（蓝色）div相同，它有100％的边框，但我希望页脚的东西（twitter feed，最新的博客文章和联系方式）以居中这里。

希望一些人懂什么，我想实现，并且知道如何正确地设置这样一个页面，任何帮助深表感谢！

乔恩

来源

2012-10-17 Jon Kyte

你不想设置填充/边距？但是你想让所有的文字在页面中水平居中？ – RMN

也许这个例子将阐明我试图达到的目标。 - http://www.jessmarksphotography.com.au - 看看有三个“图层”的纹理背景图像，绿色 - 黑褐色 - 奶油。但是所有内容都集中在一起，我会怎么做呢？在我尝试的例子中，我的内容在我的第一个颜色带（蓝色div）下开始。对不起，这很难解释，更清楚吗？ - 谢谢 –

好的！尝试构建您的HTML是这样的：

<html> 
<head></head> 

<body class="index"> 

    <section class="top"> 
     <header class="content"> 
      <nav> 
       <ul id=""> 
        <li><a href="" id="">link 1</a></li> 
        <li><a href="" id="">link 2</a></li> 
       </ul> 
      </nav> 
     </header> 
    </section> 

    <section class="main"> 
     <div class="content"> 
      <h2>Whatever</h2> 
      <div class="something">This is something else</div> 
     </div>   
    </section> 

    <section class="footer"> 
     <footer class="content"> 
      Footer content 
     </footer> 
    </section> 

</body> 
</html>

然后一些CSS，如：

body, html{  
    width:100%; 
} 

body { 
    background: green; 
} 

body > section{ 
    width:100%; 
} 

/* this style will set all the section .content(s) to be 400px wide */ 
body > section > .content{ 
    display:block; 
    margin:0 auto; 
    width:400px;  
} 

section.top { 
    height: 510px; 
    background: blue; 
} 

/* if you want to individually change widths for each section, do something like this:*/ 

section.top .content{ 
    width:100%; 
}  

/* or not! */ 

section.main { 
    height:200px; 
} 

section.footer { 
    height: 400px; 
    background: red; 
}

玩弄：http://jsfiddle.net/FC2Ea/

因此，对于每个网站部分，你必须对所有的容器该部分的内容带有一个易于记忆的类名称，如“.content”。您可以将所有内容设置为相同的宽度，也可以将每个部分的内容设置为不同的宽度，具体取决于您要进行的操作。无论哪种方式，这些部分将占据浏览器宽度的100％。祝你好运！ :)

来源

2012-10-17 16:29:07 chrisgonzalez

干净整洁！喜欢它。 –

这对我非常有帮助，谢谢你，标记为正确的答案，因为它完美地回答了问题。再次感谢！ - 仅仅指出

中缺少'='，如果你想编辑它，所以其他人不会对CSS为什么不能设计该元素感到困惑！ –

好眼睛 - 谢谢！ – chrisgonzalez

如果您在每个主要事业部和使用风格中添加其他事业部作为

<div style="Width: 80%; float:right; margin-right: 150px;">

我想，这可能有助于在一定程度上？

<div class="top_shade"> 
    <div style="Width: 80%; float:right; margin-right: 150px;">  
    <header> 
       <nav> 
        <ul id=""> 
         <li><a href="" id=""></a></li> 
         <li><a href="" id=""></a></li> 
         <li><a href="" id=""></a></li> 
         <li><a href="" id=""></a></li> 
         <li><a href="" id=""></a></li>  
        </ul> 
       </nav> 
    </header> 
    </div> 
    </div>

来源

2012-10-17 12:13:11 RMN

这对身体部分（中间层）不起作用，因为在该层上没有包含div，只有身体。因此，它最终计算了对身体（浏览器窗口一侧）的边距，而不是将内容居中。感谢您的建议，但 –

具有连续背景图像但居中内容的布局？

回答

相关问题