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

I looked for this kind of pagination css script and finally I found it! Thank you!
Posted by Lorin on 09/01, 04:26 AM
In IE6, the current item is solid blue colour. I'd use cursor: pointer; instead.
Posted by Phil on 09/01, 02:10 PM
Good script. I wonder how I can centralize the buttons?
Posted by Jack on 09/09, 03:56 PM
This kind of pagination code will be on my website. I just love it!
Posted by on 09/10, 12:37 PM
To centralize, i put it all inside a table, with no borders and no spaicing att all, and then i move the table with buttons.. it works fine for me ^_^
Posted by Alex on 09/11, 11:49 PM
Or just use text-align: center;
Posted by Phil on 09/18, 03:54 AM
I'll use it my new project. Thanks
Posted by softnuggets on 09/18, 08:15 AM
Ok, where you show the code and you can expand or contract the window, I've been looking for something like that for awhile. Is the code for that somewhere on the site?
Posted by Kaleigh on 09/26, 04:00 PM
Great script! I think we can lose the div around it since ul is already a block-level elelement.
Posted by Jan M on 10/05, 03:29 AM
See a different version of the same here script here.
Posted by Indianames on 10/09, 01:50 AM

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

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