Сайт Романа ПарпалакаЗаметкиТехнологииВеб-разработкаСсылки-номера на соседние страницы

Ссылки-номера на соседние страницы

30 июня 2006 года

В некоторых случаях на страницах сайтов размещают номера соседних страниц, выполненные в виде ссылок. Например, разбиение больших статей, фотогалереи, форумы и т. д.

Обычно в HTML-коде пишут:

<a href="#">Назад</a>
<a href="#">1</a>
<a href="#">2</a>
3
<a href="#">4</a>
<a href="#">5</a>
<a href="#">Вперед</a>

Браузер отображает это так:

Назад 1 2 3 4 5 Вперед

Текущая страница (в данном случае это страница 3) не должна быть ссылкой. Таким образом мы видим положение открытой страницы относительно других страниц.

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

Положение вещей легко исправить с помощью CSS. Код ссылок слегка модифицируем, поместив их в отдельный блок:

<div class="links">
	<a href="#">Назад</a>
	<a href="#">1</a>
	<a href="#">2</a>
	<span>3</span>
	<a href="#">4</a>
	<a href="#">5</a>
	<a href="#">Вперед</a>
</div>

Задаем стили для блока:

/* ссылки расположим по центру */
.links {
	text-align: center;
}

/* отступы, зеленый фон, полужирный шрифт */
.links a, .links a:active,
.links a:visited, .links span {
	background: #074;
	color: #fff;
	padding: 1px 5px;
	margin: 0 5px;
	border: 1px solid #063;
	font-weight: bold;
	text-decoration: none;
}

/* текущая страница */
.links span {
	background: #fff;
	color: #000;
	border: 1px solid #333;
}

/* подсветка при наведении мышкой */
.links a:hover {
	background: #0a5;
	color: #fff;
	border: 1px solid #000;
}

Получается вполне симпатичный результат, пользоваться которым гораздо удобнее.

Поделиться

Комментарии

#1. 5 апреля 2007 года, 13:23. vich пишет:
дело пишешь офигенно смотрится))
#2. 11 февраля 2010 года, 13:09. пишет:
спасибо огромное! очень пригодилось
#3. 17 февраля 2010 года, 15:19. Михаил Еременко пишет:
Спасибо Роман!
Отличное решение.

Оставьте свой комментарий

Ваше имя:

Комментарий:

Для выделения используйте следующий код: [i]курсив[/i], [b]жирный[/b].
Цитату оформляйте так: [q = имя автора]цитата[/q] или [q]еще цитата[/q].
Ссылку начните с http://. Других команд или HTML-тегов здесь нет.

Сколько будет 66+4?