В этой статье объясняется как создать ссылки страниц для результатов поиска, инфо систем и т.д..Этот вопрос мне задают очень часто, поэтому я решил написать простой пример того, как создать идеальный листинг, использую совсем немного HTML и CSS кода.

К статье так же прилагается HTML/CSS с примерами оистингов страниц сайтов Flickr, Digg, чистый код, готовый к использованию в ваших проектах..

Simone Saveri решил некоторые проблемы с IE6 и IE7.

Скачать пример (Simone Saveri version)



Типичная структура разбивки на страницы
На картинке ниже приведен пример типичного представления списка страниц:

Следует выделить четыре основных элемента:

• Кнопки Предыдущая/Следующая(блокированные)
• Текущая страница
• Остальные страницы
• Кнопки Предыдущая/Следующая (активные)

Создать такую структуру можно с помощью списков HTML (<ul>) которые содержат несколько элементов <li> (один для каждого элемента разбивки страниц) и использовать ID для тегов <ul>, чтобы связать список с необходимым для него стилем. Рассмотрим для примера следующие коды.


Flickr список: HTML код
давайте представим что нам надо создать список страниц как на сайте Flickr, который выглядит вот так:

HTML код очень прост, и вы можете использовать такую структуру для списка <ul> присвоив ему соответствующий ID (в этом примере я поставил "pagination-flickr"):

<ul id="pagination-flickr">

<li class="previous-off">«Previous</li>
 <li class="active">1</li>
 <li><a href="?page=2">2</a></li>
 <li><a href="?page=3">3</a></li>
 <li><a href="?page=4">4</a></li>
 <li><a href="?page=5">5</a></li>
 <li><a href="?page=6">6</a></li>
 <li><a href="?page=7">7</a></li>
 <li class="next"><a href="?page=2">Next »</a></li>

</ul>

Теперь осталось только дописать CSS свойства для элементов (ul, li, a).


Flickr список: CSS код

ul{border:0; margin:0; padding:0;}
 
 #pagination-flickr li{

border:0; margin:0; padding:0;
 font-size:11px;
 list-style:none;

}
 #pagination-flickr a{

border:solid 1px #DDDDDD;
 margin-right:2px;
}
 #pagination-flickr .previous-off,
 #pagination-flickr .next-off {

color:#666666;
 display:block;
 float:left;
 font-weight:bold;
 padding:3px 4px;
}
 #pagination-flickr .next a,
 #pagination-flickr .previous a {

font-weight:bold;
 border:solid 1px #FFFFFF;
} 
 #pagination-flickr .active{

color:#ff0084;
 font-weight:bold;
 display:block;
 float:left;
 padding:4px 6px;
}
 #pagination-flickr a:link,
 #pagination-flickr a:visited {

color:#0063e3;
 display:block;
 float:left;
 padding:3px 6px;
 text-decoration:none;
}
 #pagination-flickr a:hover{

border:solid 1px #666666;
}

Digg- подобный список: HTML код
Теперь попробуем сделать список в стиле Digg:

Берем HTML код из предыдущего примера, меняем у тега <ul> идентификатор ("pagination-digg" вместо "pagination-flickr"):

<ul id="pagination-digg">

<li class="previous-off">«Previous</li>
 <li class="active">1</li>
 <li><a href="?page=2">2</a></li>
 <li><a href="?page=3">3</a></li>
 <li><a href="?page=4">4</a></li>
 <li><a href="?page=5">5</a></li>
 <li><a href="?page=6">6</a></li>
 <li><a href="?page=7">7</a></li>
 <li class="next"><a href="?page=2">Next »</a></li>

</ul>

Digg- подобный список: CSS код
CSS очень похож на код из предыдущего примера, необходиму только изменить некоторые атрибуты, и изменить #pagination-flikr идентификатор на #pagination-digg, но оставить CSS :

ul{border:0; margin:0; padding:0;}
 
 #pagination-digg li{

border:0; margin:0; padding:0;
 font-size:11px;
 list-style:none;
 margin-right:2px;

}
 #pagination-digg a{

border:solid 1px #9aafe5 
 margin-right:2px;
}
 #pagination-digg .previous-off,
 #pagination-digg .next-off {

border:solid 1px #DEDEDE
 color:#888888 
 display:block;
 float:left;
 font-weight:bold;
 margin-right:2px;
 padding:3px 4px;
}
 #pagination-digg .next a,
 #pagination-digg .previous a {

font-weight:bold;

} 
 #pagination-digg .active{

background:#2e6ab1;
 color:#FFFFFF;
 font-weight:bold;
 display:block;
 float:left;
 padding:4px 6px;
}
 #pagination-digg a:link,
 #pagination-digg a:visited {

color:#0e509e 
 display:block;
 float:left;
 padding:3px 6px;
 text-decoration:none;
}
 #pagination-digg a:hover{

border:solid 1px #0e509e
}

Минималитичный стиль: HTML код
Если вы сторонник минимализма, то обратите внимание на этот пример:

HTML такой же как и в двух предыдущих примерах, только опять меняем идентификатор на "pagination-clean":

<ul id="pagination-clean">

<li class="previous-off">«Previous</li>
 <li class="active">1</li>
 <li><a href="?page=2">2</a></li>
 <li><a href="?page=3">3</a></li>
 <li><a href="?page=4">4</a></li>
 <li><a href="?page=5">5</a></li>
 <li><a href="?page=6">6</a></li>
 <li><a href="?page=7">7</a></li>
 <li class="next"><a href="?page=2">Next »</a></li>

</ul>

Минималитичный стиль: CSS код
CSS для этого стиля:

ul{border:0; margin:0; padding:0;}
 
 #pagination-clean li{

border:0; margin:0; padding:0;
 font-size:11px;
 list-style:none;

}
 #pagination-clean li, #pagination-clean a{

border:solid 1px #DEDEDE 
 margin-right:2px;
}
 #pagination-clean .previous-off,
 #pagination-clean .next-off {

color:#888888 
 display:block;
 float:left;
 font-weight:bold;
 padding:3px 4px;
}
 #pagination-clean .next a,
 #pagination-clean .previous a {

font-weight:bold;
 border:solid 1px #FFFFFF;
} 
 #pagination-clean .active{

color:#00000 
 font-weight:bold;
 display:block;
 float:left;
 padding:4px 6px;
}
 #pagination-clean a:link,
 #pagination-clean a:visited {

color:#0033CC 
 display:block;
 float:left;
 padding:3px 6px;
 text-decoration:none;
}
 #pagination-clean a:hover{

text-decoration:none;
}