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

 

Homepage
Products
Tips and Tricks

Member Log-in
forgot your password?

About Us
Contact
Reseller Program



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.

Source code for image-bulleted list
<dl>
<dd><img src="bullet-tan.gif"> This </dd>
<dd><img src="bullet-blue.gif"> Looks</dd>
<dd><img src="bullet-yellow.gif"> 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. </dd>
</dl>>

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!