CSS tutorials for perfect pagination style

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

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

Flickr-like pagination: CSS Code
Is very simple:

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“):

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:

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

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

Download this tutorial