Scott McDaniel boulder, colorado

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

This entry was posted on Monday, May 9th, 2005 at 10:11 pm and is filed under Wordpress, Design. You can follow any comments to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.