Пример верстки CSS

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

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

С места в карьер — вот то, что получится в результате:

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

Содержимое

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

Шапка с названием компании
Основное содержимое страницы:
- Собственно текст
- Навигация
  - Меню разделов
  - Поиск
- Новостная колонка
Мета-информация о странице: всякая мелочь вроде копирайтов и контактных email'ов.

Теперь превратим все это в HTML. Вот живая страница с тестовым текстом, которая и будет дальше верстаться. Для удобства восприятия структуры вот ее код без текста:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<title>...</title>
<link rel="stylesheet" href="style.css">

<div id="title"><h1>...</h1></div>

<div id="content">

  <div id="main">...</div>

  <div id="sections">
    <h2>...</h2>
    <ul>
      ...
    </ul>

    <form id="search">
      ...
    </form>
  </div>

  <div id="news">...</div>

</div>

<div id="meta">...</div>

Если сравнить этот код с тем списком содержимого страницы, что я привел чуть раньше, то можно увидеть, что он ее полностью повторяет. Все просто.

Вот меня спрашивают, зачем там на странице "рингтоны". Откуда я знаю? Все продают рингтоны, почему мы не должны!?

Валидация

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

Моя точка зрения на относительную бесполезность валидации, возможно, достаточно экстремальна для учебника, поэтому я решил, что эта страница должна таки быть валидной по стандарту HTML 4.01 Strict. Это можно проверить валидатором на W3C.

Вместе с тем, как можно видеть, на этой валидной странице отсутствуют теги <html>, <head>, <body>, нет кучи закрывающих тегов и т.п. Это не ошибка валидатора, это гибкость HTML: многие теги не только закрываются, но и добавляются автоматически. В частности, <title> и <link>, с которых страница начинается, будут помещены в автоматически созданный <head>, все остальное содержимое будет помещено в <body>, и они оба будут заключены в <html>. Так же будут закрыты все <p> и <li>.

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

Верстка

По ходу всей верстки я буду давать ссылки на страницы, которые показывают до чего мы дошли к данному моменту. Но для получения максимального удовольствия я рекомендую делать верстку непосредственно у себя на компьютере по ходу чтения. Скачайте HTML-файл, графику и создайте рядом пустой файл "style.css". Или сразу скачайте весь архив всех шагов.

Организация

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

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

Есть другой способ группировки — когда рядом находится то, что приходится часто одновременно менять:

цвета
шрифты
раскладка
остальное

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

Никакого единственно верного способа тут нет. Это во многом вопрос того, как именно вам удобно думать о дизайне страницы. Я предпочитаю второй способ, для чего сразу подготавливаю в CSS-файле такой скелет из комментариев:

/* Layout ******************/
/* Fonts *******************/
/* Colors ******************/
/* Misc ********************/

Раскладка

Для начала давайте посмотрим еще раз на финальный дизайн. Первая его особенность — это то, что страница фиксированной ширины, и что она находится по центру. Мы используем механизм центрирования из статьи про поток, и для этого нам нужно сначала определиться, что центрировать и внутри чего. Поскольку у нас центрируется вся страница внутри окна, то мы будем центрировать <body> внутри <html>. Код получается удивительно коротким:

body {
  padding:0; margin:0 auto;
  width:700px;
}

Установка ширины очевидна, а margin и padding могут вызвать вопросы. Дело в том, что для совместимости браузеры ставят для <body> отступы по умолчанию. Причем, одни через margin, а другие — через padding. Чаще всего эти отступы не нужны, и их обнуляют. Но поскольку нам нужно центрирование, правая и левая margin устанавливаются в auto.

Следующая неочевидность — это где тут элемент <html>, про который я говорил. Он должен задавать ширину, в которой будет центрироваться <body>, и она должна полностью заполнять окно. Но любой элемент по умолчанию и так занимает по ширине все окно, поэтому что-то специально писать не потребовалось.

