View Slideshow [1]

• < Prev
• Next >

What it should look like

---

It's not often I write a web development tutorial, but I came up with this today for styling pagination, and I thought I might share. It uses:

• inline-block
• a splash of negative margins
• a sprinkling of negative word-spacing (although kind of optional, as I'll explain)
• and a couple of IE only rules

I'm sure it's already been done before by someone, but I thought I'd share anyhow.

OK. So. The mark-up:

<ul class="pagination">
<li class="first">&laquo; First</li>
<li class="prev">&lsaquo; Prev</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>...</li>
<li><a href="#">10</a></li>
<li class="next"><a href="#">Next &rsaquo;</a></li>
<li class="last"><a href="#">Last &raquo;</a></li>
</ul>

And the CSS:

.pagination { text-align: center; margin: 20px 0; word-spacing: -1em; }
.pagination li { display: inline-block; list-style: none; font: bold 12px/13px Arial, Helvetica, sans-serif; padding: 5px 9px; color: #999; background: #eee; word-spacing: normal; margin: 0 1px; }
.pagination li.first { margin-right: 10px; }
.pagination li.last { margin-left: 10px; }
.pagination li.current { background: #66CC00; color: #fff; }
.pagination li a { display: inline-block; padding: 5px 9px; margin: -5px -9px; text-decoration: none;}
.pagination li a,
.pagination li a:link,
.pagination li a:visited,
.pagination li a:active { background: #666; color: #fff; }
.pagination li a:hover,
.pagination li a:focus { background: #333; }
.pagination li,
.pagination li a {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

Specific CSS for IE6 and 7

.pagination li,
.pagination li a { display: inline; }

Specific CSS for IE7

.pagination li a { margin: -7px -9px; float: left; }

You'll notice I've thrown a little CSS3 in there also, just to be trendy :P

I mentioned that word-spacing was optional. If you don't wish to use it, you need to ensure that all the li tags 'touch'. Those who remember writing mark-up for IE5 may remember having to do something similar to over-come a bug of some sort. So, you would remove the negative word-spacing value and write the html thus:

<ul class="pagination">
<li class="first">&laquo; First</li
><li class="prev">&lsaquo; Prev</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>...</li
><li><a href="#">10</a></li
><li class="next"><a href="#">Next &rsaquo;</a></li
><li class="last"><a href="#">Last &raquo;</a></li
></ul>

Note the 'tocuhing' start and end tags.

That's it! Hope it proves useful to some of you :)