如何製作從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網格系統擴展出來的彩色背景？

回答

相關問題