Еще одна вещь. Очень, очень часто верстальщики игнорируют элемент <html> напрочь, и вместо этого <body> работает как фоновый элемент, а внутрь него вставляется лишний <div>, который держит содержимое. Не нужно так делать, кроме ухудшения читаемости это не дает ничего.

Теперь займемся блоками с шапкой, основным содержимым и подвалом. Они каждый занимают всю ширину своего контейнера (<body>) и идут один за другим. То есть, опять таки, представляют собой простой поток, и ничего для их позиционирования писать не нужно :-).

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

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

В HTML блоки, которые мы хотим превратить в колонки идут в таком порядке:

главная колонка ("main")
разделы сайта ("sections")
новости ("news")

... а разложить их надо так, чтобы первые две поменялись местами: "sections" слева, а "main" — в середине. Для начала всех их надо заfloat'ить и задать им ширину:

#main {
  float:left; width:55%;
}

#sections {
  float:left; width:20%;
}

#news {
  float:right; width:25%;
}

Теперь перестановка. Помимо позиционирования в CSS есть еще один способ двигать блоки — margin. Чтобы переставить местами "main" и "sections" мы добавим слева первой положительный margin, а второй — отрицательный. Главное — их посчитать.

С "main" все просто: она прижата к левому краю, и ее достаточно сдвинуть на ширину "sections" — 20%. Сама же "sections" стоит справа "main", а значит от левого края ее сейчас отделяет и ширина "main", и отступ в 20%, который мы только что добавили. В итоге, ее надо двигать влево на 20% + 55% = 75%. Промежуточный итог:

#main {
  float:left; width:55%;
  margin-left:20%;
}

#sections {
  float:left; width:20%; margin-left:-75%;
}

#news {
  float:right; width:25%;
}

Промежуточный, потому что у нас есть Internet Explorer, в котором есть баг, который у float'ов, прижатых к краю, удваивает границу, заданную от этого края. Поэтому наши margin-left:20%, заданные колонке "main" превращаются в 40% и ломают всю раскладку. Чтобы это устранить, специально для Internet Explorer'а добавляется отдельное правило с границей, уменьшенной в два раза:

* html #main {
  margin-left:10%;
}

Тут вся соль — в добавленном * html. По правилам CSS вся эта конструкция (* html #main) не должна подходить к элементу "main". Но IE — единственный браузер, у которого это не так, и он это правило воспринимает так же, как просто #main. Вот поэтому этот факт широко используется для того, чтобы писать правила, нужные только для IE. Такое, вот, удачное совпадение багов :-).

Последний штрих, который нам нужен для колонок — это сделать так, чтобы элемент "meta" отодвигался под самую длинную колонку. Для этого у нас удачно есть элемент "content", в котором все три колонки лежат. Сделаем, чтобы он их охватывал (все подробные объяснения — в статье про float'ы):

#content {
  overflow:hidden; width:100%;
}

Настало время посмотреть на то, что получилось к этому моменту.

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

#search {
  position:absolute;
  top:0; right:0;
  margin:20px;
}

В установке margin:20px нет никакой магии, это просто для красоты.

Но это не все. Дело в том, что таким образом форма отнесется к верхнему правому краю окна, а не 700-пиксельного <body>. Чтобы контейнером для позиционирования считался <body>, надо сделать из него "стакан", который я описывал в статье про позиционирование. Оттуда же и рецепт:

body {
  /* ... */
  position:relative;
}

Вот теперь форма будет располагаться в правом верхнем углу <body>, как раз в зоне заголовка.

Но все равно не совсем там, где надо. У всей нашей раскладки есть еще одна большая проблема, и чтобы увидеть ее наглядно, стоит просто временно раскрасить основные блоки страницы фоновыми цветами:

#title {
  background:#FEE;
}

#content {
  background:#EFE;
}

#meta {
  background:#EEF;
}

#search {
  background:#FFE;
}

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

Это проявления вываливания границ элементов <h1> (в заголовке) и <p> (в подвале). Я его описывал в статье про границы в потоке. Давайте от него избавимся:

h1 {
  margin:0; padding:20px;
}

#meta {
  padding:1px 0;
}

Одна маленькая деталь. В первом случае я просто обнулил margin у <h1>, чтобы нечему было вываливаться, а padding нужен просто для красоты, чтобы пространство вокруг текста было. Во втором случае я добавил маленькие незаметные padding'и контейнеру, чтобы отменить вываливание margin'ов <p>. Почему именно так — расскажу дальше.

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

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

Переведем это все с русского языка напрямую на CSS:

body {
  /* ... */
  min-height:100%;
}

#meta {
  position:absolute; bottom:0;
  width:100%;
}

Но это, конечно, только начало.

Во-первых, значение 100% для <body> означает "100% от высоты родителя". Родитель — <html>, но у него высота не задана вообще, и браузер не в состоянии посчитать эти 100%. Поэтому придется добавить еще правило:

html {
  height:100%;
}

У <html> родителя нет (самый верхний элемент в иерархии), поэтому его 100% берутся от высоты окна, которую браузер всегда точно знает.

С min-height есть еще одна проблема: этого свойства не понимает IE. Однако нас спасет еще один его баг: свойство height обрабатывается неверно и работает как раз, как должен работать min-height. Поэтому воспользуемся знакомым фильтром:

* html body {
  height:100%;
}

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

Сделать это, в общем-то, просто: поставить блоку с колонками ("content") нижний padding. Вопрос в том — сколько. Сейчас точная высоты подвала неизвестна, она определяется текстом в нем. Однако мы вполне можем предполагать, что в блоке для всякой мелкой мета-информации не должно быть слишком много текста. Поэтому мы просто зарезервируем под нее достаточно места. Скажем, 40 пикселов. Все это выливается в такие правила:

#meta {
  position:absolute; bottom:0;
  height:40px; width:100%;
  padding:1px 0;
}

#content {
  padding-bottom:42px;
}

42 пиксела снизу "content" — это 40 пикселов высоты подвала и по 1 пикселу его padding'а.

Раскладка готова. Посмотрим на результат.

Шрифты

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

Как правильно задавать шрифты — тема одной из самых горячих священных войн в CSS-сообществе, вдаваться сейчас в подробности я даже не попытаюсь :-). Лишь опишу способ, которым пользуюсь сам.

Суть способа вкратце такова. Сначала странице (в лице элемента <body>) назначается основной шрифт. Это тот шрифт, которым будет набрано большинство текста. Затем для каждого элемента, в котором шрифт будет отличается от основного, прописываются изменения: другой размер, другая жирность, другое начертание. Причем, размер задается в процентах от размера родительского шрифта. Это позволяет затем удобно менять размер всех шрифтов на странице, изменяя только размер основного.

Итак, основной шрифт:

body {
  font:10pt Tahoma, Sans-Serif;
}

На этой записи стоит остановиться подробно. Свойство font — это сборное свойство для нескольких шрифтовых свойств, точно так же, как, например, свойство margin задает установку всех четырех margin-top, margin-right, margin-bottom, margin-left.

У font структура чуток сложнее, но если исключить экзотику, то оно выглядит так:

font: <курсивность> <жирность> <размер> <список гарнитур>;

Значения можно пропускать, но не менять местами. Таким образом, наш "font:10pt Tahoma, Sans-Serif" переводится на русский язык как "некрусивная нежирная Tahoma размером 10 пунктов". "Sans-serif" означает, что если шрифта Tahoma на компьютере не будет, браузер возьмет шрифт, который у него в установках назначен как шрифт без засечек.

Дальше идем по блокам страницы и меняем шрифты. Шапка, потом заголовок внутри главной области страницы:

h1 {
  font-size:180%;
  letter-spacing:1px;
}

#main h2 {
  font-size:130%;
}

Обращаю внимание, что при изменениях какой-то одной характеристики шрифта уже нельзя пользоваться свойством font, потому что оно задает весь шрифт полностью. "font:180%" означает "некурсивный нежирный шрифт по умолчанию размером 180%", и наша установка гарнитуры Tahoma тут собьется.

Установка letter-spacing:1px увеличивает на один пиксел расстояние между буквами. Это чисто стилистическая штука, мне показалось, что так заголовок выглядит более э-э-э... амбициозно! Это значение может быть и отрицательным — тогда буквы будут стоять плотнее.

Дальше зададим одинаковые шрифты для левой и правой колонок и их основных заголовков:

#sections,
#news {
  font-size:80%;
}

#sections h2,
#news h2 {
  font-size:125%; font-weight:bold;
  text-transform:uppercase;
}

Тут стоит обратить внимание на размер шрифта в заголовках. Проценты размера шрифта всегда считаются от размера шрифта родителя. Поэтому 125% здесь берутся не от 10pt основного шрифта, а от шрифта блоков "news" и "sections". Его даже нетрудно посчитать: 80% от 10pt — это 8pt. 125% от 8pt — это 10pt.

Определим остальные шрифты, тут уже нет никаких загадок:

#news h3 {
  font-size:100%; font-weight:bold;
}

#meta {
  font-size:70%;
}

#search input,
#search button {
  font-size:90%;
}

Удачно, что в форме поиска у нас мало элементов, поэтому их все (оба) можно однозначно определить просто по названию тега. Если туда добавится какой-нибудь <input type="checkbox">, то придется их обвешивать отличительными признаками. Но раз у нас такого нет, не будем мусорить HTML.

Итак, со шрифтами закончили.

Цвета и декор

Нам осталось расцветить страницу. Помимо собственно цветов в этот же этап я объединил еще и декор: графические украшательства, градиенты, рамки, а также отступы вокруг текста. Хоть цвета и декор — вещи разные, я рекомендую их делать одновременно, так просто удобней. Однако я все же буду разносить их в разные части CSS-файла для того, чтобы оставить на будущее возможность управлять цветами отдельно.

Заголовок и подвал

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

#title {
  background:url(title-bg.png) #45F left top repeat-x;
  color:white;
}

#meta,
#meta a {
  background:#45F;
  color:white;
}

#search {
  color:white;
}

На примере заголовка расскажу про свойство "background". Это тоже сборное свойство (как font), и оно задает такие параметры:

background:<картинка> <цвет> <расположение> <повтор>;

Все параметры можно пропускать и можно даже менять их местами.

Градиент нарисован на картинке размерами 10х50:

Она располагается в левом верхнем углу ("left top") и повторяется по горизонтали ("repeat-x").

Обратите внимание, что картинка градиента по высоте не закрывает весь блок заголовка. Для того, чтобы там не зияла пустота, в свойстве background указан еще и цвет (#45F), который появляется везде, где картинки нет (а также в прозрачных областях картинки, если они есть). Цвет этот выбран, конечно, совпадающим с нижней частью градиента.

Формат цвета с тремя цифрами #45F — это сокращенная запись, эквивалентна значению #4455FF

Теперь надо добавить в заголовок эксклюзивный дизайнерский фирменный логотип. Он тоже задается в виде фоновой картинки, но мы не можем ее привязать к блоку "title", потому что там фоновая картинка уже есть (а задать их несколько в текущей версии CSS нельзя). Но у нас в заголовке есть еще один элемент — <h1>, который вложен в блок заголовка.

Очень удобно, что он полностью заполняет "title", не оставляя вокруг себя свободного места. Так вышло как раз потому, что когда мы устраняли проваливание границ, то заменили все margin'ы вне <h1> на padding'и внутри <h1>. И теперь, когда у нас есть совпадающие по размеру два блока, очень удобно вешать на них фоновые картинки и располагать в точности, как нам надо.

Вот сама картинка логотипа:

Код:

h1 {
  background:url(logo.png) left top no-repeat;
  padding-left:60px;
}

Пара пояснений. Картинка располагается точно в левом верхнем углу для того, чтобы ее градиентный фон визуально сливался с фоном блока "title". Если бы их расположение не совпадало, совместить градиенты было бы проблемой.

Отступ в 60 пикселов — это фактически место под картинку. Это очень распространенный способ навешивания оформительских картинок рядом с элементами: назначить картинку фоном и подвинуть содержимое padding'ом.

Осталось привести в порядок форму поиска. Она должна быть слегка поменьше. Чтобы добиться этого эффекта мы уберем у абзацев внутри нее все отступы и уменьшим текстовое поле:

#search p {
  margin:0;
}

