Contact details structure redux

In this chapter, and in the microformats exercise, the address and other contact details
were styled using paragraphs and line breaks. An alternative structure, which perhaps has
greater integrity from a semantic standpoint, is to use a definition list, with further nested
definition lists within. At the top level, the term is Contact details and the definition is
the actual contact details. At the next level, there are two terms, Mail and Telephone/fax,
each with respective definitions. For the latter, the definition has a third definition within,
providing term/definition pairs for the different types of telephone and fax numbers.
<dl>
<dt>Contact details</dt>
<dd>
<dl class="vcard">
<dt>Mail</dt>
<dd>
<address>
<strong>Company name</strong><br />
00, Street Name<br />
Town or City<br />
County or Region<br />
Postal/ZIP code<br />
Country name
</address>
</dd>
<dt>Telephone/fax</dt>
<dd>
<dl>

<dt>Tel:</dt>
<dd>+1 (0)0000 555555</dd>
<dt>Fax:</dt>
<dd>+1 (0)0000 555556</dd>
<dt>Mobile/cell:</dt>
<dd>+1 (0)7000 555555</dd>
</dl>
</dd>
</dl>
</dd>
</dl>
For the CSS, use the existing rules from using-microformats.css in the usingmicroformats-
starting-point folder, and the .vcard rule from the previous exercise.
The following rules can then be used to style the definition list and its contents.
First, the dt rule is used to style the Contact details text (as per the h1 element in the
previous exercise), with the dd dt rule providing override styles for dt elements within a
dd element. This rule is aimed to style the equivalent of the h2 elements from the previous
exercise: the Mail and Telephone/fax text. The dd dd dt rule provides a third level of
override, styling the dt elements within the telephone/fax definition list. Also, because the
dt/dd pairs are displayed in a linear fashion by default, the dd dd dt rule floats the
telephone/fax list dt elements to the left, enabling the dd elements to stack to the right in
each case.
dt {
font: bold 1.5em/1.2em Arial, Helvetica sans-serif;
margin-bottom: 1.2em;
text-transform: uppercase;
}
dd dt {
font: bold 1.2em/1.5em Arial, Helvetica sans-serif;
text-transform: uppercase;
margin-bottom: 0;
}
dd dd dt {
float: left;
padding-right: 5px;
display: block;
text-transform: none;
}
The next two rules deal with formatting and fine-tuning of the text. The address rule adds
the gap between the bottom of the address and the telephone/fax heading, along with
reverting the address element content to normal text (it’s italic by default). The second
rule in the following code block defines a font for the address element content and the
content of the telephone/fax definition list’s term and definition.

address {
padding-bottom: 1.5em;
font-style: normal;
}
address, dd dd dt, dd dd dd {
font: 1.2em/1.5em Verdana, Arial, sans-serif;
}
With these styles added, the contact details look virtually identical to those in the exercise.
At this point, you can add hooks for the vCard as per steps 2 and 3 of the “Using microformats
to enhance contact details” exercise. See contact-details-structure-redux.css
and contact-details-structure-redux.html in the chapter 8 folder for the completed
files.
We’ve covered plenty of ground here, so now it’s time to leave the subject of collecting
user feedback and progress to the next chapter, which explores how to test your websites
and deal with common browser bugs.