Using Image Bullets on HTML Lists

Why would anyone want to use custom bullets for their lists?

To make your lists more distinctive.
To create a better sales presentation.
To differentiate items by type.
To signify a current status.
To show off, you little hot rod, you!

So how is it done? There are two easy ways! The recommended way uses CSS:

<ul style="list-style-image: url(imageBullet.gif);">
<li>List item 1</li>
<li>List item 2</li>
</ul>

Just change imageBullet.gif to the name and file type of the image you want to use as bullets, and include the path if the image is kept in a separate folder, and you're all set. For a visually appealing list, don't use images that are too large.

The second way is to just use a definition list (which doesn't use bullets) and use an image in front of the list item content. It's a little less official, but it works just the same. It goes like this, Mr. GiggleFinkle:

<dl> 
<dd><img src="checkmark.gif" width="26" height="14">List item text</dd>
<dd><img src="checkmark.gif" width="26" height="14">List item text</dd>
</dl>

Hey, that's pretty easy, too! I'll bet you could have figured that out for yourself if you would have had a rubber duckie and a half a chance.

Hey #2, did you know we can learn a lot from a box of crayons? Each one is a different color but they all live together in harmony in the same box.

That doesn't seem so hard.

Back | Web Design Tutorials Index

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]