CSS Pagination Links

Updated: Aug 30th, 07. Fixed issue in IE7 where select links appear too close together.

Inspired by the pagination interface you see at the footer of Digg.com, this is our version of a CSS pagination links bar, digg style. The links are list based for a cleaner and more semantically approach (in our opinion). The bar itself can easily be left or right aligned, by modifying the "text-align" attribute.

Demo:

« previous
1
2
3
4
5
6
7
8
9...
15
16
next »

The CSS:

Select Code Expand

<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.pagination{
padding: 2px;
}
.pagination ul{
margin: 0;
padding: 0;
text-align: left; /*Set to "right" to right align pagination interface*/
font-size: 16px;
}
.pagination li{
list-style-type: none;
display: inline;
padding-bottom: 1px;
}
.pagination a, .pagination a:visited{
padding: 0 5px;
border: 1px solid #9aafe5;
text-decoration: none;
color: #2e6ab1;
}
.pagination a:hover, .pagination a:active{
border: 1px solid #2b66a5;
color: #000;
background-color: #FFFF80;
}
.pagination a.currentpage{
background-color: #2e6ab1;
color: #FFF !important;
border-color: #2b66a5;
font-weight: bold;
cursor: default;
}
.pagination a.disablelink, .pagination a.disablelink:hover{
background-color: white;
cursor: default;
color: #929292;
border-color: #929292;
font-weight: normal !important;
}
.pagination a.prevnext{
font-weight: bold;
}
</style>

The HTML:

Select Code Expand

<div class="pagination">
<ul>
<li><a href="#" class="prevnext disablelink">« previous</a></li>
<li><a href="#" class="currentpage">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a>...</li>
<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
<li><a href="#" class="prevnext">next »</a></li>
</ul>
</div>