Tutorial 1 - Background images for bullets

Variation - adding space around list items

Space can be added between each list item by setting a margin on the "LI". Margin can be set on the top, bottom or top and bottom of each list item. This version has a margin of ".1em" on top and bottom of the list items.

Go to Icon lists →

CSS CODE
ul
{
list-style-type: none;
padding: 0;
margin: 0;
text-align: right;
width: 10em;
}

li
{
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 100% .4em;
padding-right: .6em;
margin: 1em 0;
}


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