Много-столбцовая компоновка

Предупреждение: этот пример несколько сложнее. Если вы новичок в мире CCS, то он может даже показаться пугающим, но мы рассмотрим его постепенно, не торопясь, разбирая по ходу совершаемые действия. Если вы еще не прочитали статью 35 о плавающих элементах и очистке, то сейчас самое подходящее время это сделать.Существует тип компоновки, который очень распространен на Web-сайтах. Он состоит из верхнего колонтитула страницы, содержащего часто титульную графику, под которым располагаются бок о бок два или больше "столбцов". Ниже всего этого часто находится по всей ширине нижний колонтитул, возможно с заявлением об авторских правах или контактной информацией. рис. 36.7 показывает пример такой компоновки.

Рис. 36.7. Типичная многостолбцовая компоновка, со столбцами расположенными между верхним и нижним колонтитулами

Такой тип компоновки создавался раньше с помощью таблиц компоновки (в 1990 гг.). Это является злоупотреблением разметкой HTML для презентационных целей, что не рекомендуется, именно поэтому мы не изучаем такие методы в данном курсе. CSS предлагает способы достижения таких же результатов с помощью свойства display: table-cell и аналогичных средств, но основной недостаток такого решения состоит в том, что оно в настоящее время не поддерживается ни одной версией Internet Explorer, поэтому мы не будем рассматривать его также. Остаются только две возможности: плавающие элементы или абсолютное позиционирование. Оба метода имеют свои достоинства и недостатки, но если вы хотите иметь нижний колонтитул по всей ширине, и не знаете заранее, какой столбец будет самым длинным, то для обеспечения целостности дизайна потребуются плавающие элементы.Проблема с плавающими элементами состоит в том, что они смещаются влево или вправо только до тех пор, пока не коснутся края блока предка, или другого плавающего элемента. Это означает, что плавающие столбцы должны появиться в разметке в правильном порядке. Но иногда желательно иметь порядок представления, отличающийся от исходного порядка. Вы можете захотеть, например, поместить контент до навигации, чтобы улучшить юзабилити для клавиатурной навигации, или для улучшения оптимизации для поисковой системы. Этого можно добиться, даже с помощью плавающих элементов, с помощью некоторого благоразумного использования отрицательных полей и относительного позиционирования - давайте посмотрим, как это можно сделать. Начнем со скелета, или каркаса, документа HTML.

1. Скопируйте приведенный ниже код в текстовый редактор и сохраните файл как layout.html.

2. Затем создайте зачаточную таблицу стилей. Скопируйте приведенный ниже код в текстовый редактор и сохраните файл как layout.css.

3. Сохраните оба файла и загрузите страницу в браузер. Пять разделов появятся в определенном порядке сверху вниз.Предположим, что отдел разработки определил, что навигация должна быть слева, а боковая панель справа, а столбец основного контента посредине. Верхний и нижний колонтитулы должны распространяться на всю ширину страницы, и мы не знаем, какой из трех столбцов между ними будет самым длинным. Порядок исходного кода определяют эксперты по доступности и юзабилити и не обсуждается. Как можно объединить все эти требования в рабочую компоновку?Мы собираемся добавить в разметку дополнительный элемент, чтобы это работало. Это неизбежно, но один дополнительный элемент вы должны пережить. Требуется элемент, который создает оболочку вокруг трех "столбцов".

4. Добавьте две выделенные ниже строки в документ HTML:

Дизайнеры (которые, к счастью, понимают доступность и независимость устройств) определили, что навигация должна иметь в ширину 12em, а боковая панель должна быть шириной 14em. Столбец основного контента должен иметь переменную ширину, так чтобы компоновка адаптировалась к различным размерам окон, так как компоновки с фиксированной шириной не слишком удобны для пользователей. Чтобы строки текста не были слишком длинными, мешая удобочитаемости, необходимо ограничить компоновку максимальной шириной. Чтобы избежать перекрытия в крайне узких окнах необходимо также ограничить компоновку минимальной шириной. В этих рамках компоновка должна быть центрирована по горизонтали в окне браузера.

5. Присваиваем значение ширины для навигации и боковой панели, и задаем ограничения по ширине, и общее центрирование, добавляя следующие правила внизу файла CSS:

6. Сохраните эти файлы и перезагрузите - вы должны увидеть, что элементы желтой боковой панели и серой навигации имеют требуемую ширину. Если окно браузера достаточно широкое, вы увидите также, что вся страница ограничена по ширине и центрирована по горизонтали.

7. Попробуйте изменить размер окна и посмотрите, как изменится компоновка.

Примечание: При использовании Microsoft Internet Explorer версии 6 или более старой, вы не увидите результатов каких-либо ограничений по ширине. Это связано с тем, что эти версии IE не поддерживают минимальную и максимальную ширину (или высоту). Мы рассмотрим способ обойти это ограничение в конце примера. Фактически, вы получите странные результаты с этим примером, даже в IE7, так как Internet Explorer имеет много странных ошибок воспроизведения. Мы сосредоточимся на соответствующем стандарту способе реализации этого примера, и вернемся к средствам обхода в конце.

Если внимательно посмотреть на код, то можно увидеть, что ширина задана как 13em и 11em вместо 14em и 12em. Это связано с тем, что нам требуется некоторое горизонтальное заполнение, нежелательно, чтобы контент этих столбцов располагался до самых краев, так как это выглядит не слишком хорошо. Заполнение добавляется к ширине, поэтому 13em + 0.5em + 0.5em как раз и определяют требуемые 14em.

