Вышеуказанные ссылки демонстрируют базовую структуру навигации с использованием неупорядоченного списка, стилизованного при помощи 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 вне первого без каких-либо нежелательных эффектов. Возможно, проще всего будет начать с макета, содержащего верхние и нижние колонтитулы, и удалить верхний колонтитул, чтобы использовать методы очистки для этого типа макетов.

Фоны

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