Шаблоны для новичков. Урок 7. Wrap-блоки. Имитация колонок

Пока мы не приступили к практике создания шаблона MaxSite CMS, следует уточнить еще несколько важных моментов вёрстки. Одной из проблем, с которой сталкивается практически каждый верстальщик - это оформление блока контента и сайдбара. Такие элементарные действия, как задание отступа или фона, могут оказаться не такими уж и тривиальными, как может показаться изначально.

Рассмотрим вариант верстки блоков, при котором нивелируются «странности» блочной модели.

Технология wrap-блоков

Возьмем из предыдущего урока вывод контента и сайдбара справа. Это рабочий пример и немного его усложним. Пусть для контента нужно добавить правую рамку - чтобы визуально отделить сайдбар.

Рамка у нас задается css-свойством border-right. Дописываем для контента это свойство.

<div class="bg-gray" style="width: 500px">
 
<div class="margin-center bg-yellow" style="width: 400px">
  	<div class="bg-green">ШАПКА</div>
 	
	<div style="background: Khaki">
 		<div class="left" style="background: Bisque; width: 250px; height: 250px; border-right: 1px solid black">КОНТЕНТ</div>
  		<div class="left" style="background: Palegreen; width: 150px; height: 100px;">САЙДБАР</div>
  		<div class="clearfix"></div>
	</div>	
  
	<div class="bg-blue">ПОДВАЛ</div>
</div>
 
</div>

Мы видим, что сайдбар «слетел» вниз.

Из блочной модели мы знаем, что общая ширина складывается из width + border + отступы. Поскольку мы добавили однопиксельную границу, то ширина контента стала 251px. В сумме с сайдбаром (150) это больше, чем общаяя ширина родителя (400). То есть сайдбару просто не хватает места.

Первое, что приходит на ум - это уменьшить ширину контента на размер границы. В принципе это вариант, но только до той поры, пока при отладке шаблона вы не будете менять границы и размеры «туда-сюда», подгоняя их под свой дизайн. Необходимо какое-то решение, которое позволило бы указывать границы и отступы так, чтобы это не влияло на положение элементов модульной сетки.

Для этого используются wrap-блоки. По сути - это просто еще один вложенный блок DIV. Теперь, если нам нужно задать какие-то внутренние отступы или границу, то мы применяем их не к основному блоку, а его вложенному.

...
<div class="left" style="background: Bisque; width: 250px; height: 250px;">
	<div style=" border-right: 1px solid black; height: 100%;">КОНТЕНТ</div>
</div>
...

Поскольку нам требуется граница по всему контенту, то я указал height:100%. Обычно высоту ни у родителя, ни у wrap-блока указывать не требуется.

Другая частая задача, задать отступы между сайдбаром и контентом. Или для контента задать левый отступ.

Без wrap-блока пришлось бы высчитывать ширину каждого блока с учетом отступов и границ. Проблема усугубляется ещё тем, что иногда дизайн меняется «на лету»: например вместо использования border, необходимо использовать фоновую имитацию колонок с помощью background (об этом речь ниже), что опять приводит к пересчёту размеров. С wrap-блоком такой проблемы просто не существует.

...
<div class="left" style="background: Bisque; width: 250px; height: 250px;">
	<div style="border-right: 1px solid black; 
		height: 100%; padding: 5px 15px 0 10px;"> а а а а а а а а 
		а а а а а а а а а а а а а а а а а а а а а а а а а а а а
	</div>
</div>
...

Запомним простое правило: для всех блоков модульной сетки наличие wrap-блока является обязательным. Для родителей не задаются отступы и границы.

В нашем примере модульная сетка состоит из блока шапки, блока контент+сайдбар, контент, сайдбар и подвал. При верстке шаблона каждый этот элемент должен содержать свой wrap-блок.

Колонки в блоках

Нам уже пришлось убедиться, что блочная верстка не совсем подходит для создания колонок. Строго говоря колонки можно сделать только одним способом - с помощью таблиц (тэг table) или каких-то вариаций с css-аналогами.

Табличная верстка достаточно привлекательна, но имеет несколько недостатков, один из которых более сложный код и некоторые сложности отображения в браузерах: пока не загрузится вся таблица, браузер её не отображает (впрочем это уже зависит от браузера - некоторые пытаются предугадывать вывод таблиц).

По этой причине, для колонок, точнее имитации колонок, были разработаны несколько способов.

Имитация цветом

Этот способ мы уже рассмотрели ранее. Для сайдбара и его родителя указывается один цвет, отличный от контента. В этом случае визуально мы видим одну колонку сайдбара.

Проблема этого способа в том, что бывают ситуации, когда контент всё-таки меньше по высоте, чем сайдбар. Это приводит к несовсем красивому эффекту.

Избавиться от этого довольно сложно, разве что применить один из способов, «выравнивающих» высоту контента и сайдбара. Они достаточно сложные, поэтому мы рассматривать не будем.

Ну и важно то, что цветом далеко не всегда можно решить поставленную дизайнером задачу.

Имитация границей

Иногда стоит задача использовать один цвет для контента и сайдбара, но нужно между ними провести визуальную границу. Выше мы уже рассмотрели такой пример, попробуем его немного переделать. Не будем явно задавать разные высоты контента и сайдбара, а просто разместим тестовый текст.

<div class="bg-gray" style="width: 500px">
 
