Tutorial 1 - Background images for bullets

Variation - right-aligned list

To make a right-aligned version of the list, only three changes need to occur. First, set the "UL" "text-align" to "right". Second, change the left "background-position" from "0" to "100%" - which makes the image align up with the right edge. And finally change "padding-left" to "padding-right".

Go to Setting List Width →

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

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


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