960 grid with repeating patterns on either side
I am going crazy. I am creating a website with the 960 grid system and so far everything works fine - I do understand it. My only issue is the following, since the framework as itself is limited to 960 pixels, I do not understand how to make the website automatically fit to the various screen resolutions. Here is what I mean: I created a website that has repeating patterns to both of its sides, so instead of having it end at 960 pixels I would like the pattern on the left and the right side to repeat itself. I have three different patterns at three different parts of the website. Example websites are:
http://www.assistly.com/
http://secondandpark.com/It is a very basic problem and I tried to solve it with divs but could not find a solution.
<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/r开发者_Go百科ight_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>
Note that I use different patterns for the header and the divider.
Thanks for your help.
John
I put my header id outside the 960 grid
<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>
then in your CSS
#header {
background: #686868 url(../images/bg_header.jpg); }
So my header ID is full width, and the grid is inside that
加载中,请稍侯......
精彩评论