<div class="margin-center bg-yellow" style="width: 400px">
  	<div class="bg-green">ШАПКА</div>
 	
	<div style="background: Palegreen">
 		<div class="left" style="background: Bisque; width: 250px;">
			<div style="border-right: 1px solid red">Lorem ipsum dolor sit amet, mel in essent disputando liberavisse, cu sit case quodsi disputando. Modo expetenda vel ex. In qui solet virtute appellantur, per vivendum inimicus pertinacia ne. Utroque vocibus suscipiantur an nam, pro similique incorrupte at. Verear pertinax ei vel, in has illum electram, alterum eligendi consequuntur ei eum. Ne cum nisl delicatissimi, ut pri eirmod alienum, et est omnium accumsan.</div>

		</div>
  		<div class="left" style="background: Palegreen; width: 150px;">Lorem ipsum dolor sit amet, mel in essent disputando liberavisse, cu sit case quodsi disputando. </div>
  		<div class="clearfix"></div>
	</div>	
  
	<div class="bg-blue">ПОДВАЛ</div>
</div>
 
</div>

Рамку я сделал для правой границы контента (точнее у его wrap-блока). При условии, что контент по высоте больше сайдбара, всё отображается замечательно. Поменяем тексты, чтобы сайбар оказался больше.

Результат опять неприятный - граница отображается только у контента, но не у сайбара.

В этом случае, по идее, нужно было бы указать левую границу у сайдбара. Делаем для сайдбара wrap-блок и указываем у него левую границу (цвет blue для наглядности).

Мы видим, что теперь между колонками граница отображается, но с одним деффектом - там, где границы совпадают, образуется ступенька (двойная линия красный + синий).

Чтобы убрать ступеньку, нам нужно сдвинуть линию сайдбара на позицию линии контента, тогда эти две линии визуально сольются в одну. Для этого используем сдвиг margin-left: -1px. Вот полный готовый код.

<div class="bg-gray" style="width: 500px">
 
<div class="margin-center bg-yellow" style="width: 400px">
  	<div class="bg-green">ШАПКА</div>
 	
	<div style="background: Palegreen">
 		<div class="left" style="background: Bisque; width: 250px;">
			<div style="border-right: 1px solid red">Lorem ipsum dolor sit amet, mel in essent disputando liberavisse, cu sit case quodsi disputando.</div>

		</div>
  		<div class="left" style="background: Palegreen; width: 150px;">
			<div style="border-left: 1px solid red; margin-left:-1px">Lorem ipsum dolor sit amet, mel in essent disputando liberavisse, cu sit case quodsi disputando. Modo expetenda vel ex. In qui solet virtute appellantur, per vivendum inimicus pertinacia ne. Utroque vocibus suscipiantur an nam, pro similique incorrupte at. 
			</div>
		</div>
  		<div class="clearfix"></div>
	</div>	
  
	<div class="bg-blue">ПОДВАЛ</div>
</div>
 
</div>

Имитация фоновой картинкой

Этот способ, хоть и требует дополнительных усилий, но самый эффективный.

Суть его заключена в том, что для общего блока контент+сайдбар указывается фоновая картинка, которая повторяется по вертикали. Делается это с помощью css-свойства background, которое может использоваться вот в таком варианте:

background: url("картинка") repeat-y;

• url("картинка") - http-путь к картинке
• repeat-y - указывает повторять эту картинку по-вертикали.

Сама картика подготавливается в каком-нибудь графическом редакторе, например в PixBuilder.

Преимуществом этого способа является то, что

• не меняются размеры и отступы блоков,
• можно задавать одновременно и границу, и фон каждой колонки.

Вот пример фоновой картинки.

Создание «настоящих» колонок

Этот способ основан на возможностях CSS указывать тип поведения блока. Мы уже рассмотрели блочные тэги и строчные. В CSS для каждого тэга можно задать и ряд других, один из них - имитация ячейки таблицы. Одним из свойств таблиц является равная высота смежных ячеек. Таким образом, если для контента и сайдбара указать это свойство, то браузер автоматически сделает их равными по высоте.

Свойство display может иметь разные значения. Ячейка таблицы - это table-cell. Правда есть один нюанс. У нас блоки выровнены как float, но для таблиц это не совсем правильно, поскольку таблицы выводятся по своему алгориму, где ячейки одной строки автоматом выравниваются поверху. Поэтому если мы хотим попробовать вывести ячейки таблицей, то нужно убрать у них float.

<div class="bg-gray" style="width: 500px">
 
<div class="margin-center bg-yellow" style="width: 400px">
  	<div class="bg-green">ШАПКА</div>
 	
	<div style="background: Palegreen">
 		<div style="background: Bisque; width: 250px; display: table-cell;">Lorem ipsum dolor sit amet, mel in essent disputando liberavisse, cu sit case quodsi disputando.</div>
  		<div style="background: Palegreen; width: 150px; display: table-cell;">Lorem ipsum dolor sit amet, mel in essent disputando liberavisse, cu sit case quodsi disputando. Modo expetenda vel ex. In qui solet virtute appellantur, per vivendum inimicus pertinacia ne. Utroque vocibus suscipiantur an nam, pro similique incorrupte at.</div>
	</div>	
  
	<div class="bg-blue">ПОДВАЛ</div>
</div>
 
</div>

Код, безусловно один из самых простых и понятных, только есть одно гиганское «но», которое не позволяет использовать его при верстке - display:table-cell не поддерживается браузером IE7, который, к величайшему сожалению, пока еще используется частью неcознательных граждан. Если общая тенденция показывает, что доля IE7 сейчас где-то в районе 5%, но она сильно меняется от сайта к сайту. Поэтому, прежде чем использовать этот способ, следует уточнить статистику браузеров для сайта клиента.

««« Урок 8 | Урок 6 »»»