Tutorial 1 - Background images for bullets

Variation - icon lists

Multiple background image options can be used within a single list. This is achieved by creating a class for each icon, and styling individual "LI's" as required.

See all steps combined →

CSS CODE
.iconlist
{
list-style: none;
margin: 0;
padding: 0;
}

li.pdf
{
background-image: url(bullet_pdf.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin: .4em 0;
}

li.doc
{
background-image: url(bullet_doc.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin: .4em 0;
}

li.text
{
background-image: url(bullet_text.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin: .4em 0;
}

li.htm
{
background-image: url(bullet_htm.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin: .4em 0;
}

HTML CODE
<ul class="iconlist">
<li class="pdf"><a href="#">Milk</a></li>
<li class="text"><a href="#">Eggs</a></li>
<li class="htm"><a href="#">Cheese</a></li>
<li class="doc"><a href="#">Vegetables</a></li>
<li class="text"><a href="#">Fruit</a></li>
</ul>
Other Max Design articles and presentations
Associated with webstandardsgroup.org