如何制作从960网格系统扩展出来的彩色背景？

类似于stackoverflows标题，我试图让我的标题背景颜色展开并接管页面的两面，同时仍然保留文字在中心，但我不确定如何使用960grid系统。这是我的html：如何制作从960网格系统扩展出来的彩色背景？

<body> 
    <div class="container_24"> 
    <div id="header-top-border" class="grid_24"></div> # take over top of page. 
    <div id="header-background" class="grid_24"></div> # take over top of page. 
    <div id="logo" class="grid_5"> 
     <h1>Logo</h1> 
    </div>   
    </div> 
</div>

我想有标志是对header-background的顶部，并在本网站的CSS来看，我不知道这是否应该是header-background股利或不内。这是如何完成的？

谢谢。

来源

2011-12-19 LearningRoR

您想将header-background放在container_24 div之外，因为后者充当限制可用页面宽度的包装。如果您希望徽标位于header-background之上，您可以将它放在header-background之内，或者您可以将它放在外面并使用负边距，绝对定位和z-index将其移到最上方。可能最好把它放在header-background之内。

您的代码可能是这样的：

<body> 
    <div id="header-background" class="banner"> 
    <div class="container_24"> # You may want this to help position things inside the banner 
     <div id="logo" class="grid_5"><h1>Logo</h1></div> 
    </div> 
    </div> # uses entire width of the window 
    <div class="container_24"> # only 24 columns wide 
    # everything else... 
    </div> 
</body>

来源

2011-12-19 19:46:03

拉出容器，然后创建另一个容器头：

<body> 
    <div id="header-background"> 
    <div id="header-top-border" class="container_24"></div> 
    </div> # takes up the whole width 
    <div class="container_24"> 
    <div id="logo" class="grid_5"> 
     <h1>Logo</h1> 
    </div>   
    </div> 
</div>

来源

2011-12-19 19:47:11 swatkins

如何制作从960网格系统扩展出来的彩色背景？

回答

相关问题