Вышеуказанные ссылки демонстрируют базовую структуру навигации с использованием неупорядоченного списка, стилизованного при помощи CSS. Взяв ее за отправную точку и изменяя свойства, можно создать свой неповторимый дизайн. Если нужны выпадающие меню, их можно создать при помощи a Spry menu — мини-приложения menu из Adobe Exchange или ряда других инструментов javascript или CSS.

Если нужна навигация вдоль верха, просто перенесите ul.nav в верх страницы и заново создайте стиль.

Инструкции

Помните, что в CSS этих макетов много комментариев. Если большинство операций выполняется в представлении Дизайн то имеет смысл посмотреть на код. Там есть советы по использованию CSS при работе с плавающими макетами. Перед запуском сайта комментарии можно удалить. Чтобы узнать больше о техниках используемых в этих макетах CSS прочтите следующую статью в Центре разработки Adobe: http://www.adobe.com/go/adc_css_layouts.

Очистка

Поскольку все столбцы обтекаемые, в этом макете используется overflow:hidden в .container. Такая техника очистки заставляет .container видеть места окончания столбцов, чтобы показать все границы или фоновые цвета, помещенные в .container. При наличии крупного элемента, выдающегося за пределы .container, он будет выглядеть обрезанным. Вы также не сможете использовать отрицательные поля или абсолютное позиционирование с отрицательными значениями, чтобы извлекать элементы вне .container, или они также не будут отображаться вне .container.

Если эти свойства нужны в работе, то потребуется другой метод очистки. Надежнее всего будет добавить <br class="clearfloat" /> or <div class="clearfloat"></div> после последнего обтекаемого столбца (но до закрытия .container). Эффект очистки будет аналогичным.

Нижний колонтитул

Добавление нижнего колонтитула после столбцов, но все равно внутри .container приведет к ошибке этого метода очистки overflow:hidden. Можно поместить .footer во второй .container вне первого без каких-либо нежелательных эффектов. Возможно, проще всего будет начать с макета, содержащего верхние и нижние колонтитулы, и удалить верхний колонтитул, чтобы использовать методы очистки для этого типа макетов.

Условные комментарии в Internet Explorer

Эти плавающие макеты содержат условный комментарий Internet Explorer (IECC), позволяющий решить две проблемы.

  1. Браузеры по-разному округляют размеры DIV в макетах на процентной основе. Когда нужно отобразить такую величину, как 144,5 пиксела или 564,5 пиксела, браузер должен округлить ее до ближайшего целого значения. Браузеры Safari и Opera округляют вниз, Internet Explorer — вверх, а Firefox — один столбец вверх и один вниз, полностью заполняя контейнер. Проблема округления может привести к несогласованности в некоторых макетах. В IECC есть отрицательное поле в 1 пиксел для исправления IE. Его можно перенести к любому столбцу (слева или справа) так, как это нужно для макета.
  2. Свойство масштабирования добавлено к привязке в списке навигации, поскольку в некоторых случаях в IE6 и IE7 отображается лишнее пустое место. Благодаря масштабированию IE получает свойство hasLayout для исправления этой проблемы.

Фоны

По своей сути фоновый цвет отображается в любом DIV только по длине содержимого. Это значит, что если фоновый цвет или граница используется для создания образа бокового столбца, то они распространяются не до нижнего колонтитула, а только до того места, где кончается содержимое. Если DIV .content должен содержать больше информации, можно поместить в нем границу, чтобы отделить его от столбца.