This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Sunday, March 16, 2008

Perfect pagination style using CSS

This tutorial explains how to design a pagination for search results or more in general to split a long list of records in more pages. It's a question I often receive, so I decided to publish a very simple post which explains how to design a perfect pagination style using some lines of HTML and CSS code.


This tutorial also includes HTML/CSS code to implement a Flickr-like, Digg-like, Clean pagination style ready to use in your web projects.

Update as March 17, 2008: My friends Simone Saveri solved some issuse with IE6 and IE7.

Download this tutorial (original)

Download this tutorial (Simone Saveri version)



Typical pagination structure
The following image represents an example of a typical pagination structure:



In general you can identify four main elements:
- Previous/Next button (disabled)
- Current Active page
- Standard Page selector
- Previous/Next button (enabled)
You can design this structure using an HTML list (<ul>) which contains some <li> elements (one for each pagination element) and apply an ID to the <ul> list to assign a specific pagination style to the current list. Take a look at these tutorials for an explanation.


Flickr-like pagination: HTML Code
Image you want to design a Flickr-like pagination style which looks like this:



HTML code is very simple and you can reuse this structure in all pagination-style you want only changing the <ul> ID (in this case I added "pagination-flickr", in bold in the code below):

<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>

Now, you have only to redefine CSS element properties (ul, li, a).


Flickr-like pagination: CSS Code
Is very simple:

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-like pagination: HTML Code
Ok, now you want to design a Digg-like pagination style which looks like this:



From the previous tutorial copy and paste the HTML structure. You have only to change the <ul> ID ("pagination-digg" instead of "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-like pagination: CSS Code
CSS code is very similar to the previous Flickr-like example.You have only to change some attributes, and modify #pagination-flikr ID with #pagination-digg, but CSS pagination elements don't change:

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
}



Clean pagination style: HTML Code
If you like minimal, clean design this example shows how to design a very clean pagination style which looks like this:



HTML structure is the same of two previous examples. The only thing you have to change is the <ul> ID with "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>

Clean pagination style: CSS Code
CSS code for this kind of pagination style is:

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;
}


Download this tutorial

blog comments powered by Disqus
Amin said...

Great ! really like it awesome ..

Daniel said...

Antonio... You really have one of the best blogs on the www.

Keep up the good work. I love this blog.

Anonymous said...

Hi Antonio, thanks for this useful post. As usual!

Antonio said...

@daniel: don't exagerate!!! Thanks for your message! :))

Anonymous said...

Another gem! Good work!

Luke said...

Great job and useful tips as always. Keep up the good work.

See ya.

Anonymous said...

Why is it you choose to use an unordered list (ul) and not an ordered list (ol). Isn't there a definite order here so ol would be more appropriate?

Antonio said...

@anonymous: it's the same thing... why would be an ol more appropriated? In any case the first OL element li would be the button "<< previous", the second element would be the page 1, the third element the page 2....
The numeration is not respected! So there are not difference between an UL and OL list.

machinehuman said...

Nice post, well explained.
Congrats for the blog revamp.
All the best!

BTM said...

1) don't use ID's where you should use class names - paginations are commonly used before and after the content, so this wouldn't work (ok, it would, but it woudlnt validate)
2) class="previous" and class="previous-off" - why not use class="previous off" - it's easier to catch up to, and it's more cssish ;-)

typeof.net said...

Hi, thanks for this.
Just a question, it's broken on my IE7 (FF, Opera looks fine).
Do you have the same problem ?
Thanks

kimblim said...

Nice read, but why would even define a class for the non-active (previous-off) text? Why not just style the <a>-element when it's there and have a default style for the <li>? I'm not sure I'm explaining myself really well, but I hope you understand..

BTM said...

@kimblim: you can't do that - the padding is applied to the A element - so you can have the :hover efect and all the block have the same height. If you would like to try that without adding the padding to the A element, but instead using it on the LI it would fail becouse the A would then not take all the space in LI and gaps would be seen while hovering over them

Jonas Skoglund said...

I´m not sure how I found your blog but you keep publishing killer tutorials that saves a lot of developing time.

I think that the igg style is the best approach. It´s the fastest way to see where you are in the web site structure.

Antonio said...

@jonas: Thanks!

booster said...

you should possible encode the » symbols

watchOut said...

Hey dude, really nice website.

Watch out this dirty bastard :
http://www.pckult.net/tutoriaux/27-css/1166-creer-de-superbe-pagination-a-laide-de-html-et-css

cya

Bijon said...

great work. This is really very useful for me. And also day by day i become a fan of yours.

Thanks

Saidur

losted said...

Very cool man but I had to use "display: inline;" on my li tag to make it work on IE. Hope this help.

Tom said...

I've read your blog a few times, and I have to admit that your tutorials are great. Keep up the good work!

Jörg said...

thanks a lot for this implementations!

"losted" is right, i had to do the same (display:inline) with my "li", because iexplore gave an y-offset to every li-element, so there was this list of numbers diagonal placed over the screen... now it looks great!
thanks!

Mani said...

Very nice and simple! Great stuff!

