Advanced Search

Background images for bullets list

/ Published in: CSS
Save to your folder(s)
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 
  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>

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

Report this snippet


Comments

You need to login to view comments.