Задача: создать навигатор страниц. Вот такой:
Теперь переходим к самому интересному —
Расстояние между верхней и нижней горизонтальными полосами 18 пикселов.
Ширина полупрозрачного серого прямоугольника 20 пикселов.
Остальное видно благодаря масштабу 500%, любезно предоставленному Фотошопом.
Правила для тега
Второе правило «говорит» о том, что данный контейнер является блочным элементом — так как внутри будут блочные элементы (нельзя блочные элементы внутрь строчных класть).
Третье правило нужно нам для выравнивания навигатора по центру. Дело в том, что без указания ширины мы не смжем выровнять этт контейнер по центру. Значение ширины
То есть
Увеличиваем ширину на 1 пиксель, и все приходит в норму.
Можно не заморачиваться, и подобрать ширину приблизительно, однако всегда приятнее, когда существует порядок :)
Padding не учитываем, позже объясню почему.
Правила для тега
Второе правило нужно, т.к. внутри будет блочный элемент — ссылка.
Третье правило для того, чтобы элементы списка располагались не вертикально, а горизонтально.
Четвертое правило задает отступы слева и справа в 1 пиксель. Это нам нужно, так как размер подложки равен 18px, и необходимо небольшое расстояние, чтоб подложки текущей страницы и при наведении не «слипались».
Правила для тега
Второе правило нужно, так как у нас фиксированная ширина подложки. Если хочется нефиксированную, используем технику «sliding doors».
Третье правило запрещает использование подложки (бэкграунда) при обычном состоянии ссылки.
Четвертое правило выравнивает содержимое контейнера по центру по горизонтали.
Пятое правило — нормальный (не жирный) шрифт размером 14 пикселов, выравнивание текста по вертикали, и указание на используемое семейство шрифтов.
Правило для эффекта
Также обращаю внимание, что в IE
Возвращаюсь к подложкам. Так как у нас 2 подложки (для текущей страницы и при наведении), я «склеиваю» их в одну картинку (чтобы при наведении сразу все работало):
↑ это и есть
Итак, контейнеры (элементы списка
Правила для тега
Правила для тега
Для картинок явно должна быть указана одна из сторон (ширина, как правило). Размер второй стороны, если не указан в CSS, вычисляется браузером автоматически с учетом пропорций картинки.
Весь CSS:
В общем-то все готово, но CSS можно чуть-чуть сократить:
1. Подбираем цвета
Так как навигатор делается для использования в конкретном сайте, цвет нам уже известен:#0aaafd
. Этот цвет используется для обозначения ссылок. И он нам нужен для создания скругленных квадратов-подложек (один — для выделения текущей страницы, второй — для выделения при эффекте :hover
). Для подложки текущей страницы я использую 80% насыщенности цвета, то есть #3bbbfd
. Для подложки, появляющейся при эффекте :hover
я использую 20% насыщенности цвета, то есть #ceeeff
.2. Элементы навигатора
- Номер текущей страницы
- Номер одной из предыдущей-следующей страниц
- Предыдущая/следующая страница
- Первая/последняя страница
3. Переходим к верстке
HTML
Сначала нам надо создать html-разметку, с которой мы будем работать. Что из себя представляет навигатор? Список с определенным порядком нумерации. Под это определение подходит нумерованный список (ol
). Создаем разметку:
- 7
- 8
- 9
- 10
- 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;
}
Посмотреть на работающий навигатор