Раскладка позиционированием

Много времени утекло с первого варианта дизайна "Мегакорпорации", настало время... ребрендинга! На примере которого я хочу показать еще один способ CSS-раскладки — позиционирование.

В предыдущих статьях я пару раз упоминал, что хоть float'ы и самый распространенный инструмент CSS-верстки, тем не менее для нее никогда не задумывались, и поэтому эта верстка переполнена хаками и неочевидными приемами. Позиционирование же как раз для раскладки в CSS и задумывалось. А причина, по которой этот способ применяется гораздо реже, по большей части в том, что он очень негибкий: требует точного задания позиций и размеров блоков, что во многих случаях делает невозможным растягивание их под разное количество текста.

Впрочем, обо всем по порядку.

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

Раскладка

Новый дизайн выглядит так:

По традиции — вот архив со всем содержимым: modern-layout.zip

Сразу должно бросаться в глаза отличие от предыдущих раскладок: здесь нет колонок. Все состоит из блоков с четко видимым низом, что на корню устраняет нужду выравнивать вертикальные размеры блоков, которая является главным источником трудностей в колоночных раскладках. Здесь же все выглядит довольно органично.

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

При такой раскладке ширина основного поля будет меняться вслед ширине окна, а правое поле будет всегда одинаковым.

Самое приятное при работе с абсолютным позиционированием — это то, что код получается очень понятным, потому что почти все правила используются по своему прямому назначению, а не ради своих сторонних эффектов.

Общий "стакан" и заголовок сверху:

body {
  position: relative; /* для задания "стакана" */
  margin: 0 40px;
}

#title {
  position: absolute;
  left: 0; top: 20px; 
  height: 80px; width: 100%;
}

Правые блоки:

#sections {
  position: absolute;
  right: 0; top: 120px; /* 120 = высота #title с его margin'ами */
  height: 170px; width: 300px;
}

#search {
  position: absolute;
  right: -1px; top: 190px;
  height: 20px; width: 100%;
  padding: 10px 0;
}

#news {
  position: absolute;
  right: 0; top: 370px; /* 370 = верх + высота #sections + отступ */
  width: 300px;
  padding-bottom: 10px;
}

Ужатые оставшиеся основной текст и #meta:

#content {
  padding-top: 120px; /* место для #title */
  margin-right: 320px; /* место для правых блоков */
}

#meta {
  margin-top: 20px;
  margin-right: 320px;
}

Хочу обратить внимание на блок поиска. В HTML он находится внутри блока #sections, но мне захотелось, чтобы он выглядел как отдельный полноправный блок. Делается это тем же самым абсолютным позиционированием, но стоит посмотреть на его координаты:

#search {
  position: absolute;
  right: -1px; top: 190px;
  height: 20px; width: 100%;
  padding: 10px 0;
}

top: 190px могут показаться странным, потому что от верха страницы он отстоит на 20 + 80 + 20 (#title) + 170 + 20 (#sections) = 310 пикселов. Дело в том, что абсолютно позиционированный #sections создает для своего содержимое свой собственный стакан, а раз #search лежит внутри него, то все его координаты считаются относительно #sections.

Микрораскладка

Хоть это и никакой не общепризнанный термин — "микрораскладка" — я этим словом называю распределение в нужные места того, что находится внутри основных блоков страницы. Частенько там встречаются свои интересные приемы, которые не подходят для раскладки "больших" кусков. Я решил в рамках этой статьи рассмотреть два таких приема, связанных с вертикальным выравниванием, хотя с основной темой они связаны мало.

Центрирование заголовка по высоте

Слово "Мегакорпорация" расположено в верхнем блоке выравненным по высоте по центру. Достигается это указанием высоты строки <h1> в точности равной высоте всего блока #title (и убиранием лишних границ). Если высота строки больше высоты букв, они в ней центрируются:

#title h1 {
  line-height: 80px;
  margin: 0; padding: 0 20px;
}

Вообще, универсального способа вертикального выравнивания чего угодно в чем угодно в CSS нет. Вот и этот способ, например, работает только если весь текст умещается в одной строке. Но здесь он вполне подходит.

Однострочный поиск

Раскладка блока поиска содержит два абзаца:

<form id="search" action="search/" method="get">
  <p>Поиск по сайту
  <p><input type="text"> <button type="submit">Искать</button>
</form>

... которые надо разложить в одну строчку. Раскладывать блоки в одну строчку можно двумя способами: сделав их float'ами или сделав их строчными (inline) элементами.

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

Другой способ — превратить все содержимое блока (абзацы, текстовое поле и кнопку) в строчные элементы, и назначить им вертикальное выравнивание по центру:

