Post Archive

› January 27, 2004

Definition lists - misused or misunderstood?

  • Reported by Russ

A short article on definition lists - What are they? When are they appropriate? And how to style them to look like bordered boxes, tables, image galleries, calendar of events and more...

Comments

1. January 27, 2004 11:44 AM

Quote this comment

liorean Posted…

He missed one use, which is linking menus, in this way:

<dl>
<dt>Internal links:</dt>
<dd>Home</dd>
<dd>Section 1</dd>
<dd>Section 2</dd>
<dd>Section 3</dd>
<dt>External links:</dt>
<dd>Webgraphics</dd>
</dl>

2. January 27, 2004 03:20 PM

Quote this comment

Robbert Broersma Posted…

I really like his solution for image galleries, one I hadn't thought of before:


<dt><img/>/dt>
<dt>title</dt>
<dd>description</dd>

Just use put two dt's after each other, and both they apply to the next dd. Just like case:


switch ($variable)
{
    case 'foo':
    case 'bar':
        // Prints "Today I've installed Red Hat 9!" when $variable equals 'foo'
        // Prints "Today I've installed Red Hat 9!" when $variable equals 'bar'
        echo 'Today I've installed Red Hat 9!';
    break;
}

3. January 27, 2004 03:39 PM

Quote this comment

liorean Posted…

Yeah, the image gallery was really nice.

4. January 28, 2004 02:18 AM

Quote this comment

Russ Weakley Posted…

Thanks Liorean, your example (nav system for DL) has been added to the article - how could I have forgotton that example!

5. January 28, 2004 09:22 AM

Quote this comment

Richard Rutter Posted…

I use definition lists to lay out forms, where DT contains the form label and DD contains the form control(s). Consider this simple example:

<dl>
<dt>Email:</dt>
<dd><input type="text" name="email" /></dd>
<dt>Name:</dt>
<dd><input type="text" name="name" /></dd>
</dl>

If the side-by-side table layout is what you’re after, we can apply some simple styles:

FORM DT {
   clear:both;
   width:33%;
   float:left;
   text-align:right;
}

FORM DD {
   float:left;
   width:66%;
   margin:0 0 0.5em 0.25em;
}

I posted more details on the subject recently.