This is part one of a multi-part article on manipulating Definition Lists with CSS and some WordPress Link tricks (don’t ask how many parts yet, we’ll see when I run out of ideas). Even if you don’t use WordPress this article still explores a creative method of rendering Definition Lists in flexible multi-column layouts.
Have you ever wished you had more options or flexibility when it came to marking up WordPress Link Lists? I wanted a WP link list that could display in multiple columns with varying amounts of text, have the text below the image/link, a groovy background, and basically look nothing like your typical list.
If you haven’t been there yet, take a look at my Portfolio page which is marked up using this technique. A lot of my inspiration for this came from Douglas BowmanCSS SlidingDoors which has proved incredibly useful (it also allows my sidebar background to expand dynamically). The Sliding Door idea is that you use two HTML elements, one inside the other, each with half of a graphic, and as they expand or contract the graphic backgrounds slide to adjust for different sizes. Bowman used <li> and <a> in a horizontally expanding menu. I’m using <dt> and <dd> with vertical flexibility.
Marking up WordPress Lists as Definition Lists
If you’ve played around with WP lists you probably used get_linksbyname to display your lists.
<ul>
<?php get_linksbyname('portfolio', '<li>', '</li>',
'', TRUE, 'rating', TRUE, FALSE, -1, FALSE); ?>
</ul>
You can see what all the TRUEs and FALSEs are at the WordPress Codex get_linksbyname template tag description. It basically says ‘run through my list and start each item with an opening list element, place a break between the image/link and description, and then close up the list tag.’ This is great, but puts some confines on the display possibilities of the images and descriptions. Nothing says though that you can only use list tags. Try this on for size –
<dl>
<?php get_linksbyname('portfolio', '<dt>', '</dd>',
'</dt><dd>', TRUE, 'rating', TRUE, FALSE, -1, FALSE); ?>
</dd>
</dl>
You will end up with a definition list structured like this -
<dl class="portfolio">
<dt>Image/link 1 </dt>
<dd> Description 1</dd>
<dt>Image/link 2 </dt>
<dd> Description 2</dd>
<dt>Image/link 3 </dt>
<dd> Description 3</dd>
</dl>
Now I can control the margins, padding, float, etc. of the description text independently of the images because it is wrapped in its tag. And in case you are wondering where I put my call to get_linksbyname, I created a template named Portfolio with this call on it, and then assigned it to a Page named the same thing. Already pretty cool, but wait–there’s more with this Ginsu knife set.
Styling Fluid Multi-Column Definition Lists
Have you noticed everything in WordPress can look like a list? That’s because they are lists! This is great semantically, but starts to look tired to me. One of my requirements was that my link list appears in two or more columns, so the screaming lists! lists! lists! subsides a bit. Second, I want the description text to sit below the image/link. And third, I want a nice background that adjusts to varying text lengths. I may be using this technique to style WP links with an image above and description below, but you can also use this for any kind of information with headings in the <dt>, or anything else you can think of. Let’s start by defining the Definition List. In my Blog design I needed a fixed width for my <dl>, but a fluid example shows more of this technique’s flexibility. Check out the example here and be sure to play with your browser’s width.
dl.portfolio {
width:80%;
}
Here is where we start getting the elements to behave fluidly by floating the <dt> left. We also attach our first “Sliding Door here. The background image is attached to the top of the <dt> and to the bottom of the <dd> (see below). The two overlap or slide past each other to meet in the middle. I use a single oversized image, an idea borrowed from Roger Johansson’s CSS Teaser Box. The <dt> height allows for the size of my portfolio images that I assigned in the WP links admin, and the width is enough for the entire background to show. The zero margin and padding get rid of browser defaults.
dl.portfolio dt {
float:left;
background: url(images/twoToneBox.gif) no-repeat left top;
width:240px;
height:70px;
margin: 0;
padding:0;
}
(image curtsey of Arnau Siches’ Catalan translation - thanks!)
The <dd> is slightly trickier. We float this left, but give it the same top margin as the height of the <dt> to push it down, and a negative left margin to pull it beneath. Using this technique we get the stacked look we want and maintain fluidity. The <dt> and <dd> will both float and stack up left to right filling the width assigned to your <dl>.
(image curtsey of Arnau Siches’ Catalan translation - thanks!)
dl.portfolio dd {
float:left;
background: url(images/twoToneBox.gif) no-repeat left bottom;
width:210px;
height:70px;
padding:1px 21px 0 10px;
margin:70px 0 40px -240px;
font:normal 14px/1.2em Palatino, Times, Serif;
color:#bca88c;
}
If you’re familiar with the CSS box model you’ll notice that the width of the <dd> is reduced because of the padding I have introduced for the text. If you’re really sharp, you’ll notice that my total box width (210px + 21px + 10px = 241px) is 1px more than it should be. I don’t know why, but my layout collapsed on itself in FireFox with the proper width and adding a single extra pixel seemed to fix it. The <dd> has the other half of the Sliding Door background fixed to the bottom. I set the <dd> height large enough to accommodate the lengthiest text I will have. In some applications you might not need <dd> heights–you can just allow them to respond dynamically to the amount of text–but in this case the grid layout would be messed up if one box flowed up into the space created by a shorter box above. I also set some rules on how I’d like the text to display adjusting the font and color. Lastly, I toss in some extra styling for the images in our <dt>. I give it a border with 4 pixels of padding to make it framed in white. Then I added a hover effect to the image. Don’t forget–WordPress makes the image a link. If IE respected :hover properly I could have used img:hover, but since it doesn’t I used the img as a descendent selector on the a:hover pseudo-element, and it seems to work fine.
dl.portfolio dt img {
background-color:#fff;
padding:4px;
margin:15px 0 0 15px;
border:1px dashed #d78e7d;
}
dl# portfolio dt a:hover img {
background-color:#f5dbc0;
border:1px solid #d78e7d;
}
See the final example with css here. Well, that wraps up part 1 of Manipulating Definition Lists for Fun and Profit. I tested this on a Window XP box (I’m saving my pennies for a Mac) using Firefox 1.04, IE 6.0, Netscape 7.1, and Mozilla 1.6, and they all seem to work great. Opera 7.2, on the other hand, continues to piss me off. [update - Opera 8.0 works fine] If any Opera diehards can fix this layout for that browser I’d be pleased to hear about it, and if you experience problems on platforms other than the evil empire please let me know.
Translations - Catalan by Arnau Siches
[...] Manipulating Definition Lists Scott McDaniel has a very good article on Manipulating Definition Lists for Fun and Profit Have you ever wished you had more options or flexibility whe [...]
Just looked at the “Final Example” on Opera 8 WinXP and seems to work.
This is a very nice post! Thank you.
I’ve struggled with Opera on this too and it was driving me nuts. Whatever they changed in Opera 8 made the layout work though.
Looks great on Safari and Firefox on Mac OS X as well.
Lovely site you have here, kudos!
Interesting article, thanks for the pointers and excellent explanation.
Nice implementation of definition lists, great idea!
Wanted to let you know, however, that the tecnique collapses in Opera (7.54) under MacOS X. The first 2 cells work just fine, but the rest go wild. In Opera 8 all’s fine, so I don’t think there’s need to worry about it whatsoever.
[...] sta 14/05/05 La solució —que originalment vaig veure a l’artícle Manipulating Definition Lists for Fun and Profit— seria la següent: Prime [...]
very nice and stylish. very superficially reminded me of some early experiment i did about a year ago. have a look at my corporate palette, built on definition lists http://www.splintered.co.uk/experiments/26/
Thanks Patrick, yes I see the similarity, you could probably even do away with the li contatiners in your example all together and just use a floating definition list like here.
But you do remind me I wanted to write more about floating list elements in some future article.
[...] ank Roger Johansson for the shout outs on his site and Stylegala about my recent article, Manipulating Definition Lists for Fun and Profit. His post spawned tons of others and lots and lots of traffic [...]
Hee hee! For WYSIWYG, you might want to try BlogJet - http://www.blogjet.com. It’s a Windows client and works with any blog. The only problem is that WP sometimes munges post slug field, so if you’re using SEO urls should verify a post works after you upload it.
I’d rather not do it through an RPC interface. I like having the power through my WP Admin to control all my posts. I was using PhotoMatt’s WP plugin implementation of widgEditor. I think all the munging was due to a combination of that plugin and the convert <code> plug which auto converts < and > when found between <code> tags.
It’s all gone to hell!
Well I’ve patched up the problems from widgEditor and added a couple graphics curtesy of Arnau Siches and his Catalan Translation. Thanks Arnau!
[...] d under: Standards — nortypig @ 4:02 pm Manipulating Definition Lists by Scott McDaniel. [...]
[...] Was man mit definition lists alles machen kann zeigt Scott McDaniel in ” Manipulating Definition Lists for Fun and Profit“. This entry was posted [...]
I am a bit sad I can’t see all the pictures but it sounds fascinating!
Thanks Mathilde, I have the image links patched up now. I changed hosts recently and I didn’t realize those images got left out.
Enjoy!
[...] Styling definition lists and manipulating definition lists — Learn how to properly style definition lists using style sheets. [...]
[...] Manipulating Definition Lists for Fun and Profit [...]
Definition lists: che cosa sono…
Che cosa sono le definition list? A cosa servono? Che vantaggi posso trarre dal loro uso?……
to avoid collapsing (in firefox) i added a bottom margin for the dt same as the height as the dd and some slack space (if needed). an extra pixel didn’t do it for me, because i used borders. buy
Thank you so much for sharing this. It is extremely helpful, and easy to understand.
I have been struggling to push the functionality of WordPress using the capabilities in my current installation, and this is a real breakthrough.
Glad this artilce is still getting read. Someday I need to write that planned Part II!
[...] Definisjonslister er en liten perle som har et langt strre potensiale enn mange innser, spesielt ettersom man kan trylle frem lekre og praktiske presentasjoner ved hjelp av CSS. [...]
[...] Scott Daniel gives good writing in Manipulating Definition Lists for Fun and Profit [...]
[...] durch diesen Beitrag habe ich mich mal daran gesetzt und auf meiner Spielwiese der Blogroll ein anderes Aussehen [...]
[...] Manipulating Definition Lists for Fun and Profit [...]
Well, recent Wordpress version uses ?php wp_list_bookmarks
Is it possible to make the same thing with this code ?
[...] solució —que originalment vaig veure a l’artícle Manipulating Definition Lists for Fun and Profit— seria la [...]