Pagination Links/Buttons

This tutorial will show you how to create pagination links/buttons that you see on websites such as digg.com.

CSS Code:

.pagination{
padding: 2px;
}

This sets the padding for our div.

.pagination ul{
margin: 0;
padding: 0;
text-align: left;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

This removes the default margins and padding of the unordered list.

.pagination li{
list-style-type: none;
display: inline;
padding-bottom: 1px;
}

This removes the styling for the list items and makes them line up one after another.

.pagination a, .pagination a:visited{
padding: 0 5px;
border: 1px solid #9aafe5;
text-decoration: none;
color: #2e6ab1;
}

This sets the styling for the links

.pagination a:hover, .pagination a:active{
border: 1px solid #2b66a5;
color: #000;
background-color: #ffffcc;
}

This sets the styling for the links when you hover over them and click them

.pagination li.currentpage{
font-weight: bold;
padding: 0 5px;
border: 1px solid navy;
background-color: #2e6ab1;
color: #FFF;
}

This sets the styling of the current page in view, in this example page 3.

.pagination li.disablepage{
padding: 0 5px;
border: 1px solid #929292;
color: #929292;
}

This sets the styling for pages that are not clickable such as the previous button when you are on page 1 and the next button when you are on the last page.

.pagination li.nextpage{
font-weight: bold;
}

This makes the next button bold.  This is purely optional but Digg use it and it makes it look neat.

* html .pagination li.currentpage, * html .pagination li.disablepage{
margin-right: 5px;
padding-right: 0;
}

This sets extra styling for the links/buttons that have no hyperlinks attached to them.  This is to fix some styling problems browsers below IE6.

HTML Code:

<div class="pagination">
<ul>
<li class="disablepage">« previous</li>
<li class="currentpage">1</li>
<li><a href="http://skeletorscorpse.com/joomla/#">2</a></li>
<li><a href="http://skeletorscorpse.com/joomla/#">3</a></li>
<li><a href="http://skeletorscorpse.com/joomla/#">4</a></li>
<li><a href="http://skeletorscorpse.com/joomla/#">5</a>...</li>
<li><a href="http://skeletorscorpse.com/joomla/#">9</a></li>
<li><a href="http://skeletorscorpse.com/joomla/#">10</a></li>
<li class="nextpage"><a href="http://skeletorscorpse.com/joomla/#">next »</a></li>
</ul>
</div>

---