HTML: The Definitive Guide

Previous Chapter 15
Tips, Tricks, and Hacks

15.3 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. [the section called "The <dl> Tag"] For example:

  <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

The fancier list is shown in Figure 15.1.

Figure 15.1: Custom bullets for unordered lists

[Graphic: Figure 15-1]

Keep in mind that this trick works well only 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
Trivial or Abusive? Book Index Tricks with Tables

HTML: The Definitive Guide CGI Programming JavaScript: The Definitive Guide Programming Perl WebMaster in a Nutshell
Hosted by uCoz