#search input {
  width:10em;
}

Все просто. Посмотрим, что получилось.

Заголовок и форма выглядят слегка плохо в IE и, на этот раз, еще и Опере. Сначала разберемся с первым.

Во-первых, не видно логотипа. Исправляется эта штука совершенно магическим методом:

* html h1 {
  height:1%;
}

Высота тут, конечно, ни при чем. Это просто одно из свойств IE, которое в данном случае не оказывает никакого прямого действия, зато "чинит" странное поведение блоков. Еще такими же "целительными" свойствами обладают width:100%, position:relative, zoom:1. Этот метод называется "holly hack".

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

Во-вторых, кнопка "Искать" переносится на другую строку. Запретим переносы в абзацах:

* html #search p {
  white-space:nowrap;
}

Но теперь кнопка некрасиво прижимается к текстовому полю. Отодвинем:

* html #search button {
  margin-left:4px;
}

В Опере проблема другого плана. Элемент <button> здесь разрывает абзац, в котором лежит вместе с текстовым полем, и, соответственно, переносится ниже. В общем-то, починить это можно довольно просто: поменять <p> на <div>. Но я этот баг обнаружил слишком поздно, он был уже в нескольких пошаговых файлах, поэтому правку этого я оставляю в качестве самостоятельного упражнения читателям :-). Кроме того, у меня есть подозрение, что в новой Опере 9 это могли уж и исправить сами разработчики.

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

Осталась здесь последняя мелкая стилизация — уменьшить отступы между абзацами в подвале. Тут все совсем просто:

#meta p {
  margin:5px;
}

Колонки

Под колонками у нас есть сложный узор — градиент и пунктирные линии, поэтому проще всего использовать для их визуализации метод "faux columns", на который я ссылался в статье про float'ы. Для этого делается фоновая картинка шириной 700 пикселов, на которой рисуются градиент и пунктиры по ширине колонок (140 пикселов левая колонка, 175 — правая).

А затем задается фоном к <body> с повторением по вертикали:

body {
  background:url(content-bg.png) white left top repeat-y;
  color:black;
}

... (заодно тут же и цвета фона и текста).

Посмотрим на колонки.

Совсем не похоже. Фон, который мы назначили центрированному 700-пиксельному <body> лежит не в в нем, а прижался к левому краю. Это новые браузеры делают для совместимости со старыми браузерами доCSSной эры, когда фон <body> и фон окна считались одним и тем же.

Чтобы это поведение отменить, достаточно дать какой-нибудь фон элементу <html>, тогда уже он назначится окну, а фон <body> встанет на место.

Для фона окна я обожаю фоновые узоры :-). Кроме того, в последнее время это, кажется, модно.

html {
  background:url(window-bg.png) #EEE;
}

Отсутствие всяких "left top no-repeat" означает "заполнить все". При этом цвет #EEE вообще не будет виден, потому что картинка узора полностью непрозрачна (серая по белому). Но он будет виден тогда, когда картинка узора еще не загружена или если в браузере отключены картинки. Сам оттенок подобран так, чтобы примерно походить по насыщенности на узор.

Вот теперь колонки должны выглядеть прилично.

Левая колонка

Для начала, мне подумалось, что заголовок "Разделы" в левой колонке будет лишним (эдакий дизайнерский ход). Поэтому он просто убирается:

#sections h2 {
  display:none;
}

Следующий объект стилизации — меню. Оно задано списком <ul> и оттого сдвинуто вправо и имеет буллиты у каждого пункта. Нам всего этого не надо:

#sections ul {
  list-style:none;
  margin:50px 0; padding:0;
}

