Сетка 960 с повторяющимися узорами с обеих сторон - PullRequest
Новая
       24

Сетка 960 с повторяющимися узорами с обеих сторон

1 голос
/ 08 июля 2011

Я схожу с ума.Я создаю веб-сайт с сеткой 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>

Обратите внимание, что я использую разные шаблоны для заголовка и разделителя.

Спасибо за вашу помощь.

Джон

1 Ответ

0 голосов
/ 08 июля 2011

Я помещаю свой идентификатор заголовка за пределы сетки 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); }

Таким образом, мой идентификатор заголовка имеет полную ширину, исетка внутри этого

...