/ 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>
URL: http://css.maxdesign.com.au/listutorial/07.htm
Comments
