Semantically Correct CSS Pagination

Here I show a method for generating pagination for search results and long list pages using
semantically correct HTML and CSS.

Pagination as HTML Markup

I’ve modeled pagination as an un-ordered list of links. There are three class declarations so that I can
identify the list “pagination” and the first and last items, “leader” and “last”
respectively.

	<ul class="pagination">
	    <li class="first"><a href="?offset=0" >
	      << First</a>&lt/li>
	    <li><a href="?offset=2"  ><</a></li>
	    <li class="leader">Page 3 of 111</li>
	    <li><a href="?offset=1"  >1</a></li>
	    <li><a href="?offset=2"  >2</a></li>
	    <li><strong>3</strong></li>
	    <li><a href="?offset=4" >4</a></li>
	    <li><a href="?offset=5" >5</a></li>
	    <li><a href="?offset=6" >></a></li>
	    <li class="last"><a href="?offset=110" >
	        Last >></a></li>
	</ul>

This markup is fairly straight forward to generate on the fly, but note that you’ll
need the total count of items so that you can generate the Page 1 of COUNT.

This markup is a lot easier to generate that similar markup built with tables.

The CSS To Style The Pagination

	/* Pagination
	--------------------------------- */

	ul.paginaton {
	     list-style: none;
	}

	ul.pagination li {
	      font-size: smaller;
	      float: left;
	      margin-left: 0px;
	      border-top: 1px solid #006699;
	      border-right: 1px solid #006699;
	      border-bottom: 1px solid #006699;
	      padding: 1px 3px 1px 3px;
	}

	ul.pagination li.last, ul.pagination li.last a {
	      background-color: #006699;
	      color: white;
	}

	ul.pagination li.first {
	      background-color: #006699;
	      color: white;
	      margin-left: 1px;
	}

	ul.pagination li.first a {
	      background-color: #006699;
	      color: white;
	}

	ul.pagination li.leader, ul.pagination leader a {
	      background-color: #006699;
	      color: white;
	}