如何使用CSS在网页背景上拉伸标题 [英] How to stretch a header across a web page background with CSS

问题描述

http://www.stumbleupon.com/

http://www.mixx.com/

这两个网站都有一个背景标题横跨页面，而内容的中心，覆盖像80％的宽度，也完美地与布局的其余部分对齐。

我对这两个网站特别感兴趣，因为标题有两种背景颜色，而不只是一种。

解决方案

分析 stumbleupon.com ：

标题实际上包含两个 div： wrapperHeader 和 wrapperNav 。这两个具有不同的背景颜色。
这些div只有一个具有CSS属性的子元素

  margin：0 auto 
  
 
 
 
这会导致水平居中。
 
 
 
内容div，所以标题，导航和内容总是居中。当然，这需要为这些元素设置一些宽度。
 
 
 
结构如下所示：
 < div id =wrapperHeader> 
< div class =id =header> 
<！ -  mnore stuff here，like logo  - > 
< / div> <！ -  end header  - > 
< / div> 
< div id =wrapperNav> 
< ul id =navMain> 
< li class =discover first>< a href =/ discover / toprated />探索< / a>< / li& 
< li class =favorites>< a href =/ favorites />收藏夹< / a>< / li& 
< li class =stumblers>< a href =/ stumblers / onlinenow />绊脚石< / a>< / li> 
< / ul> <！ -  end navMain  - > 
< / div> 
< div id =wrapperContent> 
< div class =clearfixid =content> 
< / div> <！ -  end content  - > 
< / div> 
  
 如果您获得 Firebug ，您可以自己轻松地分析这些元素。 
 
http://www.stumbleupon.com/

http://www.mixx.com/

Both of these websites have a background header stretched across the page while the content is centered and is covering like say 80% of the width, and that also perfectly aligns with the rest of the layout.

I am particularly interested in these two sites, because the header has two background colors, not just one.

I am sure there are tons of tutorials on the web, but I do not the keywords to search for.
解决方案
Analyzing stumbleupon.com:

The "header" consists actually of two divs: wrapperHeader and wrapperNav. Those two have different background colors.
These divs have only one child each that has the CSS property 
margin: 0 auto
This results in a horizontal centering.

This property is assigned to the content div too, so the header, navigation and content are always centered. Of course this requires to set some width for this elements.

The structure looks like this:
<div id="wrapperHeader">
    <div class="" id="header">
            <!-- mnore stuff here, like logo -->
    </div>  <!-- end header -->
</div>
<div id="wrapperNav">
    <ul id="navMain">
        <li class="discover first"><a href="/discover/toprated/">Discover</a></li>
        <li class="favorites"><a href="/favorites/">Favorites</a></li>
        <li class="stumblers"><a href="/stumblers/onlinenow/">Stumblers</a></li>
    </ul> <!-- end navMain -->  
</div>
<div id="wrapperContent">
    <div class="clearfix" id="content"> 
    </div> <!-- end content -->
</div>
If you get Firebug for Firefox, you can easily analyze the elements yourself.

                        
这篇关于如何使用CSS在网页背景上拉伸标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！