Styling Lists - Pro CSS Techniques - page 273

In fact, the list could go on for pages, but we would rather cut to the chase and look at
some of the styling choices you might make.

Note Some people propose using definition lists for marking up dialogue. Actually, “some people” is the
W3C in this case: “Another application of DL , for example, is for marking up dialogues, with each DT naming
a speaker, and each DD containing his or her words” ( www.w3.org/TR/html4/struct/lists.html#h-10.3 ).
However, despite this sanctioned use, many web standards evangelists think this is notan appropriate use
for the definition list, that in fact the W3C is wrong to suggest this use. Who's right and who's wrong? This is
a proverbial can of worms that we won't open up—it'll just get messy.

■

Example 1: Schedule of Events
Take this sample XHTML:

<dl class="schedule">
<dt>20th August</dt>
<dd>Beachbuggin - VW meet at Southsea Seafront (all day schedule)</dd>
<dd>VW Festival Leeds</dd>
<dt>3rd September</dt>
<dd>VW Action - Herts County Showground</dd>
<dt>9th September</dt>
<dd>Vanfest - Three Counties Showground, Malvern</dd>
</dl>

This (as yet) unstyled definition list would appear as shown in Figure 12-18.

Figure 12-18. An unstyled definition list

In the sample code, we've used relative positioning to move the dt where we want it (we
could have chosen a float but that would require the usual float-clearing workarounds).
Because the dd content will take up more vertical space, we'll apply a border to their left edge
rather than a border to the right edge of the dt element. This helps to separate the two parts
quite effectively:

.schedule dt {
position: relative;
left: 0;
top: 1em;