Поля и границы в трёхколоночном макете

⇐ ПредыдущаяСтр 3 из 3

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

div { /* padding влияет на ширину */

width: 200px;

padding: 10px; }

div { /* padding не влияет на ширину */

position: absolute;

left: 20px; right: 20px;

padding: 10px; }

div { /* padding влияет на ширину */

float: left;

width: 50%;

padding: 10px; }

div { /* padding не влияет на ширину */

margin-right: 50%;

padding: 10px; }

В тех колонках, где padding или border требуется, но их добавление приведёт к «ломке» макета, можно воспользоваться вложенным слоем и установить необходимые свойства для него.

< div style=" width: 200px" >

< div style=" padding: 10px; border: 1px solid #000" >

Колонка

< /div>

В этом примере ширина слоя заданная как 200 пикселов меняться не будет, но поля и рамка будут добавлены.

Если используются слои, то колонки должны иметь высоту, которая определяется их содержимым; колонки одинаковой высоты строятся с помощью таблицы. Исключением может служить применение свойства height, которое устанавливает высоту слоёв.

Понятно, что объём текста в колонках может различаться, поэтому высоту через height обычно указывают с запасом. Ещё можно добавить свойство overflow со значением auto. Если текст превысит заданную высоту, появится полоса прокрутки.

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

Принцип использования фонового изображения для колонок основан на том, что мы видим повторяющуюся по вертикали картинку, сверху которой располагается текст и другие элементы. Поскольку нам надо сделать эффект колонок, фон добавляется не к колонкам по отдельности, а для их родителя. Здесь имеет значение, какой это фон, что он собой представляет и каковы его размеры. Предположим, что у нас двухколоночный фиксированный макет шириной 980 пикселов, левая колонка занимает ширину 200 пикселов. Создаём изображение размером 980х60 пикселов. Ширина соответствует ширине макета, а высоты обычно берётся 20–30 пикселов.

Многие разработчики делают рисунок высотой 1–2 пиксела, полагая, что объём файла будет минимальным, и загрузка произойдёт быстрее. Однако всё обстоит наоборот. Компьютер тратит в несколько раз больше времени для отображения одной страницы с узким фоном, что особенно заметно при прокрутке окна браузера. Так что при использовании фонового рисунка делайте изображение высотой не менее 20–30 пикселов — так отображение его на странице будет происходить быстрее.

Слишком скучно делать колонки однотонными, раз мы имеем дело с изображениями, поэтому добавим какие-нибудь ограничители по бокам колонок (рис. 6.10). Здесь самое главное, чтобы рисунок повторялся без стыков по вертикали.

Рис. 6.10. Фоновый рисунок

Результат данного примера показан на рис. 6.11. Хорошо заметно, что колонки имеют одинаковую высоту.

Рис. 6.11. Колонки одинаковой высоты, созданные фоновой картинкой

При использовании в рисунке каких-либо декоративных элементов, следует позаботиться, чтобы текст от них был отодвинут через padding и не «налипал».

Для трёх и более колонок в фиксированном макете процесс подготовки изображения сходный, а вот для резинового макета есть ряд особенностей из-за того, что ширина макета может лежать в широком диапазоне. Тогда фоновую картинку необходимо сделать заведомо широкой, например, 2000 пикселов. Фон не влияет на ширину веб-страницы и если не помещается в отведённые ему размеры, то обрезается. Этим качеством и воспользуемся. В качестве примера рассмотрим резиновый макет с фиксированной правой колонкой шириной 300 пикселов. Для него сделаем изображение шириной 2000х30 пикселов с тёмно-красным прямоугольником справа (рис. 6.12).

Рис. 6.12. Фон для резинового макета

Фиксированная колонка располагается справа, поэтому фон также надо установить в правый верхний угол, указав 100% 0 для свойства background (пример 6.12).

Пример 6.12. Фон для резинового макета—11.html

< html>

< head>

< meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" />

< title> Двухколоночный резиновый макет< /title>

< style type=" text/css" >

.layout {

background: url(images/bg-liquid.png) repeat-y 100% 0;

/* Фоновый рисунок */

overflow: hidden; /* Отменяем обтекание */ }

.sidebar { width: 280px; float: right; padding: 10px; color: #fff; }

.content { margin-right: 300px; padding: 10px; }

< /style>

< /head>

< body>

< div class=" layout" >

< div class=" sidebar" > Колонка 2< /div>

< div class=" content" > Колонка 1< /div>

< /div>

< /body>

< /html>

Напоследок перечислим плюсы и минусы использования фона в качестве искусственных колонок.

Плюсы

1. Метод простой и не требует изменения существующего кода.

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

Минусы

1. Наилучшие результаты получаются, когда одна из колонок или все имеют фиксированные размеры. Для макета, где ширина колонок резиновая, фон корректно добавить не получится.

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

3. Файл с фоновой картинкой может иметь большой объём и долго загружаться. Отметим, что для простого изображения, вроде приведённого на рис.6.12, это не так, при размерах 2000х30 пикселов файл занимает всего 275 байт.

При имитации колонок одинаковой высоты с помощью фоновой картинки она добавляется через свойство background к родительскому элементу колонок (слой layer). Похожим образом работает и цвет фона. Его достаточно установить для слоя layer, а самой высокой колонке задать свой собственный цвет. В примере 6.13 приведён трёхколоночный макет, в котором цвет фона боковых колонок устанавливается через слой layer, а центральной колонки через слой col2.

Пример 6.13. Использования фонового цвета для колонок

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN"

" http: //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

< html xmlns=" http: //www.w3.org/1999/xhtml" >

< head>

< meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" />

< title> Трёхколоночный резиновый макет< /title>

< style type=" text/css" >

.layout {

background: #b2d235; /* Цвет фона крайних колонок */

overflow: hidden; /* Отменяем обтекание */

}

.layout div{ float: left; }

.col1 { width: 40%; }

.col2 { background: #ffc60b; /* Цвет фона средней колонки */

width: 20%; height: 200px; }

.col3 { width: 40%; }

< /style>

< /head>

< body>

< div class=" layout" >

< div class=" col1" > Колонка 1< /div>

< div class=" col2" > Колонка 2< /div>

< div class=" col3" > Колонка 3< /div>

< /div>

< /body>

< /html>

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

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

Для «раскрашивания» колонок применяется всего два цвета, так что нельзя задать трём и более колонкам разный цвет и чтобы они при этом имели одинаковую высоту.

Достоинства у метода тоже имеются, но их можно выразить всего парой слов: это простота и изящность решения. Поэтому этот метод можно довольно часто встретить в вёрстке, в частности, он применяется на сайте W3C.

⇐ Предыдущая 1 23