Latest Lists

How do I use an image as a bullet in an html list?

I've searched online, and cannot find it. I'm making a list in html for a class and do not know how to use a picture as a bullet in html code. Any advice?

Public Comments

1. size the image to the size you want the bullet and use code for the picture <img src=> and just center/format it til it's right. or use a good program like dreamweaver to help visually do it.
2. To extend on to that answer, use align="left" so that the text is placed to the middle of the image. You might have to do an extra <br ^/> (remove the ^, Yahoo won't allow it)so that the next bullet doesn't indent. <img src="http://blah.com/img/bullet.png" align="left"> Blahblah.<br ^/><br ^/><img src="http://blah.com/img/bullet.png" align="left"> Moocow dog esss
3. The other two answers are wrong. use this code: ul{ list-style-image: url("image url goes here"); }
4. The best way to use an image as a bullet in html is to use CSS. say you have an unordered list: <ul id="mylist"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> Then use css to apply the image: #mylist { list-style:none /*get rid of default bullets */ } /* apply the bullets as background images to the list item */ #mylist li { background: url(images/custombullet.gif) no-repeat left center; /* replace custombulelt.gif with your image */ padding-left:30px; /*give the list items some breathing room from the bullet */ }