Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web 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:

The CSS:

The HTML:

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 >

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


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