2011-07-08 58 views
1

我要瘋了。我正在創建一個帶有960網格系統的網站,到目前爲止一切正常 - 我確實瞭解它。我唯一的問題是以下內容,因爲框架本身僅限於960像素,我不知道如何使網站自動適應各種屏幕分辨率。這就是我的意思:我創建了一個網站,它的兩側都有重複的圖案,所以我不希望它以960像素爲結尾,而是希望左側和右側的圖案重複一次。我在網站的三個不同部分有三種不同的模式。 示例網站是:960兩邊重複圖案的網格

http://www.assistly.com/
http://secondandpark.com/

這是一個非常基本的問題,我試着用的div來解決它,但無法找到一個解決方案。

<html> 
<head> 
<title>Prototype</title> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> 
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" /> 
<link rel="stylesheet" type="text/css" media="all" href="css/960_24_col.css" /> 
<link rel="stylesheet" type="text/css" media="all" href="css/demo.css" /> 
</head> 
<body> 

<div class="container_24"> 
<div id="header"> 
<div class="grid_1"></div> 
<div class="grid_22"> 
<img src="images/main_header.jpg"></div> 
<div class="grid_1 alpha"></div> 
</div> 
<!-- End of Main Header --> 
<div class="clear"></div> 
<div class="grid_1"> 
</div> 
<div class="grid_22"> 
<img src="images/divider.jpg"> 
    </div> 
<div class="grid_1"> 
</div> 
<!-- End of Divider --> 
<div class="clear"></div> 
<div class="grid_1"> 
</div> 
<div class="grid_2"> 
<img src="images/left_shadow.jpg"> 
</div> 
<div class="grid_18"> 
</div> 
<div class="grid_2"> 
<img src="images/right_shadow.jpg"> 
</div> 
<div class="grid_1"> 
</div> 
<!-- End of left right shadow --> 
<div class="clear"></div> 
<div class="grid_2 alpha"> 
</div> 
<div class="grid_20"> 
<img src="images/bottom.jpg"> 
    </div> 
<div class="grid_2 omega"> 
</div> 
<!-- End of Bottom --> 

<div class="clear"></div> 
</div> 
<!-- End of Container --> 

</body> 
</html> 

請注意,我使用不同的標題和分隔符模式。

感謝您的幫助。

約翰

回答

0

我把我的頭標識的960網格

<div id="header"> 

<div class="container_12"> 

    <div class="grid_2"><img src="#" alt="#"></div> 
    <div class="grid_10"><p class="subtitle">#</p></div> 

    <div class="clear"></div> 
</div> 
</div> 

然後外面在你的CSS

#header { 
background: #686868 url(../images/bg_header.jpg); } 

所以我的頭ID是全寬和電網在裏面

+0

甜,這是我正在尋找的。我實現了它!非常感謝那非常簡單的解決方案。 – John