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>
请注意，我对标题和分隔符使用不同的模式。
感谢您的帮助。
约翰
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/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>
Note that I use different patterns for the header and the divider.
Thanks for your help.
John
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我把我的标题 ID 放在 960 网格之外
，然后放在你的 CSS 中
所以我的标题 ID 是全宽的，网格在里面
I put my header id outside the 960 grid
then in your CSS
So my header ID is full width, and the grid is inside that