Have a question? Want to hire me? Get in touch with me now!

Taming Definition Lists

by Tevi Hirschhorn on September 23, 2009 in

Definition lists might one day go on a rampage. They're quiet, now, but people generally ignore them, and by and large, they're very misunderstood. I show them lots of love, though, in the hopes that when they do go on a killing spree, they'll remember that I cared about them. But besides a weird exhaustion-induced imagination about markup elements taking down the global population, definition lists really are very useful and very misunderstood. They add a lot of semantic meaning to your markup for search engines and others. (Note: I really don't know if DLs are useful for search engines and the like, but if they're not utilized by them either, they should be!) If you want to make a table of contents, or any other list of items with a title in the front, like the below screen shot of property features, definition lists are really the perfect answer!

Let's first take a peek at the W3 specification on what Definition Lists really are.

A definition list is a list of terms and corresponding
definitions. Definition lists are typically formatted with
the term on the left with the definition following on the
right or on the next line. The definition text is typically
indented with respect to the term.
Please see: http://www.w3.org/MarkUp/html3/deflists.html

As we can see, any time you would have a list of items that would have a title before the list item, a definition list would be most appropriate. (Not an ordered or unordered list!)

Since the default browser styling of definition lists is quite drab and mundane, let's come up with a way to display our list like the screen shot above! (Let me come right out and say that I'll show you two ways to do this - the easiest, most flexible way which excludes IE6 compatibility, and then the way that would work even with IE6. My original use of the DL as shown above required IE6 compatibility, and it took some tweaking to figure out how to do that. Not all of us live in the fantasy world where IE6 no longer exists...)

Let's start off with the markup we'll use:

<div id="features">
    <h2>Property Features</h2>
 
    <dl>
        <dt>Lot Size</dt> <dd>155 x 84</dd>
        <dt>Year Built</dt> <dd>1963</dd>
        <dt>Real Estate Taxes</dt> <dd>$11,984</dd>
        <dt>Fireplaces</dt> <dd>1</dd>
        <dt>Master Bath</dt> <dd>Yes</dd>
        <dt>Parking</dt> <dd>Garage / 2 car</dd>
        <dt>Elementary School</dt> <dd>South</dd>
        <dt>High School</dt> <dd>New Trier Township HS</dd>
        <dt>Dining Room</dt> <dd>14 x 14</dd>
        <dt>Living Room</dt> <dd>26 x 14</dd>
        <dt>Family Room</dt> <dd>16 x 15</dd>
        <dt>Kitchen</dt> <dd>15 x 14</dd>
        <dt>Recreation Room</dt> <dd>24 x 16</dd>
        <dt>Bedroom 1</dt> <dd>19 x 14</dd>
        <dt>Bedroom 2</dt> <dd>12 x 12</dd>
        <dt>Bedroom 3</dt> <dd>12 x 12</dd>
        <dt>Bedroom 4</dt> <dd>12 x 12</dd>
    </dl>
</div><!--/ features -->

This is a fairly straight-forward definition list, using the <dl> tag, and each entry has one title (using the <dt> tag) and one definition data item (using the <dd> tag). I've added a title for the list, and enclosed the whole thing in a container div, although that may not be necessary, depending on the layout you will be creating.

Let's get the styling we'll need to get the layout where the definition title appears all the way on the left, and the data appears all the way on the right. If you said, "float left and float right for each, respectively," Let's try that:

#features { 
	width: 268px;
	padding: 0 1px 1px 1px;
	margin: 0;
	text-align: left;
	overflow: hidden;}
 
#features h2 {
	color: #346db0;
	font: bold 22px/26px Arial, Helvetica, sans-serif;
	padding: 11px 0 3px 0;
	margin: 1px auto 11px auto;
	text-align: center;}
 
#features dl {
	margin: 0;
	padding: 0;}
 
#features dl dt {
	float: left;
	height: 19px;
	padding: 0;
	margin: 0;}
 
#features dl dd {
	float: right;
	height: 19px;
	padding: 0;
	margin: 0;}

"But wait!" you say! "If I preview this, it doesn't stack up all nicely!!" Chill out, hombre! We also have to clear each entry to make sure the following list items do not pop up next the previous ones. Like so:

#features { 
	width: 268px;
	padding: 0 1px 1px 1px;
	margin: 0;
	text-align: left;
	overflow: hidden;}
 
#features h2 {
	color: #346db0;
	font: bold 22px/26px Arial, Helvetica, sans-serif;
	padding: 11px 0 3px 0;
	margin: 1px auto 11px auto;
	text-align: center;}
 
#features dl {
	margin: 0;
	padding: 0;}
 
