Background images for bullets list


 / Published in: CSS
 

URL: http://css.maxdesign.com.au/listutorial/07.htm

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.

  1. CSS CODE
  2. ul
  3. {
  4. list-style-type: none;
  5. padding: 0;
  6. margin: 0;
  7. }
  8.  
  9. li
  10. {
  11. background-image: url(arrow.gif);
  12. background-repeat: no-repeat;
  13. background-position: 0 .4em;
  14. padding-left: .6em;
  15. }
  16.  
  17.  
  18. HTML CODE
  19. <ul>
  20. <li><a href="#">Milk</a></li>
  21. <li><a href="#">Eggs</a></li>
  22. <li><a href="#">Cheese</a></li>
  23. <li><a href="#">Vegetables</a></li>
  24. <li><a href="#">Fruit</a></li>
  25. </ul>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: jonhenshaw on August 28, 2006

Nice one. Thanks!

Posted By: jatkins on February 24, 2008

What about using list-style-image?

You need to login to post a comment.