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 structureThe 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 CodeImage 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 CodeIs 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 CodeOk, 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 CodeCSS 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 CodeIf 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 CodeCSS 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
XHTMLiT
