Раскладка страницы и позиционирование

Теория

Это не сложно – подготовить раскладку страницы с помощью CSS. Многие люди используют для создания раскладки страницы таблицы, поэтому на первый взгляд использование CSS может показаться сложным. На самом деле это не так. Этот способ просто другой и, что важно, имеет больше смысла.

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

Позиционирование

Свойство position применяется для описания элемента, когда он позиционирован (размещен) абсолютно (absolute), относительно (relative), статично (static) или фиксировано (fixed).

Значение static – это значение по умолчанию для всех элементов. Оно определяет нормальное расположение элементов, как они обычно встречаются в HTML-документе.

Значение relative очень схоже с static, с той лишь разницей, что вы можете сместить элементы с его прежнего расположения при помощи значений top, right, bottom и left.

Значение absolute вытаскивает элемент из стандартного потока HTML-документа и трансформирует его в полностью новый мир. В этом маленьком и безумном мире можно размещать абсолютно позиционированный элемент в любой части страницы, если использовать значения top, right, bottom и left.

Значение fixed действует похожим образом, что и absolute. Разница в том, что элемент позиционируется относительно окна браузера, а не страницы. В результате элемент, позиционированный с помощью fixed всегда находится на одном и том же месте, даже если вы прокручиваете окно в браузере. Это в теории. На практике техника идеально работает в браузерах Mozilla и Opera, но в IE вы можете столкнуться с проблемами.

Раскладка страницы с использованием абсолютного позиционирования

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

<div id="navigation">
<ul>
<li><a href="this.html">This</a></li>
<li><a href="that.html">That</a></li>
<li><a href="theOther.html">The Other</a></li>
</ul>
</div>

<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>

Достигнем желаемого с помощью этих значений CSS:

#navigation {
	position: absolute;
	top: 0;
	left: 0;
	width: 10em;
}

#content {
	margin-left: 10em;
}

Этот фрагмент кода размещает панель навигации на левой стороне и задает ширину колонки в 10 em.

Т.к. навигация позиционирована абсолютно, она не затрагивается потоком остальной страницы. Следовательно, все, что требуется, это установить левое поле (left margin) области контента равным ширине панели навигации.

Несложно. Разумеется, двухколоночной техникой это не ограничивается. Используя позиционирование с умом, вы можете расставить практически неограниченное количество колонок. Когда нужно добавить третью колонку, вы просто добавляете в HTML-документ новый фрагмент «navigation2″ и изменяете CSS:

#navigation {
	position: absolute;
	top: 0;
	left: 0;
	width: 10em;
}

#navigation2 {
	position: absolute;
	top: 0;
	right: 0;
	width: 10em;
}

#content {
	margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}

Единственный недостаток абсолютно позиционированных элементов связан с маленьким миром, который они населяют – невозможно сказать, где они заканчиваются.

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

Однако вы должны оставить надежды разместить что-либо, например, подвал, под этими элементами. Для достижения этой цели надо использовать float для размещения фрагментов, а не абсолютное позиционирование.

Floating

Элемент с атрибутом float будет перемещен на правую или левую сторону, а окружающий контент будет его обтекать.

Floating (обтекание) — обычно применяется для позиционирования маленьких элементов на странице, но вы также можете применять его к большим фрагментам, например колонкам навигации.

Рассмотрим HTML-пример. Можно добавить следующие правила CSS:

#navigation {
	float: left;
	width: 10em;
}

#navigation2 {
	float: right;
	width: 10em;
}

#content {
	margin: 0 10em;
}

Если следующий элемент не должен «огибать» float-объекты, можно добавить свойство clear. clear: left очищает float-элементы слева, clear: right — справа, а clear: both делает так, чтобы float-элементов не было с обеих сторон – слева и справа.

Таким образом, чтобы, например, добавить подвал на страницу, вам потребуется поместить HTML-фрагмент id «footer» и добавить эту строчку в CSS-файл:

#footer {
	clear: both;
}

Вот и все. У вас будет подвал (футер), который всегда будет показываться под колонками, независимо от их длины.

Это было лишь краткое введение в позиционирование и расстановку элементов при помощи float, где размещение больших элементов на странице может обернуться стрессом. Но надо всегда помнить, что такие техники могут быть применимы ко всем элементам, внутри этих фрагментов.

Используя значения Float, позиционирование, padding, marging и границы вы можете реализовать любой проект. И все, что можно достигнуть при помощи таблиц, можно сделать при помощи CSS.

Единственным оправданием использования таблиц в раскладке страницы можно считать ситуацию, когда страница создается для очень старых браузеров. Вот почему CSS — это современное решение: оно предоставляет вам доступные страницы, которые весят меньше, чем такие же, но сверстанные с помощью таблиц.

Фото




Видео



Автор Cascading Style Sheets