Dynamic Drive CSS Library- CSS Pagination Links

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Links & Buttons: Here

CSS Pagination Links

Author: Dynamic Drive

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:

<style type="text/css">

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

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

Code Info

Rate this code:

Date Posted: 08/30/2007

Revision History: Updated: 08/30/2007

Usage Terms: Click here

Your Comments (48)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 5 of 5 pages « First < 3 4 5

How would one go about putting the entire pagination in 2 different areas of the same web page?

Posted by Jeff on 11/16, 12:17 PM

thanks. shall try it.

Posted by K.Ramachandran on 11/29, 09:55 PM

Buyu, Medyum, Medyumlar, Cinler, Buyuler, Nazar, Fallar, Yildizname, Hipnoz, Telepati, Reankarnasyon, Horoskop, Yorum, Tarot, Palmistry, Numeroloji, Konusunda Lider Site..!

Posted by buyu on 12/31, 08:22 AM

thanks people !!

Posted by satyam on 01/01, 02:54 PM

To centralize them replace:

.pagination ul{
margin: 0;
padding: 0;
text-align: left; /*Set to "right" to right align pagination interface*/
font-size: 16px;
}

with

.pagination ul{
margin: 0;
padding: 0;
text-align: center; /*Set to "right" to right align pagination interface*/
font-size: 16px;
}

Posted by Beyblade on 03/15, 10:27 AM

i want to use this pagination in my intranet application but i don;t know how we initialize the page from 1, ,2 ,3, so tell me.

Posted by Dhirendra kumar on 04/12, 11:21 PM

Very nice pagination CSS. Hope I can use it in my new project ;)

Posted by Shreemani on 05/03, 11:17 PM

thank you for the script.

Posted by onedelacrus on 06/08, 04:07 AM

Comment Pages 5 of 5 pages « First < 3 4 5

Commenting is not available in this weblog entry.