Добрый день.

Сегодня завершающая статья о фиксированной верстке с помощью слоев - как создавать три колонки используя позиционирование. Данная статья темой связана с предыдущим материалом под названием Макет из трех колонок. Статья Размещение трех колонок печататется с сокращениями, полный вариант вы можете найти по адресу www.htmlbook.ru/content/?id=186.

Больше статей в ближайшее время не будет.

Фиксированный дизайн. Размещение трех колонок

Альтернативный подход к созданию макета из трех колонок с помощью слоев состоит в использовании методов позиционирования. Сюда входит применение параметра position совместно с параметрами left и top. Аналогично верстке двумя колонками разделяют два подхода: с абсолютным и относительным позиционированием элементов.

Абсолютное позиционирование

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

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

К недостаткам данного подхода можно отнести недостаточную гибкость и строгую привязку к координатной сетке. Чтобы пристроить любой элемент, необходимо точно знать расстояние от него до края браузера по горизонтали и вертикали, что не всегда можно определить. Поэтому приходится прибегать к помощи скриптов на языке JavaScript, позволяющих вычислять нужную дистанцию, а это приводит к усложнению кода. Несмотря на описанные особенности, в определенных ситуациях указанный метод вполне резонно применять.

Рассмотрим как создать три колонки, как показано на рис. 1, используя абсолютное позиционирование.

Рис. 1. Пример создания трех колонок

В модульной сетке на рис 1. задействовано шесть слоев, выделенных разным цветом. Стиль данного макета можно условно поделить на две части — первая часть описывает оформление и вид элементов, а вторая — их положение. Заголовки к каждому блоку назовем title1, title2, title3, где число обозначает номер колонки, а col1, col2, col3 — соответственно названия самих колонок с текстом. Местоположение слоев задается параметрами left и top, которые определяют расстояние по горизонтали и вертикали от левого верхнего угла окна браузера до левого верхнего угла слоя. Значения этих параметров указываются с учетом ширины слоев и расстояния между ними. При этом обязательно в стиль слоя для атрибута position следует добавить значение absolute (пример 1).

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

Обратите внимание, что в каждом слое текст находится внутри параграфа (тег P). Такая конструкция необходима для создания полей от текста до края слоя и корректного отображения в разных браузерах. Если поместить параметр padding в стиль каждого слоя, управляя, таким образом, величиной полей, то в браузерах Opera и Netscape стройность макета будет нарушена, и слои начнут «налезать» друг на друга. Именно по этой причине нужно размещать тег P внутри каждого слоя и задавать ему параметр margin, вместо привычного padding.

Относительное позиционирование

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

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

Описанный метод работает только с двумя колонками и добавление третьей колонки приводит к смещению слоя. Результат получается совершенно невостребованным. Чтобы поправить положение, необходимо снова вернуться к двум колонкам. Для этого следует объединить две левые колонки, поместив их внутрь дополнительного слоя. Результат манипуляций показан на рис. 2.

Рис. 2. Способ размещения слоев

Вновь созданный слой с именем tr выступает в роли одной колонки, поэтому можно воспользоваться тем же методом, что и в случае макета с двумя слоями. А именно, для слоя tr следует задать абсолютное положение, а для слоя col3 — относительное. Схема вложенности слоев и способ позиционирования приведены в примере 2.

Смещение слоев по горизонтали и вертикали относительно друг друга управляется аргументами параметров left и top и зависит от ширины колонок и пробелов между ними.

background-repeat

Описание
Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image, и по какой оси. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.

Синтаксис
background-repeat: no-repeat | repeat | repeat-x | repeat-y

Аргументы
Значение no-repeat устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется атрибутом background-position (по умолчанию в левом верхнем углу). Другими допустимыми значениями являются repeat (повторяемость по вертикали и горизонтали), repeat-x (по горизонтали), repeat-y (по вертикали).

Значение по умолчанию
repeat

Наследование
Значения, присвоенные данному параметру, не наследуются.

Применяется
Ко всем элементам.

Объектная модель
[window.]document.getElementById("elementID").style.backgroundRepeat

Примечание
Internet Explorer 4 повторяет фоновый рисунок вниз и направо. Более правильное поведение для изображения фона - повторяться в обоих направлениях по горизонтали (для параметра repeat-x) или вертикали (параметр repeat-y).