Pagination interface is really something we should learn at this point in time when it is still utilized by many great sites. This article will tell you how pagination interfaces—digg style—can be achieved, neatly and more semantically. The whole trick is credited to Dynamic Drive CSS Library.

In addition, pagination interface is sort of the trendy and in stuff today and if you are a self-proclaimed CSS lover and designer, this will make a handy addition to your skills and tricks. Perhaps, one of these days you will find yourself in the mood to make use of this kind of pagination system. And so reading this article can be very productive on your part.

Without wasting much of your time, as we all know your time is of the essence, the whole trick is set below:

The Trick

The codes here are, plain and simple, very neat and semantically correct as we did not use ones that tend to diminish these qualities. This is because we prefer to share love to readers which is blemish free and sublime so to speak.

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

Pagination links or interface for CSS is sure to give your site one cute feature. It is pretty simple and easy to do. If you can think of something nicer than the version above quoted, why not write it down here in the form of a comment. I think there is something nice there, right?

Tags: Digg Style CSS Pagination Interface