#search p,
#search p input,
#search p button {
  display: inline;
  vertical-align: middle;
}

Тут должен возникнуть вопрос, почему свойство vertical-align не используется для выравнивания в остальных случаях. Причина в том, что оно работает только для строчных боксов и табличных ячеек (на причинах такого ограничения позвольте мне в этой статье не останавливаться).

Прямое назначение этого свойства — выравнивание вставленных в текст мелких картинок (вроде смайликов), когда получается что буквы в строке и картинки имеют разную высоту. Именно поэтому, кстати, в таких случаях не подойдет трюк с line-height, потому что высота строк в тексте заранее неизвестна и может быть вообще разной.

Хотя надо заметить, что в случае именно с блоком поиска трюк с line-height вполне бы подошел, потому что строчка одна и высота блока задана. Другой способ тут рассмотрен исключительно ради примера.

Еще бы стаканчик...

Главный же недостаток такой фиксированной раскладки в том, что она не будет правильно изменяться при изменении содержимого. Лучше всего проблемы видно на примере блока #sections:

• если маркетинговый отдел Мегакорпорации решит добавить на сайт раздел "Блоги сотрудников", то новый пункт меню, очевидно, не уместится в фиксированную высоту блока
• и даже без нового пункта достаточно увеличить размер шрифта на один шаг, чтобы пункты в контейнер не влезли (а заодно и поиск разъехался)

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

Как только блоку #sections назначается абсолютное позиционирование, он вынимается из потока, идущего в стакане <body>, и сам становится стаканом для того, что лежит внутри него. Дальше то же самое проделывается с блоком #news. В итоге, оба блока отсчитывают свое положение от своего родительского стакана (<body>), но сами — полностью независимы, и поэтому их высоту и положение приходится просчитывать явно вручную.

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

Переполнение

CSS для решения такой проблемы предлагает совершенно другое средство — контроль переполнения с помощью свойства overflow. Раз нельзя свободно увеличивать размер бокса, то предлагается повесить внутри него скроллинг, и тогда там уместится любое количество содержимого.

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

Размер шрифта

А вторую проблему — выход текста за пределы контейнера при увеличении шрифта — решить как раз можно.

В CSS есть много единиц измерения, с очень разными характеристиками, о которых я когда-нибудь, наверное, напишу подробней. Сейчас нам понадобится одна — em. Если не углубляться в подробности, то по сути она представляет собой размер текущего шрифта. Что это значит, проще всего показать на примере.

Предположим есть некий бокс, в котором шрифт задан как

font: 10pt Verdana

1 пункт — это 1/72 дюйма, а стандартное разрешение экрана, принятое в CSS — 96 пикселов на дюйм. Поэтому пункты в пикселы пересчитываются так: 10pt = 96 / 72 * 10 ≈ 13px. Вот это и будет 1em. А если размер шрифта будет 12pt, то 1em будет занимать 16px.

Из-за того, что в большинстве браузеров 12pt — размер шрифта по умолчанию, исходит распространенное заблуждение, что 1em всегда равен 16px.

Но на практике всей этой арифметикой заниматься не нужно. Достаточно размер блоков в em'ах просто подобрать, какой нужен. Главное то, что при увеличении или уменьшении шрифта он будет расти и уменьшаться точно так же, как и текст, в нем содержащийся. Правда, стоит всегда оставлять для текста внутри небольшой люфт, потому что из-за разных характеристик шрифта (кернинг, сглаживание и все такое) он сам по себе растет и уменьшается неравномерно.

В итоге, для того, чтобы решить проблему нашей раскладки, которая задана в пикселах, надо всего лишь заменить пикселы на аналогичные им em'ы!

Хотя, конечно, выражение "всего лишь" не лишено некоторого издевательского оттенка. Трудность использования em'ов в качестве единиц измерения размеров блоков в том, что они считаются из размеров шрифтов, заданных этим блокам, а значит если у выравненных по размерам блоков разный размер шрифта, им придется выставлять размеры разными цифрами. В нашей раскладке такое происходит, например, с правой границей блоков #content и #meta, потому что #content использует основной шрифт страницы, а #meta:

#meta {
  font-size: 85%;
}

... что выливается в такое не сразу очевидное задание им одинаковой правой границы:

#content {
  margin-right: 24.5em;
}

#meta {
  margin-right: 28.8em;
}

В итоге же получается такой вот финальный вариант, который должен нормально реагировать на изменение размеров шрифта.

Эта статья - часть находящегося в процессе написания цикла под рабочим названием "Учебник". Я рекомендую ознакомиться и с другими статьями, которые можно найти в категории "Учебник", где они сейчас собраны в обратном хронологическом порядке.