Semantic product display using a definition list
August 20th, 2008
A valid and semantic approach to display products using a definition list
Remember the definition list? Hopefully you do, and yet again hopefully you are using it when necessary. It is a great HTML spec that has even better hooks for styling than the normal unordered or ordered list can offer straight out of the box. That is not to say it can and should be used in place of either the above mentioned, but when used properly it can be a great addition to your markup. Let’s see how we can use a definition list to properly markup and style a typical product display.
For the impatient folks out there now might be a good time to:
Finished Example:
First, the HTML
In your favorite editor, start with the following markup.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Category Lists</title></head> <body> <div id="categoryList"> <dl> <dt>A product title that could possibly span multiple lines</dt> <dd class="product"> <img src="img/category-img.gif" alt="category img 1" width="200" height="200" /> <blockquote> <p>This product is so great I can't control myself! <em>- Matt Rossi</em></p> </blockquote> </dd> <dd> <p>Morbi lorem leo, posuere nec, laoreet vitae, fringilla ac, dui. Praesent ac nibh vel ipsum vestibulum posuere. Morbi at arcu pulvinar libero sollicitudin tempus. Proin imperdiet dolor. Phasellus eleifend congue dolor. Integer sodales tincidunt risus. Phasellus gravida odio et pede. In enim. Praesent condimentum odio tincidunt sapien. Suspendisse turpis. Nullam euismod.</p> <ul> <li class="price">$12,345.99</li> <li><a href="#" title="Add this item to your cart">Add to Cart</a></li> <li><a href="#" title="Finished shopping? Time to checkout!">Checkout</a></li> </ul> </dd> </dl> </div> </body> </html>
So as you can see, we have some pretty lean markup to begin with here, which will help us later on down the line if we decide to redesign, or change how we want this styled. We should now have something that looks like the below image:
Ok, now let’s add some CSS
<style type="text/css">* { margin: 0; padding: 0; }body {padding: 10px;line-height: 1.5em;
color: #444;
font-family: "Georgia", times, serif;
}
#categoryList {
float: left;
}
#categoryList dl {
float: left;
width: 620px; /* the width of the entire definition list */
position: relative;
}
#categoryList dl dt {
float: right;
width: 275px; /* dl width, minus margins and image width */
margin-left: 20px;
margin-right: 125px; /* IE6 Double-Margin Bug in IE conditional */
font-size: 125%;
color: #076F57;
padding-bottom: .75em;
}
#categoryList dl dt em {
float: left;
width: 100px;
}
#categoryList dl dd {
float: left;
margin-left: 20px;
width: 400px; /* dl width, minus margins image width */
}
#categoryList dl dd.product {
margin-left: 0;
float: left;
width: 200px; /* image width */
}
#categoryList dl dd.product blockquote {
font-style: italic;
}
#categoryList dl dd.product blockquote em {
display: block;
font-style: normal;
font-weight: bold;
}
#categoryList dl dd.product img {
height: 200px;
width: 200px;
}
#categoryList dl dd ul {
text-align: right;
}
#categoryList dl dd ul li {
list-style: none;
display: inline;
}
#categoryList dl dd ul li.price {
position: absolute;
top: 0;
left: 495px; /* image width plus dt left margin plus dt width */
font-size: 150%;
color: #CF4040;
width: 125px; /* dt right margin value */
text-align: right;
}
#categoryList dl dd ul li a {
padding: 5px;
}
#categoryList dl dd ul li a:hover {
text-decoration: none;
background: #EFFBFF;
}
</style>
We’re out of the woods…not quite - IE6 Fix
IE6 has an issue with margins, so we need to add in a conditional statement to fix her up:
<!--[if lt IE 7]><style type="text/css">#categoryList dl dt { margin-right: 62.5px; } </style><![endif]-->
Putting it altogether, HTML & CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Category Lists</title>
<style type="text/css">* { margin: 0; padding: 0; }
body {
padding: 10px;
line-height: 1.5em;
color: #444;
font-family: "Georgia", times, serif;
}
#categoryList {
float: left;
}
#categoryList dl {
float: left;
width: 620px; /* the width of the entire definition list */
position: relative;
}
#categoryList dl dt {
float: right;
width: 275px; /* dl width, minus margins and image width */
margin-left: 20px;
margin-right: 125px; /* IE6 Double-Margin Bug in IE conditional */
font-size: 125%;
color: #076F57;
padding-bottom: .75em;
}
#categoryList dl dt em {
float: left;
width: 100px;
}
#categoryList dl dd {
float: left;
margin-left: 20px;
width: 400px; /* dl width, minus margins image width */
}
#categoryList dl dd.product {
margin-left: 0;
float: left;
width: 200px; /* image width */
}
#categoryList dl dd.product blockquote {
font-style: italic;
}
#categoryList dl dd.product blockquote em {
display: block;
font-style: normal;
font-weight: bold;
}
#categoryList dl dd.product img {
height: 200px;
width: 200px;
}
#categoryList dl dd ul {
text-align: right;
}
#categoryList dl dd ul li {
list-style: none;
display: inline;
}
#categoryList dl dd ul li.price {
position: absolute;
top: 0;
left: 495px; /* image width plus dt left margin plus dt width */
font-size: 150%;
color: #CF4040;
width: 125px; /* dt right margin value */
text-align: right;
}
#categoryList dl dd ul li a {
padding: 5px;
}
#categoryList dl dd ul li a:hover {
text-decoration: none;
background: #EFFBFF;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">#categoryList dl dt { margin-right: 62.5px; } </style>
<![endif]-->
</head>
<body>
<div id="categoryList">
<dl>
<dt>A product title that could possibly span multiple lines</dt>
<dd class="product">
<img src="img/category-img.gif" alt="category img 1" width="200" height="200" />
<blockquote>
<p>This product is so great I can't control myself! <em>- Matt Rossi</em></p>
</blockquote>
</dd>
<dd>
<p>Morbi lorem leo, posuere nec, laoreet vitae, fringilla ac, dui.
Praesent ac nibh vel ipsum vestibulum posuere. Morbi at arcu pulvinar
libero sollicitudin tempus. Proin imperdiet dolor. Phasellus eleifend
congue dolor. Integer sodales tincidunt risus. Phasellus gravida odio
et pede. In enim. Praesent condimentum odio tincidunt sapien.
Suspendisse turpis. Nullam euismod.</p>
<ul>
<li class="price">$12,345.99</li>
<li><a href="#" title="Add this item to your cart">Add to Cart</a></li>
<li><a href="#" title="Finished shopping? Time to checkout!">Checkout</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>
When you put this into the “real world”, it is always best practice to use a spearate CSS file(s). That’s it, that’s all, that’s all there is, give it a try, and check it out.
- Posted at 11:35 am in tutorials
- Leave a comment