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

I am having trouble getting it to display in FireFox

I am using the

CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)

with the

Glossy Vertical Menu CSS

and the

CSS Indent Menu

It works in Internet Explore but not firefox?

Please help me :)
Posted by brian davis on 06/02, 12:13 AM
Hi, quick question for anybody out there

1: how do you increase the space between the box's

2: if the line of box's flows on to two or three lines (dont ask... I know its not meant to be used that way - just humour me, thanks!) how do you increase the line spacing between the line of box's - when I do it the run into each other!

Thanks - Robbert
Posted by Robbert on 06/10, 02:52 PM
I am kind of blur where to put the html code and the css one as well.. Can you kindly help me since im new to this CSS stuffs.. Thanks alot...
Posted by priya on 06/13, 03:24 AM
css Cursor examples , Properties , Attribute - -
Posted by dos komutları on 06/20, 01:07 AM
can you show the full example for this code?
please help me!! im not that good in css or html
Posted by ron on 07/27, 12:10 AM
Centering this is actually pretty easy.

Look for this:

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

Change where it says "text-align: left;" to "text-align: center;" or whatever, and you're done :D
Posted by Agnessa on 07/30, 10:45 AM
Thank you very much for sharing this code :-)

It's been a long of time looking for a code like this & i think i found it now:-D

Posted by Lillian on 08/01, 02:40 AM
Yeah, that's nice ;) thanks, I've used it on (in russian, but the pagination's there, when you browse) ;)
Posted by kovshenin on 08/10, 10:58 PM
Using the stock pagination_links(@pages) in the view, how do you get the class="currentpage" for the current link and not the others?
Posted by Scott R on 11/10, 08:21 AM
Cascading Style Sheets (CSS) web design lessons
Css link Properties Attributes - examles
Posted by css on 11/11, 01:57 PM

Comment Pages 4 of 5 pages « First  <  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.