HTML and CSS Reference
In-Depth Information
width: 14em;
font-weight: bold;
}
.schedule dd {
border-left: 1px solid silver;
margin: 0 0 0 7em;
padding: 0 0 .5em .5em;
}
This simple transformation can be seen in Figure 12-19.
Figure 12-19.
A definition list, styled using positioned
dt
elements
Example 2: A Critique of Goods
Let's consider another example: a product critique of some kind. It includes an image and
some text in the
dt
, with the actual comments in the
dd
where they should be. Here's the basic
HTML for this:
<dl class="critique">
<dt><img src="chair.jpg" alt="" />Union Jack Chair</dt>
<dd>
<p>What can I say? This is the perfect tool for sitting on ... </p>
</dd>
</dl>
The default layout of the definition list isn't ideal for this, and the image could benefit
from some treatment. Here's the CSS we need, which includes some simple background
images that are applied to the
dt
and
dd
elements, respectively:
.critique dt {
font-size:2em;
font-family:Arial, Helvetica, sans-serif;
clear:left;
border-bottom:1px solid red;
background: url(dt-bg.jpg) repeat-x bottom;
}
