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>
<p>What can I say? This is the perfect tool for sitting on ... </p>
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-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid red;
background: url(dt-bg.jpg) repeat-x bottom;
Search WWH ::

Custom Search