Home | Tips and Tricks | HTML tricks | Pictures as bullets

forgot your password?

How to use images as bullets.
Last updated 6-16-03

Studies have shown that most web-pages aren’t read very closely, but scanned or “skimmed” through. Because of the cursory nature of most web readers, it becomes necessary to arrange your topics in small chunks … and bullets and numbering are very important.

When you create a bulleted list, by default, your visiters will see ugly black dots like this …

• Ugly
• Black
• Dots

But if you really need to grab your audience’s attention you can use images for your bullets. The easiest way to do this is by using the “defininition list” tag. You can then create lists like this:

This

Looks

Much better. However, if you write a lot of text, you will notice that the text wraps below the bullet. This doesn't look quite as good. Oh well.

The "bullet image" is a tiny triangle I drew in PhotoShop. The only problem with the above method is that your bullets tend to sit close to the text and create wrapping problems. Here is the source code for this list.

Another method for simulating image bullets (which can actually look better) is to simply lay your text out into tables and place the “bullet” images as pictures. The problem here is that it is inconvenient to create new table rows everytime you want to expand the list with more points.

	These table bullets look very good, but
	are a lot of work because you have to align everything
	properly within each cell, and you have to add a new row everytime ...
	you expand the list.

Here is what this table-list looks without the border. .

	These table bullets look very good, but
	are a lot of work because you have to align everything
	properly within each cell, and you have to add a new row everytime ...
	you expand the list.

See all our html tricks!