Dosta puta dok radim projekat desilo mi se da mi zatreba paginacija (a nije bila predviđena u mockup-u), a da tek onda razmišljam šta sve treba da iskodiram tj šta sve treba da ima (aktivno, neaktivno, boje, slike itd…). To vreme koje potrošim razmišljajući kako da sredim deo koji mi fali, može dosta da traje i da usled zamora i drugih okolnosti izostavim neki deo koji kasnije moram da popravim. Samo vraćanje na neke takozvane “završene delove” mogu dosta da koštaju samu firmu, kompaniju ili pojedinca.

Ovim želim da vam pokažem kako možete da stilizujete paginaciju za Vaš budući projekat.

Samim tim mozete da je iskopirate u svaki sledeći projekat i da za mnogo kraće vreme dobijete ono što ste pre toga (vi ili drugi dizajner) zamislili u Mockup-u. Takođe ću da Vam predoložim par preloga mockup-a za istu.

Prvo da krenemo sa predlozima mockup-a (da damo inspiraciju):

A sada da pokažemo kako možete da stilizujete uz pomoc CSS-a.

Prvo da krenemo sa običnim HTML kodom:

<div class=”manu”>
<span class=”disabled”>< Prev</span>
<span class=”current”>1</span>
<a href=”#”>2</a>
<a href=”#”>3</a>
<a href=”#”>4</a>
<a href=”#”>5</a>
<a href=”#”>6</a>
<a href=”#”>7</a>
…
<a href=”#”>199</a>
<a href=”#”>200</a>
<a href=”#”>Next ></a>
</div>

Kao što možete da vidite imamo tri klase (manu, disabled i current), svaka od njih ima svoju ulogu.
Prva klasa je: menu (ona nam daje okvir oko cele paginacije)
Druga klasa je: disabled (ona nam daje izgled dugmeta kada je neaktivno ili isključeno)
Treća klasa je: current (ona nam daje izgled dugmeta kada je aktivno, odnosno obaveštava posetilaca sajta na kojoj se trenutno strani nalazi)

a ovo je CSS kojim određujete boje i velicinu same paginacije tj dugmića u njoj.

.manu {
padding: 3px;
margin: 3px;
text-align: center;
}

.manu a {

border: #eee 1px solid;
padding-top: 2px 5px 2px 5px;
margin: 2px;
color: #036cb4;
text-decoration: none;
padding:2px 5px 2px 5px;
}

.manu a:hover {
border: #999 1px solid;
color: #666;
}

.manu a:active {
color: #666;
border: #999 1px solid
}

.manu .current {
border: #036cb4 1px solid;
padding:2px 5px 2px 5px;
font-weight: bold;
margin: 2px;
color: #fff;
background-color: #036cb4;
}

.manu .disabled {
border-right: #eee 1px solid;
padding:2px 5px 2px 5px;
border: #eee 1px solid;
margin: 2px;
color: #ddd;
}

Kako je ispalo na kraju, možete da vidite ovde! Kao i source kod možete skinuti odavde.