Создание столбцов

Итак, мы имеем базовые строительные блоки, но они появляются только один за другим. Нам требуются три столбца, поэтому нужно сделать их плавающими.

1. Добавьте в файл CSS следующие правила:

Это сделает их плавающими, отлично, но они находятся в неправильном порядке. Также столбец основного контента слишком узкий. И что произошло с нашим нижним колонтитулом?

2. Давайте сначала разберемся с нижним колонтитулом. Проблема состоит в том, что три столбца являются плавающими, что извлекает их из потока документа. Нижний колонтитул выталкивается вверх рядом с верхним колонтитулом и содержащий текст линейный бокс укорачивается, так что слово "Footer" появляется справа от плавающих элементов. Можно исправить это, очищая нижний колонтитул от всех плавающих столбцов. Добавьте в файл CSS следующее правило:

3. Теперь займемся тремя столбцами. Это будет сделано шаг за шагом, и будет выглядеть достаточно уродливо в течение некоторого времени, но не отчаивайтесь - в конце все встанет на свои места.

Ключевым моментом в этом подходе является элемент оболочки. Мы зададим на нем левое и правое поле, которые соответствуют по ширине боковым столбцам (навигации и боковой панели). Столбец основного контента будет занимать всю ширину оболочки, в то время как боковые столбцы будут смещаться в пространство, освобожденное полями. Звучит замысловато? Не беспокойтесь, мы разберем это подробно, маленькими шагами. Сначала зададим для оболочки поля, добавляя следующее правило в файл CSS:

Помните, что значения в сокращенном свойстве margin определяются в следующем порядке: top, right, bottom, left. Мы задаем верхнее и нижнее поля как 0, правое поле равным 14em (для боковой панели) и левое поле как 12em (для навигации). Мы добавляем также горизонтальное заполнение в 1em, так как мы не хотим, чтобы контент вплотную подходил к боковым столбцам, ему нужно немного пространства для дыхания.

4. Следующий шаг состоит в задании для столбца основного контента всей ширины оболочки его предка; код временно также задаёт для него яркий цвет фона, итак делаем следующее:

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

Затем мы перейдем к боковой панели - она является плавающей и имеет правильную ширину, но так как столбец #main имеет ширину 100%, он смещает боковую панель вниз. Как заставить ее подняться вверх и остаться рядом с #main, когда #main занимает всю ширину? Давайте сделаем это за два маленьких шага: сначала мы переместим ее вверх, а затем сместим ее на поле.

6. Здесь мы используем хитроумный прием, чтобы заставить плавающую боковую панель, которая была смещена вниз, снова переместиться вверх - сделаем следующее добавление в правило # sidebar:

7. Сохраните и перезагрузите, и вы увидите, что боковая панель теперь находится на том же вертикальном уровне, что и столбец контента. Задавая отрицательное левое поле равным ширине боковой панели, мы смещаем элемент назад в оболочку и он не выталкивается вниз. Проблема теперь в том, что он перекрывает контент.

8. Нам нужно сместить панель на место поля так, чтобы она не упала снова вниз, и именно здесь начинает играть - наконец - относительное позиционирование. Оно делает именно то, что нужно: оно смещает сгенерированный бокс, не перемещая сам элемент. Добавьте выделенные ниже свойства в правило для # sidebar:

Отметим, что нужно сместить ее на 15em, а не 14em - потому что имеется правое заполнение в 1em для оболочки, которое необходимо пропустить. Боковая панель находится теперь там, где должна быть: на месте поля, рядом со столбцом контента, аккуратно выровненная с правыми краями верхнего и нижнего колонтитулов.

9. Теперь нужно сделать то же самое с навигацией, что делается аналогично, но со своими особенностями. Перемещение и сдвиг боковой панели выполняется легко, так как эти движения были по сути такими же, как и ширина столбца: отрицательное поле 14em и смещение на 14em+1em вправо. Но столбец навигации необходимо переместить через весь столбец контента и затем сдвинуть еще дальше на поле.

Нашим помощником здесь будут проценты. Значение процента на полях навигационного столбца будет задаваться относительно ширины его предка, оболочки. Чтобы переместить столбец через всю оболочку - добавьте свойство, выделенное ниже в правиле #nav:

10. Сохраните и перезагрузите еще раз, и вы должны увидеть как навигация перекрывает левую сторону столбца контента. Теперь необходимо сместить ее на поле. Добавьте следующие выделенные свойства в правило для #nav:

Ширина навигации снова будет 12em, но еще надо пропустить 1em заполнения оболочки, поэтому требуется сместить бокс на 13em. Вы смещаете его влево, другими словами от правого края, поэтому и используется свойство right.

11. Удалите ярко-зеленый фон из столбца контента, и все будет готово.

Что вызывает тренды на фондовых и товарных рынках Объяснение теории грузового поезда Первые 17 лет моих рыночных исследований сводились к попыткам вычис­лить, когда этот...

Система охраняемых территорий в США Изучение особо охраняемых природных территорий(ООПТ) США представляет особый интерес по многим причинам...

ЧТО И КАК ПИСАЛИ О МОДЕ В ЖУРНАЛАХ НАЧАЛА XX ВЕКА Первый номер журнала «Аполлон» за 1909 г. начинался, по сути, с программного заявления редакции журнала...

Конфликты в семейной жизни. Как это изменить? Редкий брак и взаимоотношения существуют без конфликтов и напряженности. Через это проходят все...

Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте: