В колонках играет - Heaven Shall Burn - Forlorn skies
Настроение сейчас - -__-

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

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

[13:25:33] * xxx (MeGamIRC@xx-x-xx-xxx.xxxxxxx.dal.net.ru) has joined #xx.xxxxxxxxxxx.xxxxx.xx.xxxxx
[13:25:33] * ChanServ sets mode: +qo xxxxxxxx_cs xxxxxxxx_cs
[13:26:15] <xxxxxxxx_cs> привет
[13:26:25] <xxxxxxxx_cs> привет
[13:26:29] <xxxxxxxx_cs> как дела?
[13:26:36] <xxxxxxxx_cs> нормально
[13:26:38] <xxxxxxxx_cs> как сам?
[13:26:42] <xxxxxxxx_cs> да тьож ниче!
[13:26:43] <xxxxxxxx_cs> ))
[13:26:48] <xxxxxxxx_cs> че делаешь то?
[13:26:52] <xxxxxxxx_cs> да в кс рублю
[13:26:55] <xxxxxxxx_cs> а ты?
[13:27:06] <xxxxxxxx_cs> да я вот в чате переписываюсь )
[13:27:10] <xxxxxxxx_cs> пойдем гулять?
[13:27:12] <xxxxxxxx_cs> пойдем ))
[13:27:15] <xxxxxxxx_cs> ща зайду )
[13:27:17] <xxxxxxxx_cs> ок!
[13:27:29] <blacK^_^Neko> мощно....
[13:27:33] <blacK^_^Neko> дароф)
[13:27:40] * xxxxxxxx_cs уШоЛ ГуЛяТь Сам С СоБоЙ
[13:27:43] <blacK^_^Neko> тебя чудо трава не отпускает чтоль
[13:27:59] <xxxxxxxx_cs> он гуляет
[13:28:09] <blacK^_^Neko> окэ привет передавайте
[13:28:10] <blacK^_^Neko> )
[13:28:12] <xxxxxxxx_cs> ок

вчера этот гад обозвал меня роботом а сеня вапче накрылся)))

Not Found

The requested URL http://www.yandex.ru/ was not found on this server.

---

Apache/2.2.3 (Ubuntu) Server at www.yandex.ru Port 80

В колонках играет - Moonspell - Finisterra
Настроение сейчас - норм

теперь я точно знаю что я робот))) яндекс подтверждает это

В колонках играет - AKADO-Kuroi AIDA
долго лежал под столом от этого видео

http://www.youtube.com/watch?v=5mRZctu8IFU

В колонках играет - All That Remains - Empty Inside
Настроение сейчас - ботающее ^_^

ник.ру обновили у себя почтовый сервер... теперь он стал CommuniGate Pro Версия 5.1.... посмотрим что это нам даст) пока кроме усложнения интерфейса работы с почтой ниче не вижу)

Просто выносит мозг >.< песенка с альбома  Buiikikaesu wiki группы http://ru.wikipedia.org/wiki/Maximum_the_Hormone

it's alive >.