Bullet images for list items

5 Dec 2006 > 0 Comments

Creating a <div> based Template using CSS (Part: 11)

Bullet Images can be added to lists using the CSS property list-style-image:, but it can get tricky aligning the bullet properly in different browsers.

Instead I use the property background-image:

In the stylesheet, I’ve added the image to the li type selector, along with the property and value to stop the image from repeating:

li {list-style-type:none;
background-image:url(images/bullet.jpg);
background-repeat:no-repeat;}

Next, I’ll add some padding:

li {list-style-type:none;
background-image:url(images/bullet.jpg);
background-repeat:no-repeat;
padding:0 1em;}

To position the image use the background-position property. For more info on positioning background images refer back to Styling the Background and Foreground.

li {list-style-type:none;
background-image:url(images/bullet.jpg);
background-repeat:no-repeat;
padding:0 1em;
background-position:0 4px;}

Finally, the background-image needs to be removed from the horizontal navi bar.

To do this, I’ve added background-image:none;, to #c1 li

#c1 li {display:inline;
padding:0 0.5em 0 0;
background-image:none;}

< Back to everything
Keep going… >

Related Posts

• Ordered List items all 1 in IE
• Ordered and unordered lists (create a horizontal menu/navi bar)
• AA: Division based xhtml and css Template
• Creating a <div> based Template using CSS (part 1 - 12)
• Disappearing List Icon