Настроение сейчас - -__-

В этой статье объясняется как создать ссылки страниц для результатов поиска, инфо систем и т.д..Этот вопрос мне задают очень часто, поэтому я решил написать простой пример того, как создать идеальный листинг, использую совсем немного 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;

}

Думаю сюда одного примера хватит...... кому интересно еще парочка HTML и CSS  у меня лежит тут