Jenn Mears Web Design

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.