Posted By

zensir on 08/28/06

Tagged

css
list

Versions (?)

Last Edited at 08/28/06 04:59am

Statistics

Viewed 6365 times

Favorited by 35 user(s)

Related snippets

Background images for bullets list

/ Published in: CSS

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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

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>