How to design a nice pagination style for your website
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)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.
- Current Active page
- Standard Page selector
- Previous/Next button (enabled)
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> <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>
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{
#pagination-flickr a{
#pagination-flickr .previous-off,
#pagination-flickr .next-off {
#pagination-flickr .next a,
#pagination-flickr .previous a {
#pagination-flickr .active{
#pagination-flickr a:link,
#pagination-flickr a:visited {
#pagination-flickr a:hover{
#pagination-flickr li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
}font-size:11px;
list-style:none;
#pagination-flickr a{
border:solid 1px #DDDDDD;
margin-right:2px;
}margin-right:2px;
#pagination-flickr .previous-off,
#pagination-flickr .next-off {
color:#666666;
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}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;
} border:solid 1px #FFFFFF;
#pagination-flickr .active{
color:#ff0084;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}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;
}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> <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>
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{
#pagination-digg a{
#pagination-digg .previous-off,
#pagination-digg .next-off {
#pagination-digg .next a,
#pagination-digg .previous a {
#pagination-digg .active{
#pagination-digg a:link,
#pagination-digg a:visited {
#pagination-digg a:hover{
#pagination-digg li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
margin-right:2px;
}font-size:11px;
list-style:none;
margin-right:2px;
#pagination-digg a{
border:solid 1px #9aafe5
margin-right:2px;
}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;
}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;
}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;
}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> <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>
Clean pagination style: CSS Code
CSS code for this kind of pagination style is:
ul{border:0; margin:0; padding:0;}
#pagination-clean li{
#pagination-clean li, #pagination-clean a{
#pagination-clean .previous-off,
#pagination-clean .next-off {
#pagination-clean .next a,
#pagination-clean .previous a {
#pagination-clean .active{
#pagination-clean a:link,
#pagination-clean a:visited {
#pagination-clean a:hover{
#pagination-clean li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
}font-size:11px;
list-style:none;
#pagination-clean li, #pagination-clean a{
border:solid 1px #DEDEDE
margin-right:2px;
}margin-right:2px;
#pagination-clean .previous-off,
#pagination-clean .next-off {
color:#888888
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}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;
} border:solid 1px #FFFFFF;
#pagination-clean .active{
color:#00000
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}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;
}display:block;
float:left;
padding:3px 6px;
text-decoration:none;
#pagination-clean a:hover{
text-decoration:none;
} Download this tutorial
Great ! really like it awesome ..
Antonio... You really have one of the best blogs on the www.
Keep up the good work. I love this blog.
Hi Antonio, thanks for this useful post. As usual!
@daniel: don't exagerate!!! Thanks for your message! :))
Another gem! Good work!
Great job and useful tips as always. Keep up the good work.
See ya.
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?
@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.
Nice post, well explained.
Congrats for the blog revamp.
All the best!
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 ;-)
Hi, thanks for this.
Just a question, it's broken on my IE7 (FF, Opera looks fine).
Do you have the same problem ?
Thanks
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..
@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
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.
@jonas: Thanks!
you should possible encode the » symbols
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
great work. This is really very useful for me. And also day by day i become a fan of yours.
Thanks
Saidur
Very cool man but I had to use "display: inline;" on my li tag to make it work on IE. Hope this help.
I've read your blog a few times, and I have to admit that your tutorials are great. Keep up the good work!
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!
Very nice and simple! Great stuff!
It` is easier to set float:left to li elements. And why indicate display:block to li, they are default block elements.
Thanks
If I want ul#pagination is align on horizontal center page
How do I increase code?
As that I apply in the blogspot
Great article! Thanks!
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
Fantastic tutorial but the source files (tutorial)are not downloadable.....?
you set LI's to float but don't clear them in any way?
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.
Great stuff Antonio. Bookmarked.
That's handy, cheers!
Really good article. Handy to do some webdesign jobs. Thanks for sharing you're knowledge with us.
Adelino Andrade
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".
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
>>>>Great tips.. but i am unable to see how i can incoporate this into a blogger blog.
Use Subtext
Thanks Anon..
I am not able undersntad..
what is "using subtext"
Can u plea give me links that explains this..
thnk you,
REgards
I like his post. There are great, useful and cleverly. Thank you.
Hi Antonio...
That really made my work lot more easy...
May God bless you
Hola Antonio,
Thanks for sharing such a nice Article, i Really highly Appreciate it!
thanks for this post and for tutorials files
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.
@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.
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: Try "margin:auto;"!
Hmm, can I use this on blogger blogs?
Where do I put this code on my blogger blog?
Great tutorial, it answered all my questions.
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
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.
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.
This is a great site ... good tution. It works well for me. http://cbtopsites.com/r/jennimos
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?
thanx "losted"!
Really perfect pagination!!!
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
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
Post a Comment