Advanced Search

Return to Snippet

Revision: 1004
at August 28, 2006 04:59 by zensir
Initial Code 
CSS CODE
ul
{
list-style-type: none;
padding: 0;
margin: 0;
}

li
{
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 0 .4em;
padding-left: .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>
Initial URL 
http://css.maxdesign.com.au/listutorial/07.htm
Initial Description 
To move the content away from the background image apply "padding-left" to the "LI" element. In this case "0.6em" has been used. As with vertical alignment, list padding will be determined by the size of your image.
Initial Title 
Background images for bullets list
Initial Tags 
css, list
Initial Language 
CSS