Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

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


The CSS:


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  <  1 2 3 4 5 >

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

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

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  <  1 2 3 4 5 >

Commenting is not available in this weblog entry.
Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.