The following creates Google's pagination using CSS and a list. The trick is very simple: add a background image to the anchor and give it top padding. Everything else is floating and containing floats.
/* remove default properties from list and list items
the g class name is simply short for Google (note that
they use shortcuts to reduce bandwidth)
*/
ul.g, ul.g li { list-style: none; margin: 0; padding: 0; }
/* all the list items are floated */
ul.g li { float: left; }
/* these are the links to different pages */
ul.g li a {
/* this makes the whole area clickable */
display: block;
/* the text should be centered on the image */
text-align: center;
/* text, by default, is black, not a link color */
color: #000;
/* all of the backgrounds use these,
this is so that we don't have to repeat this part */
background-repeat: no-repeat;
background-position: top left;
}
/* these are the default list elements, the oooooo part */
ul.g li.o a {
padding-top: 26px;
width: 20px;
background-image: url(http://www.google.com/nav_page.gif);
}
/* this is the special case where it is the CURRENT page */
ul.g li.active a {
padding-top: 26px;
width: 20px;
background-image: url(http://www.google.com/nav_current.gif);
color: #900;
text-decoration: none;
}
/* this creates the NEXT (n) link */
ul.g li.n a {
width: 75px;
padding-top: 26px;
background-image: url(http://www.google.com/nav_next.gif);
}
/* this creates the PREVIOUS (p) link */
ul.g li.p a {
width: 75px;
padding-top: 26px;
background-image: url(http://www.google.com/nav_previous.gif);
}
/* containing floats */
ul.g:after { display: block; clear: both; content: "."; height: 0; overflow: hidden; visibility: hidden; }
* html ul.g { height: 0; }