Alex Iline said...

It` is easier to set float:left to li elements. And why indicate display:block to li, they are default block elements.

Thanks

MP3WizarD said...

If I want ul#pagination is align on horizontal center page

How do I increase code?

in_darkness® said...

As that I apply in the blogspot

Drupal Museum said...

Great article! Thanks!

Deepa said...

Hi,
Great tips.. but i am unable to see how i can incoporate this into a blogger blog.

say i have about 75 posts and set to show 2post per page, then do i have to add all the links manually ??..

I would sure love to include this in my blog.
Regards

Jackson said...

Fantastic tutorial but the source files (tutorial)are not downloadable.....?

Anonymous said...

you set LI's to float but don't clear them in any way?

Dennison Uy - Graphic Designer said...

I think using unordered lists are more appropriate, since you will normally be adding a "previous" and "first" link so using unordered links would not make any sense.

Webmonkey-in-Ireland said...

Great stuff Antonio. Bookmarked.

Kevin said...

That's handy, cheers!

Adelino said...

Really good article. Handy to do some webdesign jobs. Thanks for sharing you're knowledge with us.

Adelino Andrade

James said...

Good point about the <ol> vs <ul>. No need to use an incorrectly ordered list.

I agree with @BTM, though. It'd be easier to define an "off" class and then use class="previous off" and class="next off".

Holtkamp said...

Nice tutoral, only in the digg-like part your are missing some ';' in your css.

Lines 10,15,16,37,44

Please update it to prevent other users from wondering why it doesn't look similar out of the box.

Cheers

Anonymous said...

>>>>Great tips.. but i am unable to see how i can incoporate this into a blogger blog.

Use Subtext

Deepa said...

Thanks Anon..
I am not able undersntad..
what is "using subtext"
Can u plea give me links that explains this..
thnk you,
REgards

taylan said...

I like his post. There are great, useful and cleverly. Thank you.

Anonymous said...

Hi Antonio...

That really made my work lot more easy...
May God bless you

Egypt Web Design said...

Hola Antonio,

Thanks for sharing such a nice Article, i Really highly Appreciate it!

Egypt Web Design said...

thanks for this post and for tutorials files

beejamin said...

I think an ordered list is more appropriate - there`s no reason that the first item in an ordered list needs to correspond with the first page in the pagination list.

I read a good rule of thumb somewhere to help choose between OL and UL: "Would the meaning of the list be changed if you shuffled the items randomly?" If yes, use an OL, if no, use UL.

This guideline definitely points to an ordered list.

James said...

@beejamin: You make a good point. I'd never really thought of it that way, but it is the more "semantic" way to mark up lists. I've tended to use UL unless I needed visible numbering, a practice I will stop now. Thank you.

Anonymous said...

This is an excellent pagination solution and article! Thank you for all the info! I am also trying to center the pagination, but I can't center it using a div with center align property. Is there a trick for centering this as-is or do I need to make major modifications? I'm kind of new to CSS.

Anonymous said...

@Anonymous: Try "margin:auto;"!

kRiZ cPEc said...

Hmm, can I use this on blogger blogs?

JonBoy said...

Where do I put this code on my blogger blog?

Utah SEO said...

Great tutorial, it answered all my questions.

Anonymous said...

Thanks Antonio..I was looking for this for quite a long time..I browsed through web..I didn't find any articles like this..thank you so much for sharing this..

- Kenchappagoudra

Anonymous said...

Hi, i must commend your job. Only on word ... GREAT!!!. Please con you tell me how i can integrate it on my web site. You can PM on jennims@yahoo.co.uk.

Keep up the good work. I love this blog.

Anonymous said...

Hi, i must commend your job. Only on word ... GREAT!!!. Please con you tell me how i can integrate it on my web site. You can PM on jennimos@yahoo.co.uk.

Keep up the good work. I love this blog. Sorry i just ammended my mail address.

Anonymous said...

This is a great site ... good tution. It works well for me. http://cbtopsites.com/r/jennimos

Anonymous said...

Hi. Great job! I'm having problems with the clean pagination though. In i.e it puts a border around each element and in firefox, it totally screws up. Anyone else having the same problems?

junji said...

thanx "losted"!

ghprod said...

Really perfect pagination!!!

Bob_H said...

I concur with all previous comments - great, great tool.

I've incorporated it into my new UK Blog Directory using a Perl script to apply it to varying numbers of pages. If any of your visitors want to see this in action please go to http://www.ukblogdirectory.co.uk .

Unfortunately it needs more blogs to make it effective so please go ahead and record yours if it's UK-based.

Bob_H

Guizmo said...

Hi,

To center the pagination, remove the float:left and the display : block and replace with display : inline

Then just add text-align : center on your wrapper.

Cheers,

Guiz

Anonymous said...

this is fakhru

it is working fine thanks a lot
keep writing

Ajax-Php.org said...

Great work... We used it on our site. You can check it.ajax-php.org

film izle said...

thanks very nice paginatin styles..

oyun said...

This is a great site ... good tution.

www.javascriptdownload.net said...

