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 2 of 5 pages < 1 2 3 4 > Last »

Finally - i have been looking for days now. I have finally found what i needed!!! Thank you dynamicdrive.com!!!

Posted by Ogaden on 10/17, 12:05 PM

greate, nice for news archive

Posted by projektowanie stron on 10/17, 12:15 PM

This is a great little script. Perfect for an alphabetical index! Appreciate the script, and keep up the great work in the CSS Library.

Posted by Music City Madman on 10/29, 12:10 PM

How can i set the buttons to link up to the 100's... 1-99 works awesome then after that it just sets back to 10 and up....? Any help on this would be AWESOME!!!!

Posted by gnome on 11/12, 03:02 PM

I'm sorry guys but I don't understand how it work. I'm a very dummy on php and I would like a little bit of explanation to understand how I could use it.

Please, don't explain me shortly!

Thank you!

Posted by Carlo on 11/18, 03:32 PM

This Script is very nice and wonderful

Posted by Paramesh on 12/18, 11:05 PM

I Have tested in IE 6 it is fine.

Posted by Raj on 12/24, 11:46 PM

to center text-align:center doesn't work :( because the with of the ul is 100%, Also I dont want to have a fix ul in case I only have 2 result pages.
I dont want to use tables. is there another way? please show me the way...thanks, I've spend a bit of time on this and I cant get it working.

Posted by Charlie on 01/15, 11:11 PM

As always, I know I can find great examples on this site! Cheers

Posted by AntonJamm on 01/31, 01:58 AM

Hi,

Yes, Great script! I Us it for my site

http://www.StagTube.com

Posted by Mike on 02/02, 01:49 AM

Comment Pages 2 of 5 pages < 1 2 3 4 > Last »

Commenting is not available in this weblog entry.