advanced search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

zensir on 08/28/06


Tagged

css list bullets


Versions (?)


Who likes this?

33 people have marked this snippet as a favorite

jonhenshaw
designerd
Navegante
meth
aurele
trickychicken
clifton
visualAesthetic
tavo
mountchuck
KilgoreTrout67
icarus
bordalix
manub
Runtheball
fael
rich13
vali29
kellyharding
marteki
enono78
Winkyboy
arala22
blueshome
adix
snucko
jmelgoza
seekup00
cristianciofu
avioli
cidibee
Baris
gtalmes


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.


Plain TextExpand 
  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: jatkins on February 24, 2008

What about using list-style-image?

Posted By: jonhenshaw on August 28, 2006

Nice one. Thanks!

You need to login to post a comment.