Dizajn CSS numeratora stranica (pagination)

Numeriranje stranica (eng. pagination) dodatna je navigacija koja služi za kretanje kroz članke, slike, dijelove članaka i općenito internet stranice. Način na koji je organizirano numeriranje stranica može olakšati posjetiteljima snalaženje. Dolaskom CSS stilova olakšala se i ubrzala izrada i održavanje stila za numeratore stranica.

Savjeti za dizajn numeratora stranica

• Neka element numeratora stranica bude vidljiv i intuitivan
• Ostavite dovoljno mjesta za "klik"
• Posebno istaknite stranicu na kojoj se posjetitelj trenutno nalazi
• Neka budu dostupni linkovi na Prethodnu stranicu i Sljedeću stranicu
• Koristite linkove na Početak i Kraj navigacije
• Postavite linkove Početak i Kraj na krajeve navigacije

CSS kod stila za numerator stranica

a.pagenav {
background:#FFFFEC none repeat scroll 0%;
border: 1px solid #85AC1E;
color: #85AC1E;
padding: 3px 5px 3px 5px;
text-transform: uppercase;
font-weight: normal;
line-height: 60px;
}

Budući su numeratori stranica linkovi na prethodne ili sljedeće stranica potrebno je oblikovati stil za link. Odaberite hrvatski ili engleski naziv koji vas podsjeća na ovaj oblik navigacije. Stilu linka potrebno je za izgled kao na blog.metuzalem stranicama dodati pozadinu (u ovom slučaju to je blago žuta boja), okvir širine 1 pixela poslužiti će dojmu da se radi o gumbu, boju slova podesite vizualnom identitetu stranica.

a:hover.pagenav {
background:#666666 none repeat scroll 0%;
border: 1px solid #85AC1E;
color:#FFFFEC;
}

Kako bi se dobio dojam da se prelaskom preko "gumba" numeratora stranica taj link ističe potrebno je izmijeniti elemente koji su maloprije u a.pagenav stilu bili definirani. Prelaskom preko brojeva navigacije mijenja se njegova pozadina na tamniju, a boja slova na svjetliju kako bi se istakla njegova važnost.

Komentari  

 

+1 # RotanaennaNon Ponedjeljak, 15 Veljača 2010

Fantastic, I didn't heard about that up to now. Cheers!!

 

 

0 # pokerice Ponedjeljak, 08 Ožujak 2010

I read this forum since 2 weeks and now i have decided to register to share with you my ideas. :)

 

 

0 # tajana Utorak, 09 Ožujak 2010

hello Ponerice!
Unfortunately registration is only available to Metuzalem clients which have access to manuals and other stuff on this site.

 

 

0 # AmesseftDaf Srijeda, 10 Ožujak 2010

Hello! Can you tell me how i can register mail at google google http://google.com

 

 

0 # tajana Srijeda, 10 Ožujak 2010

AmesseftDaf, try gmail.google.com

 

 

0 # Hatphonrytora Petak, 16 Travanj 2010

Hello im new to this forum, Iv been looking around for abit as a guest & thought id pop in and introduce myself.

watch watch family guy online for free quick

 

 

+2 # trial offer Subota, 17 Travanj 2010

Thanks for letting us know about this. I appreciate your effort a lot.

 

 

0 # tajana Ponedjeljak, 19 Travanj 2010

txs for commenting. Hope the article helps!

 

 

+1 # lebron james dunks Nedjelja, 25 Travanj 2010

Thank you very much for the information great post, found it on Yahoo.

 

 

0 # tajana Nedjelja, 25 Travanj 2010

Thank you for reading :) i guess i'll have to start publishing on english too

 

 

0 # reenuescume Utorak, 20 Srpanj 2010

Hi-ya people, dandy message board I have found It exceedingly useful and it has helped me a lot
I hope to be able to give something back & help other users like this chat board has helped me

_______________ __
jailbreak iphone 3.1.3

 

 

0 # mbt shoes Utorak, 03 Kolovoz 2010

thank you

 

Obnovite listu komentara
RSS feed za komentare.

Unos novog komentara

Ime (obavezno)

E-mail (obavezno)

Obavijesti me o odgovorima na ovaj komentar

Pošalji (Ctrl+Enter)

Odustani

JComments