Index by Christopher Schmitt

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

Styling a Definition List

Problem

You want to line up definitions with terms from a standard definition list.

Solution

Create a valid definition list through HTML, as shown in Figure 6-20:

<dl>
 <dt>CSS</dt>
 <dd>Cascading Style Sheets</dd>
 <dt>HTML</dt>
 <dd>HyperText Markup Language</dd>
 <dd>How To Meet Ladies</dd>
 <dd>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et
 gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus
 unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio
 incongruous feline nolo contendre.</dd>
</dl>
Default rendering of the definition list

Figure 6-20. Default rendering of the definition list

Then create a margin on the left side of the entire definition list:

dl {
 margin-left: 5em;
}

Apply a width to the definition terms to be less than the value given to the left margin, as shown in Figure 6-21:

dt {
 width: 4em;
}
The definition term’s width set to 4 em

Figure 6-21. The definition term’s width set to 4 em

Next, float and clear the definition term while also using a negative value on the left side of the definition term to bring the term to the left of its definition, as shown in Figure 6-22:

dt {
 width: 4em;
 float: left;
 clear: left;
 margin:0 0 1em −5em;
 font-weight: bold;
}
Moving the term to the left side of the definitions

Figure 6-22. Moving the ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required