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


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

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



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

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

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

HTML

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

Присваиваем класс к списку, чтобы можно было манипулировать именно этим контейнером и элементами, находящимся внутри него. Первые и последние 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;
}
Посмотреть на работающий навигатор