TML, CSS, СКРИПТЫ: практика создании сайтов

Представление страницы, правила оформления которой описаны в листинге 4.14

( Примечание ^

Не удержусь от того, чтобы не бросить очередной камень в огород Microsoft.

Флагманский браузер Internet Explorer в значительной мере ограничивает наши

возможности по использованию не только фиксированного, но и просто

абсолютного позиционирования.

Нет, само по себе абсолютное позиционирование в IE работает верно. Вот

только выделение текста мышью ведет себя довольно странно. Пытаемся

выделить единственное слово в тексте — а при этом выделяется чуть ли не весь

текст блока и еще какие-то куски соседних областей…

Так происходит не со всеми абсолютно позиционированными блоками —

закономерность, порождающую эту досадную ошибку, мне установить пока не

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

основной схемы верстки шаблонов страниц неизбежно приведет к такому

эффекту.

Глава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 201

Обтекаемые элементы

Помимо перечисленных выше, весьма часто при верстке шаблонов страниц

используется еще один алгоритм управления взаимным размещением

блочных элементов.

Зародившись давным-давно еще в HTML (в виде атрибута align тега ,

позволявшего размещать графические изображения так, чтобы

расположенный рядом текст «обтекал» их), эта схема была доведена до совершенства

bCSS.

Режим обтекания регулируется двумя простыми CSS-свойствами: float и

clear. Первое из названных свойств, предполагая значения left и right,

определяет, с какой стороны будет располагаться обтекаемый элемент по

отношению к обтекающим — слева или справа соответственно. Ключевое слово

попе (значение по умолчанию) отменяет действие свойства float.

Свойство clear, в свою очередь, запрещает расположение обтекаемых блоков

с той или иной стороны от данного элемента. Оно, помимо закономерных

значений left и right, может принимать значение both (в этом случае

обтекаемые элементы запрещены с обеих сторон от данного элемента). Значение

по умолчанию — попе — напротив, разрешает размещение обтекаемых

блоков с любой стороны.

Рассмотрим использование свойств float и clear на классическом примере

с участием графического изображения.

|ШиЬтинг#4^^^ €’Л: ;¦;’.]

^> «http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd,,>

style=»width: 15брх; height: 114px; border: solid lpx #ccc;

margin: Opx 20px 20px Opx; float: left» />Текст этого абзаца

обтекает изображение.р>

Текст этого абзаца тоже будет обтекать картинку.р>

202 Часть II. Применение веб-технологий стороны клиента для создания сайтов

A этот абзац уже не обтекает рисунок.р>

Ну a 3TOT — и подавно.р>

Внешний вид страницы, описанной в листинге 4.15, приведен на рис. 4.18.

«7″>»,;v

¦ЩРШШШШШШрЫ *№ФШ&ш

Ораеяа ‘

‘мжд^ашма;

^Ф *i

i i i! ГГ| ill ifi i ¦ 1.1 i ¦ ¦ ¦ ¦ ¦ i i-lTii iiiih ГГ i fi ii JTi-ii ¦ iViii i iTil i Mill rri i fi-i i-rriiTi il-i ni| _ jni.mi

L3 file:///Z:/examples/04/15/index.html *JK® П*р«йти [Gl

^^^м^^^^т^^й^^^мш^ , _. t

Текст этого абзаца обтекает изображение.

Текст этого абзаца тоже будет обтекать картинку.

А этот абзац уже не обтекает рисунок.

Ну а этот — и подавно.

Рис. 4.18. Отображение страницы, содержащей обтекаемые элементы

Чуть позже мы познакомимся с идеологией обтекаемых блочных элементов и

на более сложных примерах, чем этот.

Практический пример — веб-страница

с горизонтально ориентированным

блоком навигации

Сверстать на основе блочной модели CSS2 шаблон страницы, не

предполагающий изобилия сложной и точно позиционированной декоративной

графики, очень просто, особенно если речь идет о горизонтально ориентированном

навигационном блоке.

В этом случае вполне можно обойтись простейшей, статической схемой

позиционирования элементов, даже не прибегая к использованию свойства

position.

Глава 4. Использование блочной модели Св82для верстки сложных веб-страниц 203

Более того, нет никакой необходимости задействовать и такие свойства, как

width и height — как мы уже говорили, ширина блочного элемента по

умолчанию определяется шириной содержимого родительского элемента, а

высота — объемом контента.

При этом получится замечательная «резиновая» страница, не порождающая

совершенно никаких проблем, связанных с капризами различных браузеров.

Словом, не верстка, а одно удовольствие.

Предлагаю ознакомиться с наипростейшим примером веб-страницы,

состоящей из трех функциональных областей: «шапки», горизонтального блока

навигации и области основного содержания.