A Case for the DT’s
My latest project has been one of those things where you say “Yeah, I’m pretty sure I can do that.” only to end up thrashing around on Google and in various forums, trying every keyword combination possible to make Wordpress do something that you thought would be fairly simple.
It could be the particular theme that I chose as my foundation, but it seemed like no matter what I did, I couldn’t make a simple unordered list of images and links line up correctly. They kept nesting in a big ugly diagonal line running down the page. It’s my first time developing something according to a graphic designer’s mock-up and, while I love a challenge, I was starting to pop a sweat as I threw all sorts of html at the page, trying to make those damn images and blurbs line up obediently.
Finally, I stumbled upon one of those “eureka” moments when I found out that a Definition List, designated with a specific class, could be molded to my specifications. After switching to the HTML mode of writing, I added a
- tag then I put the img tags into dt wrappers like so:
And then enclose the text link and description in
tags. Then, I added some appropriate CSS in the Design>Theme Editor>style.css section of the Dashboard:
dl.welcome {
width: 85%;
margin: 15px 0;
padding: 15px;
}
dl.welcome dt {
margin-top: 20px;
margin-bottom: 0px;
}
dl.welcome dt img {
float: left;
margin: 0px 5px 0 0;
}
dl.welcome dd {
margin-left: 5px;
margin-bottom: 20px;
font-size: 90%;
line-height: 1.5em;
}
and Voila! a list that managed to maintain the same layout that the designer intended.
Added. Nice work on this one. Btw, my blog is dofollow, stop by and grab a link. Walter
Nice post, you got some good points there - thank you.