list-style:none отключает буллиты, а всевозможные отступы и границы мы полностью переопределяем: с боков их нет, а сверху и снизу списка есть по 50 пикселов. Задание одновременно и margin'а, и padding'а нужно для того, чтобы убрать отступы по умолчанию, которые разные браузеры задают кто через одно, кто через другое.

Разобравшись с отступами, расцветим сами элементы:

/* Colors ******************/

#sections li a {
  background:#293499;
  color:white;
  border-color:white;
}

#sections li a:hover {
  background:#D00;
}

/* Misc ********************/

#sections li a {
  display:block;
  margin:5px 0; padding:2px 5px;
  border-style:solid; border-width:1px 0;
  text-decoration:none;
}

На что тут обратить внимание:

Не только цвета фона и текста, но и рамок вынесены в раздел цветов, а вот толщина и стиль рамки задается в декоре.
Цвета текста задаются элементу <a> внутри <li>. Это из-за того, что браузер по умолчанию красит ссылки в синиц цвет, а не в цвет окружающего текста. Если белый цвет назначить на <li>, то <a> все равно останется синим.
Конструкция a:hover работает, когда над <a> находится мышка. В этом случае мы подкрашиваем ссылку красным фоном.
display:block для ссылки нужен для того, чтобы она, как положено блочному элементу, заняла всю ширину <li>, и площадь ссылки была не только над буквами, но занимала весь элемент списка.

Левая колонка готова.

Тут нас традиционнно подводит IE, у которого вертикальное расстояние между элементами списка сильно больше, чем надо. Это похоже на какие-то лишние отступы, и чинится уже знакомым "holly hack'ом":

* html #sections li a {
  height:1%;
}

Колонка новостей

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

/* Colors ******************/

#news h2 {
  background:url(news-head-bg.png) #DDE6FF left top repeat-x;
}

/* Misc ********************/

#news h2 {
  margin:0;
  padding:10px;
}

Дальше впишем даты новостей в начало абзацев и дадим им отступы друг от друга и от краев колонки:

#news h3 {
  float:left; 
  margin:0 5px;
}

#news p {
  margin:20px 5px;
}

Тут может возникнуть вопрос, почему отступ по краям внутри колонки задается ее внутренним элементам, а не самой колонке? Во-первых, потому что одному из элементов — главному заголовку новостей (<h2>) — этот отступ не нужен. А во-вторых, если колонке, которой задана ширина, проставить отступы, то они ее расширят, она перестанет умещаться в оставленные ей в раскладке 25%, и раскладка сломается.

Это, можно сказать, правило: надо всеми силами избегать назначение декоративных отступов и рамок главным блокам раскладки. Иначе замучаетесь отлаживать.

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

У нас остались две маленькие проблемы в этой колонке. Первая — вспомним, что IE удваивает отступ для float'ов, поэтому даты новостей слегка смещены дальше, чем надо. Быстро чиним:

* html #news h3 {
  margin-left:2.5px;
}

Другая проблема в том, что дата первой новости прилипает к низу общего заголовка новостей. Вообще-то, так и должно было произойти, потому что ни у заголовка, ни у даты нет вертикальных margin'ов. У других дат такой проблемы нет, потому что перед каждой из них идет абзац (<p>), у которого и снизу, и сверху есть margin в 20 пикселов.

Таким образом, проще всего это исправить, дав заголовку тоже отступ в 20 пикселов снизу. Тем более, что этот отступ там и по дизайну нужен. Исправим соответственно предыдущее правило для заголовка:

#news h2 {
  margin:0 0 20px 0;
  padding:10px;
}

После всего проделанного, думаю, правила для ссылок "Подробнее..." со стрелочкам в объяснениях не нуждаются::

/* Colors ******************/

#news a {
  color:#D00;
}

/* Misc ********************/

#news a {
  background:url(red-arrow.png) right center no-repeat;
  padding-right:13px;
}

* html #news a {
  padding-left:1px;
}

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

Главная колонка

