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.


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

RSS Icon Subscribe to comments

You need to login to post a comment.