Навигатор

Веб разработка - CSS

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

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

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

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

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

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

HTML

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

<ol class= page-scroll >
<li><a href= # title= Полный назад ><img src= img/ps-begin.gif alt= /></a></li>
<li><a href= # title= Назад ><img src= img/ps-back.gif alt= /></a></li>
<li><a href= # title= >7</a></li>
<li><a href= # title= >8</a></li>
<li><strong>9</strong></li>
<li><a href= # title= >10</a></li>
<li><a href= # title= >11</a></li>
<li><a href= # title= Вперед ><img src= img/ps-forward.gif alt= /></a></li>
<li><a href= # title= Полный вперед ><img src= img/ps-end.gif alt= /></a></li>
</ol>

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