Create Digg Style Pagination

If you have a website or blog it usaully generates pages. For this tutorial we will look at a easy and quick way to display these pages. If you don’t know what pagination is, it is listing page numbers and Next Page and Previous Page, it is usally put the at the bototm of a page, and is used for navigating the next page, previous page, or a certain page number. Now that we know what we are making, lets get started.

Below is our stylesheet code, to select it click the text area.

<br /> body {<br /> font-size: 100%;<br /> color: #333;<br /> background: #FFF;<br /> font-family: Arial, Helvetica, sans-serif;<br /> }<br /> #pages {<br /> padding: 3px;<br /> }<br /> #pages ul {<br /> list-style-type: none;<br /> }<br /> #pages li {<br /> float: left;<br /> display: inline;<br /> margin: 0 5px 0 0;<br /> display: block;<br /> }<br /> #pages li a {<br /> color: #88af3f;<br /> padding: 4px;<br /> border: 1px solid #ddd;<br /> text-decoration: none;<br /> float: left;<br /> }<br /> #pages li a:hover {<br /> color: #638425;<br /> background: #f1ffd6;<br /> border: 1px solid #85bd1e;<br /> }<br /> #pages li.nolink {<br /> color: #CCC;<br /> border: 1px solid #F3F3F3;<br /> padding: 4px;<br /> }<br /> #pages li.current {<br /> color: #FFF;<br /> border: 1px solid #b2e05d;<br /> padding: 4px;<br /> background: #b2e05d;<br /> }<br />

Now lets get to our HTML! You may notice that we use an unordered list. We use this because it is probaly the easiest for displaying this type of thing in an organized manner. To get our list items to match up inline, we use the css propertie “DISPLAY: INLINE”, this is commonly used with menus, navigation, and forms.

</p> <div id="pages"> <ul> <li class="nolink">« Previous Page</li> <li class="current">1</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="#">10</a></li> <li><a href="#">Next Page »</a></li> </ul> </div> <p>

Please note that any page that you would like to go to a anchor, and any page isn’t active, uses the class “nolink”. The Previous Page link uses this because we are on page #1 by default in this tutorial, so there isn’t any previous page to go to. Also note that any page that you are currently on it uses the class “current” on the list item.

For a full demo of what you just made click here.

Topics: CSS, Design, Web Development