Structuring Pagination Dots
August 29th, 2011 Filed under: Tips and Tricks by Andrew
Pagination dots seem to have become all the rage. What started as a common interface element of mobile applications has worked it’s way into the web, especially often seen in mobile websites. This component seems fairly simple and straightforward to build, but features one deceptive problem. In this post I intend to explore the best approach in building this interface and provide a nice code base for easy reusability.
First let’s explore the markup we should use to construct the pagination dots. Since this is somewhat of a navigational element, the most obvious approach is to utilize an unordered list. Since this component may, or may not be interactive, the best option is to nest an anchor tag inside each list item for flexibility. Below is an outline of the overall HTML structure. I’ve also created a class name to denote the active dot and wrapped the unordered list with a div element that will render the bar housing the pagination component.
<div class="pg-dot-panel">
<ul class="pg-dots-row">
<li class="pg-dot">
<a href="#"></a>
</li>
<li class="pg-dot">
<a class="pg-active" href="#"></a>
</li>
<li class="pg-dot">
<a href="#"></a>
</li>
<li class="pg-dot">
<a href="#"></a>
</li>
<li class="pg-dot">
<a href="#"></a>
</li>
</ul>
</div>
Now on to the CSS markup. First of all, our pagination dots need to be centered on the page. We typically center elements by defining an explicit width and assigning it left and right auto margins. But here’s the problem, our pages can contain any number of dots, the number which is not known. Sure, we can use JavaScript to calculate the number of list items and then assign a width based on that amount, but the best solution should not be dependent on scripting and should be elegant enough to accommodate any number of dots. Now I would suggest you try to think about the possible solution for this little problem. When you have and idea, or are completely stumped, read on to learn how it is possible to center an element without applying an explicit width.
What I discovered when trying to solve this problem is that there is one HTML element that does not require a width in order to be centered. Want to know which one? It’s our good old friend the TABLE. Now you’re probably thinking, “Are you suggesting we use a table? Tables are evil!” No, not directly. Through the magic of CSS, we can apply a display of table to any element so that it emulates the behavior of a table. From here, the rest is easy. We can now use the same idea to style the inner elements and apply displays of tables cells to the list items. No need to use floats!
.pg-dots-row {
display:table;
margin:0 auto;
}
.pg-dot{
display:table-cell;
padding:0 7px;
}
.pg-dot a{
display:block;
height:14px;
width:14px;
background-color:#aaa;
-webkit-border-radius:7px;
-moz-border-radius:7px;
-o-border-radius:7px;
border-radius:7px;
}
Also note that with the power of CSS3, we can create the dots without using any images. If you only need to support the latest versions of modern browsers that are HTML5 enabled, then you are done. But, if you need to support IE 6, IE 7, or IE 8, you have yourself a whole lot more work to do. In that case we need to take a different approach to building these elements because earlier versions of IE do not support display table or table-cell, and IE 8 does not support border radius properties. The next approach is a little bit dirtier and not as elegant, but gets the job done. In this case we utilize the display inline-block property. This is a weird hybrid display that takes on the properties of a block, but lies inline such as a span element. Remember, span elements can be centered within a block level element, and they do not break onto new lines. With that said, here is our new CSS.
.pg-dots-row{
display:block;
height:14px;
margin:0;
text-align:center;
}
.pg-dot{
display:inline;
padding:0 7px;
vertical-align:top;
}
.pg-dot a{
display:inline-block;
height:14px;
width:14px;
background-color:#aaa;
overflow:hidden;
-webkit-border-radius:7px;
-moz-border-radius:7px;
-o-border-radius:7px;
border-radius:7px;
}
The main difference here is that the UL element stretches the width of the page instead of shrink wrapping. Keep this in mind if you are doing any visual styling. Also since we’re applying inline displays, our list items may contain inconsistent space between each item due to white space and line heights, as well as inconsistent vertical alignment. Usually playing around with line heights and font sizes remedies this. This is why I’ve used the following markup to kill any white space between each list item.
<ul class="pg-dots-row">
<li class="pg-dot"><a href="#">
</a></li><li class="pg-dot"><a href="#" class="pg-active">
</a></li><li class="pg-dot"><a href="#">
</a></li><li class="pg-dot"><a href="#">
</a></li><li class="pg-dot"><a href="#">
</a></li>
</ul>
Also we need a fallback for browsers that do not support border radius.
/* IE 6, IE 7, and IE 8 */
.ltie9 .pg-dot a{background:url(pg_dots.gif) no-repeat 0 0;}
.ltie9 .pg-dot a:hover{background-position:-32px 0;}
.ltie9 a.pg-active,
.ltie9 a.pg-active:hover{background-position:-16px 0;}
As a side note, I’ve used a modified version of Paul Irish’s browser targeting technique to target all versions of IE prior to 9.
<!--[if lt IE 9]><body class="ltie9"><![endif]--> <!--[if IE 9]><!--><body><!--<![endif]-->
This is a pretty neat method that does not rely on any JavaScript sniffing or CSS hacks. You can download all the HTML and CSS code for this tutorial from GitHub. You will find 3 HTML files, each suited to your specific needs. The file pgd_html5.html is for modern browsers only, which utilizes display table property. Use pgd_cross_browser.html if you need a cross browser solution. The file pgd_fallback.html is a hybrid that utilizes display table for modern browsers and display inline block for older browsers.
Leave a Reply
You must be logged in to post a comment.