Definition lists don’t get enough credit when you’re talking about XHTML and CSS. They can really come in handy when putting a site together but I think a lot of us forget that they are there for us to use.
So, here’s a quick example of how great these little bits of mark up can be to remind you that they exist.
This is actually the way I end up using them the most when cutting up a site — a small contained box of related content. Or, more specifically, a group of related links. Ususally these need to look like an actual box and be flexible enough to work with both a small and larget amount of content.
The markup part is really simple. (Actually, it’s all very simple, but the markup is the simplest part of the simple.):
Now we add two background images, one for the DT and one for the DL. (false line breaks are noted with “>>”)
dl.list_show {
...
background: #e8e6e6 url(img/gr_box_bottom.gif) >>
bottom no-repeat;
}
.list_show dt {
...
background: url(img/grn_box_top.jpg) >>
no-repeat;
}
The end result looks something like this:
The background image for the DT is just what you would expect, it’s exactly the size we need for the top part of our box.
The background image for the DL is a little different. It’s actually much taller than we’re going to need it to be. And, since it’s aligned to the bottom, the background of the box will “stretch” to fit the content. I’ve also set the background color of the DL to the same as main colour in the background image. That way, no matter how long the list is, our box background will still work.
There’s a lot more that you can do with definition lists than just this example. MaxDesign goes into more detail of how and when to use definition lists in this article.
