ZODIOS.net

Метод фальш-колонки

09.4.2008  –  Рубрика: HTML&CSS

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

Как же быть когда нам нужно отверстать колоночный макет в блочной моделе. Это выполняется с использованием метода «фальш колонки». Этот метод основывается на том, что родительскому элементу, который содержит в себе все колонки, присваивается фон в виде горизонтальной картинки нужной ширины и высотой в один пиксель, в котором по краях находится необходимые цвета. Таким образом ,этот фон создает иллюзию колонок. При увеличении одной колонки она растягивает весь родительский элемент и создается иллюзия, что вторая колонка пропорционально увеличивается. Вот пример этого метода ФАЛЬШ КОЛОНКА 1. Сами блоки с текстом взяты в красную рамку, чтоб можно было увидеть суть метода.

Но если у нас резиновый двух колоночный макет нужно поступить таким же образом, но немного модифицировав его. Теперь нам нужно две картинки фона, каждая шириной в ширину колонки, или одна, если колонки одинаковой ширины. Теперь все наше содержимое берется в два оберточных блока в одном указан фоном рисунок шириной равной ширине первой колонки, который буте повторятся только по вертикали и только слева, а во второй другой фон, который повторяется только по вертикали и только справа. Вот пример второй фальш колонки ФАЛЬШ КОЛОНКА 2.

Tags: CSS, HTML