Dynamic Drive CSS Library- CSS Pagination Links

CSS Library

CSS Layouts

Web Graphics

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

« 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 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 - - http://css-lessons.ucoz.com/cursor-css-examples.htm

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

regards!

Posted by Lillian on 08/01, 02:40 AM

Yeah, that's nice ;) thanks, I've used it on http://www.searchajax.ru (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

http://css-lessons.ucoz.com/link-css-examples-1.htm
http://css-lessons.ucoz.com/link-css-examples-2.htm

Posted by css on 11/11, 01:57 PM

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