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

элементы menucarrier и textcarrier,

позиционируются при помощи свойства float. Блок menucarrier прижат к левому краю

страницы и обтекается элементом textcarrier справа, а последний прижат к

правому краю страницы и, в свою очередь, обтекается элементом menucarrier

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

«водораздел».

Размещенный ниже блок «подвала» с идентификатором footer использует

свойство clear с тем, чтобы запретить обтекаемые элементы с обеих сторон

от себя. Таким образом, он будет расположен ниже любого из блоков

menucarrier и textcarrier вне зависимости от того, какой из них имеет

большую высоту.

Для блока menucarrier при ПОМОЩИ свойства margin-bottom установлен

НИЖНИЙ вертикальный отступ, равный 20 пикселам. Таким образом, «подвал» в

любом случае будет располагаться не ближе величины этого отступа от

нижней рамки навигационного блока. Такое же минимальное расстояние —

20 пикселов — отделяет «подвал» от содержимого области основного текста

(за счет соответствующего значения свойства padding, указанного для блока

textcarrier).

«Подвал» позиционируется в соответствии с простейшей схемой static,

принятой по умолчанию. Пришлось, однако, дополнительно определить внутри

этого элемента абзац, а ширину самого контейнера установить равной

100% ширины окна браузера, поскольку в отсутствии данных мер в Internet

Explorer вылезают «глюки» неведомой природы — верхнее поле начинает

«гулять» и порой «заезжать» на территорию, занятую блоками навигации и

основного текста…

В целях преодоления особенностей того же IE пришлось еще определить

правило #textcarrier {clear: right}, которое предписывает запретить

размещение обтекаемых блоков справа от области основного текста (а их там и

так нет). Иначе при недостаточной ширине окна элемент textcarrier «съедет»

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

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

особенностям нрава браузера Internet Explorer.

Плавно переходим ко второму примеру. Зачастую необходимость в «истинно

резиновой» верстке отсутствует — порой требуется, чтобы растягиваться или

сужаться в зависимости от ширины окна «умела» только область основного

текста, тогда как навигационное меню обладало бы фиксированной шириной

в пикселах.

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

Правильный cai4T

Рис. 4.23 демонстрирует, как будет вести себя страница, описанная в

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

«Spffig

©

«3 ФА**** fft

#> займам»* ^W^MHwifew

Правильный сайт

Здесь

Организация пространства страницы

:;j&ft: ^а^а :::^ф;’»,Ш^

|#.й*йв^ start** -|^i^’H^*t

Правильный сайт

,аЛ12?*|Ьтся качеством исполнения фундамента —

^ О ы приняли за аксиому тот факт, что все

ZZZ^i^* еэентационных проектов) в значительной

|ее всего выражена в составе и взаимном

_.