Фиктивные колонки.

Перевод статьи:  Faux Columns.
Автор:  Dan Cederholm.

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

Один из наиболее часто задаваемых мне вопросов, касающихся дизайна моего личного сайта звучит следующим образом:

Как вам удается добиться того, что цветной фон правой колонки распространяется вниз на всю высоту веб-страницы?

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

Вертикальное растягивание.

Одной из не совсем удобных особенностей CSS является тот факт, что элементы вытягиваются вертикально лишь на величину, необходимую и достаточную для размещения их контента. То есть если в элементе <div> содержится изображение высотой 200 пикселей, то этот див вытянется вниз лишь на полагающиеся 200px.

Таким образом, использование <div> элементов и дальнейшее их CSS форматирование с целью создания колоночного шаблона сайта приводит к возникновению занимательной дилеммы. Одна из колонок может быть длиннее другой (см. изображение 1). Дело в том, что трудно создать макет сайта, предусматривающий две одинаковые по высоте колонки, каждая из которых имеет собственное цветное фоновое наполнение по причине того, что их реальная высота зависит от объема, содержащегося в них контента.

Изображение.

Изображение 1.

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

В чем хитрость?

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

Изображение

Изображение 2.

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

CSS

Далее необходимо применить следующее простейшее CSS правило к элементу <body>:

background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;

По сути, все что мы сделали, это придали серый оттенок фону всей веб-страницы и размножили его в вертикальном направлении (repeat-y). Следующий фрагмент 50% 0 отвечает за позиционирование фонового изображения. А в нашем конкретном случае это значит, что точка в 50% ширины изображения совпадает с точкой 50% ширины элемента (<body>), то есть размещает изображение по центру страницы, а 0 говорит о том, что верхняя грань изображения прилегает к верхней грани страницы.

Позиционирование колонок.

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

Изображение.

Изображение 3.

Необходимо иметь в виду, что если для обеих колонок вашим дизайном предусмотрены такие компоненты как граница, отступы и поля, то в этом случае нужно учитывать не совсем удачную интерпретацию блочной модели в IE для Windows и для обхода связанных с этим проблем рекомендуется использовать такие методы как Box Model Hack или Mid Pass Filter.

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

Способы использования созданного таким образом шаблона.

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

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

Итоги.

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

(Выражаю благодарность Джеффри Зельдману за помощь в усовершенствовании данной статьи.)

* Примечание переводчика.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *