WEBMASCON - журнал для веб-мастеров обновление: 2007.09.07

Позиционирование: всему свое место

автор: 2003 Михаил Дубаков Глава 9 из книги 'Создание веб-сайтов: искусство верстки'
перевод: n|a

Часть 1. Позиционирование с помощью таблиц.
Часть 2. Позиционирование с помощью CSS.
Часть 3. Плавающая модель.

Обтекаемость плавающей модели

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

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

Для объявления блока плавающим имеется свойство float, которое может принимать значения left и right. Как вы догадываетесь, значения определяют сторону, к которой блоки будут прилипать. Сразу небольшой пример для наглядности. Создадим три блока с толстой рамкой, которые образуют колонки на основе плавающей модели:

DIV {border: 3px solid #DDD; margin: 3px} #menu {width: 20%; float: left} #main {width: 40%; float: left} #news {width: 25%; float: left} . . . <div id="menu">меню</div> <div id="main">текст</div> <div id="news">новости</div>

А в браузере три блока будут выглядеть так, как показано на рис. 9.9

Три колонки, созданные на основе плавающей модели

Рис. 9.9 Три блока плавающей модели

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

left: блок перемещается ниже всех плавающих блоков с объявлением float: left
right: блок перемещается ниже всех плавающих блоков с объявлением float: right
both: блок перемещается ниже всех плавающих блоков

Давайте дополним наш пример таким блоком.

#copy {width: 90%; clear: left} . . . <div id="menu">меню</div> <div id="main">текст<br><br><br></div> <div id="news">новости</div> <div id="copy">копирайт</div>

В блок main я вставил несколько переводов строк, чтобы увеличить его высоту. Для теста так можно делать. В результате блок copy будет расположен ниже всех остальных блоков, как показано на рис. 9.10

Рис. 9.10 Свойство clear позволяет позиционировать блок copy после всех плавающих блоков

При создании плавающих блоков есть только одно важное правило:

ПРАВИЛО: Для плавающих блоков надо всегда задавать ширину, потому что в противном случае блок будет растягиваться, чтобы вместить в себя все содержимое.

Раз уж плавающая модель оказалась простой понятной, давайте попробуем применить ее к нашему многострадальному примеру. Как и раньше, будем пользоваться правильной блоковой моделью, то есть код адаптирован для браузеров Mozilla и Opera. Позже я покажу, как внести в код кросс-браузерность. За основу будем брать код, который был написан при попытке сверстать макет на основе абсолютного позиционирования.

Как обычно, начнем с шапки. Сам HTML-код совершенно не изменится: все те же блоки с логотипом и т.п. Но зато поменяется CSS-код. Для двух верхних блоков он станет вот таким:

#top-left { width: 487px; background: url(i/bd.gif) repeat-x 0px 49px; padding-left: 30px; float: left} #top-right { width: 233px; padding-top: 49px; float: left}

В блоке top-left появилось только одно объявление, которое делает блок плавающим, и исчезло объявление высоты блока. Оказывается, что высота блока в данном случае ни на что не влияет. В блоке top-right я убрал все свойства абсолютного позиционирования и тоже включил для блока плавающую модель. Но раньше мы задавали смещение от верхнего края, а у плавающей модели такого свойства нет. Значит смещение надо реализовать другим способом. Обычно смещение можно сделать с помощью отступа, в данном случае верхнего padding-top.

После таких изменений два верхних блока будут в браузере выглядеть совершенно так же, как при абсолютном позиционировании, то есть правильно. Далее между верхними блоками и центральными блоками имеется пространство. Для того, чтобы быть уверенным в том, что центральные блоки начнутся после верхних блоков, не помешает создать блок со свойством clear. Заодно он будет отбивать блоки:

.space {clear: left; height: 20px}

В HTML-коде блок с классом space будет находится между верхними и центральными блоками:

. . . <div id="top-right"> <div class="rectangle"></div> <img src="i/news.gif" width="59" height="9" border="0" alt=""> </div> <div class="space"></div> <div id="main-left"> . . .

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

#main-left { width: 125px; float: left} #main { width: 364px; padding: 0px 14px; float: left} #main-right { font: 10px Verdana; width: 233px; float: left}

Свойства абсолютного позиционирования заменены на свойства плавающей модели. Кроме того, опять возникает необходимость сделать отступы между центральным блоком и двумя крайними. Проще всего задать левый и правый отступы только для центрального блока, что и сделано объявлением padding: 0px 14px.

Как видите, в целом можно заметить, что CSS-код для плавающей модели компактнее, чем для абсолютного позиционирования.

Сейчас как раз настал момент, когда можно отлично заметить, для чего необходимо свойство clear. Давайте не будем вставлять блок с таким свойством между центральными блоками и нижним блоком. Блок bottom-left сделаем плавающим:

#bottom-left {width: 233px; float: left}

В итоге картина в браузере получится такая, как показано на рис. 9.11

Рис. 9.11 Позиционирование блока bottom-right

Блок bottom-left позиционируется совершенно правильно. Он смещается максимально вверх и прилипает к другому плавающему блоку main. Так и должен себя вести любой приличный плавающий блок. Но нам такого не надо, нам надо расположить нижний блок под всеми остальными. Поэтому в HTML-коде после всех центральных блоков мы вставляем блок с классом space.

Осталось только сделать блок с копирайтом:

#bottom-right { background: url(i/bd.gif) repeat-x; font: 10px Verdana; width: 237px; padding-left: 280px; float: left}

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

Давайте, правда, шампанским немного повременим, потому что впереди у нас адаптация кода для браузера Internet Explorer. Нам надо исправлять блоковую модель, а точнее, задавать для данного браузера другие значения свойств width там, где используются отступы. Таких блоков у нас всего три: top-left, main и bottom-right. Еще раз сформулирую задачу: для браузера Internet Explorer необходимо установить ширину с учетом отступов, а для всех остальных браузеров оставить текущие значения ширины. То есть нам пригодится решение, которое позволяет разделить код для двух таких типов браузеров. Решение, к счастью, есть. Если заключить значение свойства в кавычки, то его не будут воспринимать браузеры Mozilla и Opera. Например, если мы напишем:

A {border: "1px solid #000"}

То рамки вокруг ссылок сделает только браузер Internet Explorer. В нашем случае нечто подобное надо сотворить с шириной. Давайте подумаем. Начнем думать на примере блока main:

#main { width: 364px; padding: 0px 14px; float: left}

Сначала посчитаем, какую ширину надо задать для браузера Internet Explorer. Раз ширина содержания 364 пикселя, а ширина отступов (левого и правого) 28 пикселей, то ширина должны быть 264+28=392 пикселя. Отлично, делаем следующее. Для браузера Mozilla оставляем первым текущее объявление ширины. А сразу вслед за ним вставляем объявление ширины для браузера Internet Explorer, но заключенное в кавычки!

#main { width: 364px; width: "392px"; padding: 0px 14px; float: left}

В итоге получается, что браузер Mozilla прочитает первое значение, но проигнорирует второе. А браузер Internet Explorer прочитает и первое, и второе значения, но значение, указанное в коде позже, переписывает первое значение! Вот таким простым, с одной стороны, но весьма элегантным способом решается проблема блоковой модели. Конечно, способов множество, но это наиболее эффективный. Совершенно аналогичным образом добавляем объявления для остальных двух блоков:

#top-left { background: url(i/bd.gif) repeat-x 0px 49px; width: 487px; width: "517px"; padding-left: 30px; float: left} #bottom-right { background: url(i/bd.gif) repeat-x; font: 10px Verdana; width: 237px; width: "517px"; padding-left: 280px; float: left}

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

Раз уж у нас получилось сверстать макет на основе плавающей модели, имеет смысл заняться аналитикой и статистикой.

Таблица 9.1 Сравнение веса документа, сверстанного разными способами

	Табличная верстка	Плавающая модель
Объем HTML-кода, байт	2314	1618
Объем CSS-кода, байт	-	707
Количество картинок	13	7
Вес картинок, байт	5151	4864
Общий вес документа, байт	7465	7188

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

За счет чего же плавающая модель выигрывает по сравнению с табличной версткой? Самое главное преимущество – уменьшение сложности и повышение логичности. Значительно сократилось использование картинок и очень сильно упростился чистый HTML-код. Да, добавились стили, которые сами по себе не являются простыми, но произошло качественное разделение структуры и представления документа. Теперь HTML-код описывает структуру, а CSS-код – представление. Сразу скажу, что разделение не стопроцентное, но очень даже значительное.

Резюме

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

Таблица 9.2 Сравнение способов верстки

	Табличная верстка	Абсолютное позиционирование	Плавающая модель
маленький вес документа	8	9	10
ограничения	9 Практически нет	3 Невозможно реализовать нижний блок с копирайтом	7 Невозможно реализовать дизайн с верхним и нижним блоками, если есть вертикальный фон, проходящий через центральную часть.
простота документа	8	9	10
логичность документа	5	8	9
простота реализации	9	7	8
надежность	10	8	7
поддержка браузерами	10	8	8
Итог	59	52	59

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

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

Кроме того, мы пока еще не рассмотрели достаточно любопытный вопрос, касательно объема применения каскадных таблиц стилей. Действительно, не лучше ли ограничиться просто цветами, фоном и шрифтом? Или нет? Ответ на вопрос будет можно найти в главе 10 книги "Создание веб-сайтов: искусство верстки", которая появится в продаже в начале 2004 года.