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

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

Инструкции

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

Метод очистки

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

Вставка логотипа

В этом макете установлен заполнитель рисунка — в .header, где, скорее всего, будет размещен логотип. Рекомендуется удалить заполнитель и заменить его своим логотипом со ссылкой.

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

Чтобы удалить встроенные стили, убедитесь, что для панели "Стили CSS" установлено значение "Текущий". Выберите изображение и в области "Свойства" на панели "Стили CSS" щелкните правой кнопкой мыши и удалите свойства экрана и фона. (Также всегда можно перейти прямо в код и удалить встроенные стили из изображения или заполнителя в коде.)

Условные комментарии в 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 должен содержать больше информации, можно поместить в нем границу, чтобы отделить его от столбца.