In Golgota

This is one way to build a pager using CSS. A pager is most of the time composed of a Previous page link, links to Pages and a Next page link. It can also have First and Last page links. This can be boring to build dynamically and to have elements aligned correctly, we often use tables. If we could use html lists, this would make the pager more accessible and easier to place in a modern layout (Web 2.0 anyone ?). Well, here is the solution I came up with.

First the markup your pager will generate:

<ul style="pager">
<li><a href="/0"><<</a></li>
<li><a href="/1"><</a></li>
<li><a href="/1">1</a></li>
<li>2</li>
<li><a href="/3">3</a></li>
<li><a href="/4">4</a></li>
<li><a href="/5">5</a></li>
<li><a href="/6">6</a></li>
<li><a href="/3">></a></li>
<li><a href="/6">>></a></li>
</ul>

It's pretty straightforward.

Now, the css

ul.pager {
	margin: 0;
	padding: 0 ;
	list-style: none;
	text-align: center;
	white-space:nowrap;
}
ul.pager li {
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline;
}

Feel free to remove the white-space:nowrap if you don't mind it if your links wrap when the container is too small to fit them all on one line. The text-align:center is here so that the links are centered in the ul container. The trick really consists in making the li elements inline instead of blocks as they usually are.

Result

• <<
• <
• 1
• 2
• 3
• 4
• 5
• 6
• >
• >>

Bitmap rendering in Firefox

I am going to elaborate on this pretty soon and show how such a simple pager can be styled easily. In the meantime, feel free to post your comments about this technique and its compatibility in other browsers.

Matthijs @ 19.03.2006 12:07 CET
Nice tip. A list is definately the way to go.

One typo though: style="pager" should be class="pager".

Evert @ 28.03.2006 12:43 CET
Whats the point of using a list?

Matthijs @ 29.03.2006 08:04 CET
@evert: well, because it is a list? What else would it be?

No new comments allowed (anymore) on this post.