Цвета и декор

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

}