Normally, it is pretty common to use the ul lists. Ul means unordered and, well, most of the time you can say that items are unordered. But there are situations when you really could use ol lists, which means ordered lists. Especially when it comes to accessibility.
In this post, we style an ordered list to inform the user of his status in e.g. a registration process. This is a thing you can do also with divs & co., but it has something nice if done with ordered lists. Really.
<ol>
<li>Fill out registration form and submit it</li>
<li>Verify your e-mail address with the e-mail you will receive</li>
</ol>
This is our basic list. Looks pretty ordered, doesn’t it? Now we replace the numbers with our own graphics to make the whole thing look a bit better. We have to assign a different class to each list element, because we want every element to have a different number. You have to set list-style-type: none to get the default numbers out of the way. Then you can add a background-image to each class. Remember to choose correct values for padding and margin, so that the text does not overlay the images.
<ol>
<li class="step1">Fill out registration form and submit it</li>
<li class="step2">Verify your e-mail address with the e-mail you will receive</li>
</ol>
CSS:
ol {
list-style-type: none;
}
ol li {
font: bold 14px arial,helvetica,sans-serif;
background: #eee no-repeat;
margin: 5px;
padding: 5px 5px 5px 34px;
}
ol li.step1 {
background-image: url(step1.gif);
}
ol li.step2 {
background-image: url(step2.gif);
}
Because we always want to guide visitors with special visual effects, let’s highlight the current status. We simply add another class to the appropriate list element. The normal text has to be grey, only the current item gets black text.
<ol>
<li class="step1 active">Fill out registration form and submit it</li>
<li class="step2">Verify your e-mail address with the e-mail you will receive</li>
</ol>
CSS:
ol {
list-style-type: none;
}
ol li {
font: bold 14px arial,helvetica,sans-serif;
background: #eee no-repeat;
margin: 5px;
padding: 5px 5px 5px 34px;
color: #aaa;
}
ol li.step1 {
background-image: url(step1.gif);
}
ol li.step2 {
background-image: url(step2.gif);
}
ol li.active {
color: #222;
}
So we’re already done. With this method, you can use the same code over and over again. Just assign the class “active” to the current list item. HTML looks simple, result looks great. Like everything you can do with CSS.
