HTML: The Definitive Guide

Previous Chapter 12 Next
 

12.4 Custom Bullets

One common use of the definition list has nothing to do with definitions, but instead deals with adding custom bullets to an otherwise unordered list. In this trick, leave the <dt> tag empty, and add an <img> tag that references the desired bullet image at the beginning of each <dd> tag. [<dl>, 7.7.1]

For example,

<dl>
  <dt><dd><img src="fancy_bullet.gif"> Pickled Kumquats
  <dt><dd><img src="fancy_bullet.gif"> 'Quats and 'Kraut 
  <dt><dd><img src="fancy_bullet.gif"> 'Quatshakes 
  <dt><dd><img src="fancy_bullet.gif"> Liver with Fried 'Quats
</dl>

The fancier list is shown in Figure 12-1.

Figure 12-1: Custom bullets for unordered lists

[Graphic: Figure 12-1]

Keep in mind that this trick only works well if your list items are short enough to not wrap within the browser window. If the item does wrap, the next line will start aligned with the left edge of the bullet, not the left edge of the text, as you might hope.


Previous Home Next
Title Marquee Book Index Tricks with Tables