В главной колонке дел совсем немного. Стили заголовка и абзацев простые:

/* Colors ******************/

#main h2 {
  color:#293499;
}

/* Misc ********************/

#main h2,
#main p {
  margin-left:15px;
  margin-right:15px;
}

#main h2 {
  margin-top:20px; margin-bottom:10px;
}

Ну и иллюстрацию слегка облагородить: сдвинуть влево и добавить рамочку фирменного синего цвета. Чтобы не делать единый стиль для любых картинок в тексте (у них ведь может быть разное назначение), я заранее назначил этой картинке отличительный признак — класс с названием "picture". И в CSS мы будем стилизовать именно его:

/* Colors ******************/

#main .picture {
  border-color:#45F;
}

/* Misc ********************/

#main .picture {
  float:left; 
  padding:5px; 
  border-style:solid; border-width:1px;
  margin:0 15px 15px 0;
}

Все

Ну вот, кажется, готово :-).

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

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

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

Комментарии: 114 (особо ценных: 1)

Flack

Фиксаж все-таки. Не самая интересная задача, имхо.
Хотя новичкам будет полезно.

SeLarin

Спасибо. Очень интересный урок!

mourner

Молодец! Это прекрасный урок для начинающих. Подробно не читал, но финальный код очень ясный - как раз то, что нужно. Рунету так не хватает любителей стандартов и CSS!

Надеюсь, благодаря этой статье их станет больше. Большое спасибо! Теперь интересующихся буду сюда отправлять, а то сразу на CSS Zen Garden и A List Apart - это слишком жестко для полного новичка. :-)

DenD

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

Двойной margin при флоате в IE можно еще исправить, указав блоку display: inline.

* html #news h3 { margin-left:2.5px; }

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

Иван Сагалаев

Между тем, в полпикселе ничего странного нет :-). В CSS пиксел - это не физический пиксел устройства, а некая логическая величина. На современных мониторах она приблизительно равна физическому пикселу, а на принтере, туда точечек краски вместится чуть больше.

А в хаке вообще неважно, что это такое, главное, что это 5/2 :-)

Sasha

Отличный пример. Я, как начинающий, много узнал для себя интересного. Оказывается

можно не закрывать.
И вообще - просто и понятно про CSS. Такого бы побольше.

/* Colors ******************/ main .picture { border-color:#45F; } /* Misc ********************/ main .picture { float:left; padding:5px; border-style:solid; border-width:1px; margin:0 15px 15px 0; }

/* Colors ******************/ #news a { color:#D00; } /* Misc ********************/ #news a { background:url(red-arrow.png) right center no-repeat; padding-right:13px; } * html #news a { padding-left:1px; }

Добавить комментарий

Flack

Фиксаж все-таки. Не самая интересная задача, имхо.
Хотя новичкам будет полезно.
SeLarin

Спасибо. Очень интересный урок!
mourner

Молодец! Это прекрасный урок для начинающих. Подробно не читал, но финальный код очень ясный - как раз то, что нужно. Рунету так не хватает любителей стандартов и CSS!

Надеюсь, благодаря этой статье их станет больше. Большое спасибо! Теперь интересующихся буду сюда отправлять, а то сразу на CSS Zen Garden и A List Apart - это слишком жестко для полного новичка. :-)
DenD

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

Двойной margin при флоате в IE можно еще исправить, указав блоку display: inline.

* html #news h3 { margin-left:2.5px; }

Порядком удивлен был. Пытался представить пол-пикселя. Много думал...
Иван Сагалаев

Между тем, в полпикселе ничего странного нет :-). В CSS пиксел - это не физический пиксел устройства, а некая логическая величина. На современных мониторах она приблизительно равна физическому пикселу, а на принтере, туда точечек краски вместится чуть больше.

А в хаке вообще неважно, что это такое, главное, что это 5/2 :-)
Sasha

Отличный пример. Я, как начинающий, много узнал для себя интересного. Оказывается
и
можно не закрывать.
И вообще - просто и понятно про CSS. Такого бы побольше.