Gordonmac Dot Com

Previous and next “pagination” is a fairly common design element found on sites. As the name suggests, it’s a simple navigation structure designed to allow users to move forward to the next, or return to the previous page in a sequence of documents. The purpose of this type of navigation is simple; it allows the author to break a large amount of information into smaller pieces instead of displaying a massive amount of information on the same page.

This little tutorial is an example of the HTML markup and CSS which could be used to make this type of navigation look nice, and also user friendly. Here is what we’ll achieve.

The HTML markup

For this mini navigation we will use a simple unordered list with two list items. One for the link to the previous page, and one for the link to the next page in the sequence:

 <ul id="pagination"> <li class="pagination-next"><a href="#" rel="next">Next</a></li> <li class="pagination-prev"><a href="#" rel="prev">Previous</a></li> </ul> 

That’s simple enough. We’ve all seen an unordered list before. However, I’d like to point out two things which I consider to be important in this instance:

1. I could have placed the link to the previous page first, but assuming that the user is logically moving their way through the paginated content, it’s safe to also assume that they have already viewed the previous page. Therefore placing the next page link first in the list makes the most sense.
2. You will notice that I have added rel attributes to the anchors. Rel attributes convey relationships between the current page and the page that the URI points to.

Minor details, I know, but worth mentioning.

The CSS

The CSS required to style our page navigation is very simple. A few floats, background images and nothing complex.

First up, let’s give the basic styles to the unordered list element.

 #pagination { font-size : .8em; list-style-type : none; margin : 0; overflow : hidden; padding : 2px 0; text-transform : uppercase } 

Updated: I had previously used overflow : auto;, but it seems that this generates horizontal scroll bars in Firefox 2 when you click on the links. Fixed now thanks to Richard.

Again, this is quite simple to understand. We set the font size, remove the bullets from the list, reset margin and padding and set the text to display in uppercase. You will also notice that I have added overflow : hidden; to the list of rules. The reason for this quite cool. We will float the links inside the unordered list. Because they will be floated we have to find a way to ensure that any content coming after the pagination links does not collapse inside the floated links. The overflow rule ensures this without us having to use any clearing elements after the floated elements.

Now we will do something to the list items.

 #pagination li { display : inline } 

List items are block-level elements. This means that without the intervention of CSS they would appear on individual lines. Setting the to display inline allows us to place our next and previous links on the same line.

Let’s now add some basic link styling.

 #pagination a,#pagination a:visited { color : #999; text-decoration : none } #pagination a:hover { color : #000; text-decoration : none } 

I chose to remove the link underlines with this rule, but you can replace them if you like.

Now, let’s float our links. Previous page link to the left, and next page link to the right:

 #pagination .pagination-prev a { background : url(previous.gif) no-repeat left center; float : left; padding-left : 20px } #pagination .pagination-next a { background : url(next.gif) no-repeat right center; float : right; padding-right : 20px; text-align : right } 

You’ll notice that I also added the arrow images as backgrounds to the links. The padding is simply to stop the text appearing on top of the images. The float directions simply move each element to the defined edge of the parent element.

You can view the finished navigation and download the source code and image files.