Перемещение основных средств навигации во второй столбец, сохраняя при этом порядок исходного кода

Когда в компоновку будет добавлен второй столбец, то, вероятно, будет казаться естественным поместить основные средства навигации вверху этого столбца … но как сделать это, когда средства навигации остаются в другой части структуры шаблона?

Ответ на этот вопрос лежит в позиционировании:

1. Если для #header задано overflow: hidden; сделайте #nav прямым наследником #main. Почти во всех случаях будет возможно сделать это не искажая желательный порядок исходного кода.

2. Присвоить position: relative; непосредственному предку #nav, и position: absolute; самому #nav.

3. Так как абсолютная позиция #nav помещает его по умолчанию в верхнем левом углу его предка, задайте значения left и top для #nav требуемым по обстоятельствам образом.

4. Задайте значение margin-top или padding-top для #sidebar (что больше подходит), чтобы отразить ожидаемую высоту #nav. В тех случаях, где высота #nav изменяется от страницы к странице или от раздела к разделу, потребуется написать несколько правил, возможно с несколькими селекторами в каждом — поэтому написанный выше совет присваивать зависимый от области контента ссылочный id (и возможно также class ) элементу body каждого документа на сайте.

Реализация компоновки с тремя столбцами

Рис. 38.4.  Элементы компоновки с тремя столбцами; обратите внимание на два новых контейнерных элемента и другое задание id

Основными отличиями разметки, связанные с добавлением третьего столбца, являются:

• Контейнер охватывает два смежных столбца, обычно первый и второй; и

• Третий столбец помещается в свой собственный контейнер.

Когда разметка будет сделана, получение желательной компоновки является вопросом правильного упорядочивания значений float. Не забывайте, что неплавающие контейнеры требуют настройки полей для правильного выравнивания.

Отметим, что, принимая во внимание рисунок 38.4, элементам сдвоенного столбца и третьего контейнера лучше присвоить id, которые предлагают некоторый ключ контекста, а не базовые id, предлагаемые в самой диаграмме.

Значения float четырех контейнерных элементов трехстолбцовой компоновки согласно порядку появления слева направо
Желательное представление	Контент контейнера	Контейнер	Первый	Второй	Третий
2–1–3	1+2	left	right	none	none
2–3–1	2+3	left	none	left	none
3–1–2	1+2	right	left	none	none
3–2–1	1+2	right	left	none	none
1–2–3	1+2	left	left	none	none
1–3–2	2+3	right	none	right	none

Самая большая трудность дизайна с тремя столбцами, и ее простое решение

Наиболее гибкая трехстолбцовая компоновка вводит контейнерный элемент, который семантически не имеет смысла; альтернатива состоит в реализации соглашений о длине контента или порядка исходного кода, которые будут создавать обременительную нагрузку, накладываемую либо на службу поддержки (в случае требований длины контента), или на посетителей (в случае ограничений на порядок исходного кода).

Введение этого "лишенного смысла" контейнера также может создавать проблемы, когда придет время перепроектирования сайта. Рассмотрим следующий сценарий:

При начальном проектировании сайта его столбцы размещаются в порядке представления 2-3-1, но затем перепроектируется со столбцами в более традиционном порядке 2-1-3. Элемент двух-столбцового контейнера необходимо будет переместить, чтобы он охватывал контейнеры различных столбцов. Что затем?

В таком случае результат получить легко; если сайт является действительно управляемым шаблоном, то нужно (возможно) изменить несколько файлов. Если - с другой стороны - все документы на сайте используют просто одну и ту же инфраструктуру разметки, то нужно использовать метод поиска и замены. Однако это будет сделать несложно.

Общая организация разметки контейнеров будет иметь одну из двух следующих форм:

• <div id="#container"><div id="primary">…</div><div id="secondary">…</div></div><div id="tertiary">…</div>

• <div id="primary">…</div><div id="#container"><div id="secondary">…</div><div id="tertiary">…</div></div>

В двух этих примерах фрагменты относящиеся к поиску и замене были выделены жирным шрифтом. Так как эти id будут уникальными в документе, и так как размещение двойных закрывающих тегов может быть предсказуемо (рядом с третьим закрывающим тегом или с #tertiary ), то запись операции поиска и замены для их изменения является относительно легкой проблемой.