Dynamic Drive CSS Library- CSS Pagination Links

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

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 3 of 5 pages « First < 1 2 3 4 5 >

brilliant

Posted by GD on 02/05, 07:14 AM

Excellent tutorial, one question. The page order counts right? SO why not use <ol> (order list) instead of <ul> (unordered list?)

-Brian

Posted by Brian Anderson on 02/29, 07:45 AM

Does not work in IE 7.0 on change zoom level(anything other than 100%).

<li> containers zoom correctly but text/link within looses position relative to container.

Posted by Ootay on 03/12, 09:30 AM

Couldn't you just use ul class instead of the divs?

Posted by Anna on 03/13, 12:35 PM

Use this to centralize buttons. Add this css to your ul tag.

<ul style="display:table; margin:0 auto;">

Posted by vikas batra on 03/17, 12:16 AM

Can the boxes be reduced in size?

Posted by Martin on 03/27, 02:21 AM

I used the script but the list markers always show.

Posted by Rudy Montigny on 04/07, 07:41 AM

Hi
Thanks for the css. But I had a problem , that the disablelink would not show the borders and when i checked with firebug, this part of css is not fired. I ran firebug with the Digg and saw that span was used instead of Li, is this normal or am i missing anything

Cheers

Posted by Bharat on 04/20, 12:29 PM

i'm thinking you guys could have a tutorial on it >_< like screenshots to teach newbies lmao like me *cough**cough* haha

Posted by kv on 05/12, 02:46 PM

what should be the link to "previous" and "next" links?

Posted by neel on 05/31, 06:23 PM

Comment Pages 3 of 5 pages « First < 1 2 3 4 5 >

Commenting is not available in this weblog entry.