Dynamic Drive CSS Library- CSS Pagination Links

CSS Library: Links & Buttons: Here

CSS Pagination Links

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 (34)

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

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

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