Damn nice tutorial and pagination with 3 different styles.. I used it many of my sites and it looks really nice.Thanks a lot.

guncelhaber.info.tr said...

I agree with others... This is really a nice tutorial.It helped me to do nice paginations on my sites.Please keep writing this kind of tutorials thanks :)

magazarehberi.com said...

What a nice tutorial. Thank you for your help.We learned it with your help thank you :)

E-magazalar.com said...

I used digg-style pagination and its really nice and its working.I really love your site.Please keep writing.

autocarrepair.com said...

hi,

i also used your pagination script.Thank you for this nice tutorial.

halı yıkama said...

great!!!really thanks

SUNIT TREHAN said...

Good jobrother
it reallly helped me a lot

Erhan said...

Great pagination system, i use it

Oyunlar

PowerProNet said...

Hi, thanks for this.
Just a question, it's broken on my IE7 (FF, Opera looks fine).

a2i3s said...

Look so nice, i'll try this! Thanks for sharing :)

www.iis7tutorial.com said...

Thank you very much.You can check the pagination here.Its working nice...www.iis7tutorial.com

Sunayna said...

I have downloaded and used this tutorial on my application and it works perfectly.

Anonymous said...

Hi,

All of the pagination styles I've come across are the same. The styling I'm looking for is almost as same as yours, but with only minor change.

This is what I'm looking for:

I want the [Back] button to be positioned at the far left, and the [Next] button at the far right, but [numbers] to remain centered.

[Back] [1][2][3]4[5][6][7] [Next]


Cheers,
David

lovebird4all said...

anybody have asp .net example??

komik oyun said...

Great job and useful tips as always. Keep up the good work.

egyptian web designer said...

Thanks for sharing

Mario said...

Very Nice Thank you very much Antonio.

xxx men said...

Thanks
Nick and success

oyun said...

great! yes, veryy very good good

Utah Search Engine Optimization said...

Antonio...thanks for the code. The whole world should appreciate this. Thanks.

halı yıkama said...

I used digg-style pagination and its really nice and its working.I really love your site.Please keep writing.

Oyun said...

Hi Antonio, thanks for this useful post. As usual!
oyunlar

Anonymous said...

Great Work. GUys if you re IE user
change this;

#pagination-flickr li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
}

to this

#pagination-flickr li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
display:inline;
}

oyun indir said...

thank you great topic.

Oyun said...

great post thanks..
Oyun

Anonymous said...

Nice styles... Thanks

oyun said...

ı have followed your writing for a long time.really you have given very successful information.

pierre said...

thank you

Anonymous said...

great.

http://wwww.filmvizyon.net

film izle said...

great! i really like it.

iddaa said...

Antonio... You really have one of the best blogs on the www.

Keep up the good work. I love this blog

Oyun Oyna said...

Very good for news.
Thanks...

Biyografi said...

Good work

güzel nickler said...

thanks for code.

oanonimo said...

Obrigado! Thanks!

video izleme said...

than u very much for the informations

film izle said...

thank you man

film izle said...

thank you keep up good vorking

Anonymous said...

thank you great

http://www.byoral.com

film izle said...

woow, thanks..

travesti said...

Very good...thankyou grets

Oyun said...

Really very good site.I will be delayed to a Friend

film izle said...

Great.The best free offering blog.thank you.

cizgifilmoyunları said...

great site.ı like it.ı add bookmark this area : )

oyun oyna said...

thanks a lot for this topic.

Truman said...

Thanks for this useful tutorial! I'll use it alot!

Oyunlar said...

Really,very very good!

mario oyunları said...

thanks for post

kral oyunlar said...

Thanks a lot

dovus oyunları said...

thanks for "css using post"

masaüstü duvar kağıtları, manzara resimleri said...

Great ! really like it awesome ..

film izle said...

thanks good blog

Dizi izle said...

Waow
this is awesome.
Thank you very much.

giyim said...

thank you

takım elbise said...

great link

en güzel oyunlar said...

thanks for post

resim said...

Nice post, well explained.
Congrats for the blog revamp.
All the best!

web tasarım said...

Great ! really like it awesome ..

kurtlar Vadisi Gladio said...

Waow
this is awesome.
Thank you very much.

film izle said...

Why is it you choose to use an unordered list (ul) and not an ordered list (ol). Isn't there a definite order here so ol would be more appropriate?

halı yıkama said...

thanksss

Oyun said...

Really,wanderful!

oyunlar said...

very very good!

Divx Film izle said...

Thank You! I Love This Blog.

kral oyunlar said...

verey thanks

film izle said...

Another gem! Good work!

izmir temizlik firmaları said...

thanks for post...

Syam said...

I'm so glad, knowing this blog, It's helping my troublesome of my blog. thank

film izle said...

Nice post, well explained.

film izle said...

thank you for information

R3F3 said...

Its a nice and superb style for pagination but i want to know how can i apply this in php?

film izle said...

thanks a lot for this implementations!

Kabin said...

thank you.. kabin

العاب فلاش said...

great article thanks for share with us, really great work.

sinema izle said...

thanks a lot for this implementations!

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News