Навигатор

Задача: создать навигатор страниц. Вот такой:

1. Подбираем цвета

Так как навигатор делается для использования в конкретном сайте, цвет нам уже известен: #0aaafd. Этот цвет используется для обозначения ссылок. И он нам нужен для создания скругленных квадратов-подложек (один — для выделения текущей страницы, второй — для выделения при эффекте :hover). Для подложки текущей страницы я использую 80% насыщенности цвета, то есть #3bbbfd. Для подложки, появляющейся при эффекте :hover я использую 20% насыщенности цвета, то есть #ceeeff.

2. Элементы навигатора

• Номер текущей страницы
• Номер одной из предыдущей-следующей страниц
• Предыдущая/следующая страница
• Первая/последняя страница

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

3. Переходим к верстке

HTML

Сначала нам надо создать html-разметку, с которой мы будем работать. Что из себя представляет навигатор? Список с определенным порядком нумерации. Под это определение подходит нумерованный список (ol). Создаем разметку:

1. 
2. 
3. 7
4. 8
5. 9
6. 10
7. 11
8. 
9. 

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

Теперь переходим к самому интересному —

CSS

Рассмотрим наш навигатор поближе:


Расстояние между верхней и нижней горизонтальными полосами 18 пикселов.
Ширина полупрозрачного серого прямоугольника 20 пикселов.
Остальное видно благодаря масштабу 500%, любезно предоставленному Фотошопом.

Правила для тега ol:

clear:both;
display:block;
width:181px;
margin:0 auto;


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

[количество элементов списка ol] * ( [ширина контейнера li] + [отступ слева контейнера li] + [отступ справа контейнера li] )

То есть 9 * ( 18 + 1 + 1 ), получаем 180. Однако 180 пикселов IE не хватает, и навигатор плывет:

Увеличиваем ширину на 1 пиксель, и все приходит в норму.

Можно не заморачиваться, и подобрать ширину приблизительно, однако всегда приятнее, когда существует порядок :)
Padding не учитываем, позже объясню почему.

Правила для тега li:

list-style:none;
display:block;
float:left;
margin:0 1px;


Первое правило запрещает показ порядкового номера элемента списка.
Второе правило нужно, т.к. внутри будет блочный элемент — ссылка.
Третье правило для того, чтобы элементы списка располагались не вертикально, а горизонтально.
Четвертое правило задает отступы слева и справа в 1 пиксель. Это нам нужно, так как размер подложки равен 18px, и необходимо небольшое расстояние, чтоб подложки текущей страницы и при наведении не «слипались».

Правила для тега a:

display:block;
width:18px;
background:none;
text-align:center;
font:normal 14px/18px Arial, Helvetica, sans-serif;


Первое правило нужно для того, чтобы работало второе. То есть в inline-элементах width не работает.
Второе правило нужно, так как у нас фиксированная ширина подложки. Если хочется нефиксированную, используем технику «sliding doors».
Третье правило запрещает использование подложки (бэкграунда) при обычном состоянии ссылки.

Четвертое правило выравнивает содержимое контейнера по центру по горизонтали.
Пятое правило — нормальный (не жирный) шрифт размером 14 пикселов, выравнивание текста по вертикали, и указание на используемое семейство шрифтов.

Правило для эффекта a:hover:

background:url("img/ps-bg.gif") no-repeat left bottom;


Правило «говорит» об использовании фонового изображения. Но все не так просто, как кажется на первый взгляд. Если мы просто создадим картинку для эффекта :hover, при загрузке страницы, браузер ее не загрузит (так как она не отображается при загрузке страницы).
Также обращаю внимание, что в IE :hover работает только применительно к ссылкам.
Возвращаюсь к подложкам. Так как у нас 2 подложки (для текущей страницы и при наведении), я «склеиваю» их в одну картинку (чтобы при наведении сразу все работало):


↑ это и есть ps-bg.gif, 18 пикселов в ширину и (18+18) в высоту. Нижняя «половина» — для эффекта при наведении, верхняя — для текущей страницы.

Итак, контейнеры (элементы списка li) 18х18 у нас готовы, можно наполнять их содержимым. Нам осталось оформить 2 тега — strong и img. Оформление для текста ссылок у нас готово.

Правила для тега strong:

display:block;
width:18px;
color:white;
background:url("img/ps-bg.gif") no-repeat left top;
text-align:center;
font:bold 14px/18px Arial, Helvetica, sans-serif;


Здесь интерес представляет только четвертое правило — «вырезаем верхнюю часть ps-bg.gif и вставляем ее бэкграундом в контейнер 18х18».

Правила для тега img:

width:18px;


Для картинок явно должна быть указана одна из сторон (ширина, как правило). Размер второй стороны, если не указан в CSS, вычисляется браузером автоматически с учетом пропорций картинки.

Весь CSS:

.page-scroll {
clear:both;
display:block;
width:181px;
margin:0 auto;
}

.page-scroll li {
list-style:none;
display:block;
float:left;
margin:0 1px;
}

.page-scroll a {
display:block;
width:18px;
background:none;
text-align:center;
font:normal 14px/18px Arial, Helvetica, sans-serif;
}

.page-scroll a:hover {background:url("img/ps-bg.gif") no-repeat left bottom;}

.page-scroll strong {
display:block;
width:18px;
color:white;
background:url("img/ps-bg.gif") no-repeat left top;
text-align:center;
font:bold 14px/18px Arial, Helvetica, sans-serif;
}

.page-scroll img {width:18px;}


В общем-то все готово, но CSS можно чуть-чуть сократить:

.page-scroll {
clear:both;
display:block;
width:181px;
margin:0 auto;
}

.page-scroll li {
list-style:none;
display:block;
float:left;
margin:0 1px;
}

.page-scroll a {
background:none;
font:normal 14px/18px Arial, Helvetica, sans-serif;
}

.page-scroll a:hover {background:url("img/ps-bg.gif") no-repeat left bottom;}

.page-scroll strong {
color:white;
background:url("img/ps-bg.gif") no-repeat left top;
font:bold 14px/18px Arial, Helvetica, sans-serif;
}

.page-scroll strong, .page-scroll a, .page-scroll img {
display:block;
width:18px;
text-align:center;
}


Посмотреть на работающий навигатор