#features dl dt {
	float: left;
	clear: left;
	height: 19px;
	padding: 0;
	margin: 0;}
 
#features dl dd {
	float: right;
	clear: right;
	height: 19px;
	padding: 0;
	margin: 0;}

Hey! We're getting there! What about the fancy dotted lines? Let's do that, too:

#features { 
	width: 268px;
	padding: 0 1px 6px 1px;
	margin: 0;
	text-align: left;
	overflow: hidden;}
 
#features h2 {
	color: #346db0;
	font: bold 22px/26px Arial, Helvetica, sans-serif;
	padding: 11px 0 3px 0;
	margin: 1px auto 11px auto;
	text-align: center;}
 
#features dl {
	margin: 0;
	padding: 0;}
 
#features dl dt {
	float: left;
	clear: left;
	height: 19px;
	padding: 0;
	margin: 0;}
 
#features dl dd {
	float: right;
	border-bottom: 1px dotted #000000;
	clear: right;
	height: 19px;
	padding: 0;
	margin: 0;}

Hmm... that's not right. If you're previewing your work as we go along, you'll notice that did not work. The problem is the floated elements are only as wide as their contents, so the dotted lines are not stretching between the <dt> and the <dd>. Let's try text-align on the <dd>, instead:

#features { 
	width: 268px;
	padding: 0 1px 1px 1px;
	margin: 0;
	text-align: left;
	overflow: hidden;}
 
#features h2 {
	color: #346db0;
	font: bold 22px/26px Arial, Helvetica, sans-serif;
	padding: 11px 0 3px 0;
	margin: 1px auto 11px auto;
	text-align: center;}
 
#features dl {
	margin: 0;
	padding: 0;}
 
#features dl dt {
	float: left;
	clear: left;
	height: 19px;
	padding: 0;
	margin: 0;}
 
#features dl dd {
	text-align: right;
	border-bottom: 1px dotted #000000;
	clear: right;
	height: 19px;
	padding: 0;
	margin: 0;}

Yea! Much better. Now let's add the rest of the styling to make this look perty.

#features { 
	width: 268px;
	padding: 0 1px 1px 1px;
	margin: 0;
	text-align: left;
	overflow: hidden;
	font: 13px/17px Arial, Helvetica, sans-serif;}
 
#features h2 {
	color: #346db0;
	width: 195px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-weight: bold;
	line-height: 26px;
	padding: 11px 0 3px 0;
	margin: 1px auto 11px auto;
	text-align: center;}
 
#features dl {
	overflow: hidden;
	margin: 0;
	padding: 0;}
 
#features dl dt {
	float: left;
	clear: left;
	height: 19px;
	padding: 0 0 0 1px;
	margin: 0;}
 
#features dl dd {
	text-align: right;
	clear: right;
	border-bottom: 1px dotted #346db0;
	height: 19px;
	padding: 0 1px 0 0;
	margin: 0;}

This is probably good enough for some of you. However, as you may have noticed, IE6 isn't happy with this. The floated title doesn't have the dotted line underneath it. So, instead of using the border-bottom and text-align for positioning, we'll go back to our initial floated layout for both the title and data, and we'll use a background image of a dotted line on the containing div which should line up exactly with each list entry. I consider it a cheap shot, but it works!

Here's the final IE6-friendly css with all the styling as is in the above screenshot:

#features { 
	background: #f3f3f3 url('IE-features-dotted-line.gif') no-repeat 2px 49px;
	width: 268px;
	padding: 0 1px 1px 1px;
	margin: 0;
	text-align: left;
	overflow: hidden;}
 
#features h2 {
	color: #346db0;
	width: 195px;
	font: bold 22px/26px Arial, Helvetica, sans-serif;
	padding: 11px 0 3px 0;
	margin: 1px auto 11px auto;
	text-align: center;}
 
#features dl {
	overflow: hidden;
	margin: 0;
	padding: 0;}
 
#features dl dt {
	background-color: #f3f3f3;
	float: left;
	clear: left;
	height: 19px;
	font: bold 13px/17px Arial, Helvetica, sans-serif;
	color: #485e76;
	padding: 0 3px 0 1px;
	white-space: nowrap;}
 
#features dl dd {
	background-color: #f3f3f3;
	float: right;
	clear: right;
	height: 19px;
	font: 13px/17px Arial, Helvetica, sans-serif;
	color: #485e76;
	padding: 0 1px 0 3px;
	white-space: nowrap;}

Comments

Kelly Obayle said this 23 weeks 1 day ago.

Thanks for the information you have provided here

Tevi Hirschhorn said this 23 weeks 1 day ago.

no problem!

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options