ACJ’s Scalable rounded edges

Posted: November 23 2004

Arthur Lugtigheid was wondering whether his online example could be adjusted so that it also scales horizontally.

Markup

I decided to leave the markup the same. (I added a class, but that�s solely to make a distinction from the original dl.) Granted, I was wondering what the empty a is doing there, but semantics is worth a discussion on its own. Perhaps I�ll get back on that at a later point.

<dl class="scalable">
<dt><a>This is a &lt;dl&gt;</a></dt>
<dd><p>Can you help me to make this both vertically and horizontally scalable?</p></dd>
</dl>

Style

I wrote a style sheet from scratch, but based it heavily on the original (as in; aiming for the same visual output on default). It took three little steps:

Translated all dimensional values to their em equivalents (using the 10px font size that Arthur set on the body).
Removed all margins, and set padding values. Margins are no good because of their collapsing behaviour, etc.
Create five images:

These steps resulted in the following code:

dl.scalable {
	background: #eee url(acj.gif) repeat;
	margin: 0;
	padding: 0;
	width: 19em

}

dl.scalable dt {
	background: transparent url(acj_top_left.gif) no-repeat top left;
	color: #000;
	margin: 0;
	padding: 0
}

dl.scalable dt a {
	background: transparent url(acj_top_right.gif) no-repeat top right;
	display: block;
	margin: 0;
	padding: 1em 1.5em .2em 1.5em
}

dl.scalable dd {
	background: transparent url(acj_bottom_left.gif) no-repeat bottom left;
	margin: 0;
	padding: 0
}

dl.scalable p {
	background: transparent url(acj_bottom_right.gif) no-repeat bottom right;
	margin: 0;
	padding: 1.33em 1.5em 2.33em 1.5em
}

Example

: A screenshot of the sample page which it is linked to.

Concluding

The little style sheet I wrote doesn't require any markup changes, is pixel perfect in Moz and IE with the original when default values apply, and it scales smoothly in all directions (even the paddings co-operate).

There are quite a few of limitations though. What would happen if an item (dd, in this context) contains more than one paragraph (p)? The bottom right border would repeat. Ouch. I could have worked around this by using pseudo-classes/elements, but then I'd break compatability with Internet Explorer (for one).

It'd be a wise idea to evaluate the markup in its entire, but�like I said before�that's a discussion on its own.

ACJ

Comments

14 comments so far.

1/14

this is awesome. your bottom right image is 404 btw.

Posted by: Brian on November 24, 2004, at 05:36

2/14

If you have multiple paragraphs, you could encapsulate them in a containing div and then apply the style to the div.

Posted by: Jonathan Snook on November 24, 2004, at 16:06

3/14

Your example page has no background-color... meaning the effect is lost in any browser with a default background-color other than white (like mine).

Posted by: Milo on November 24, 2004, at 17:21

4/14

The link has been fixed. Thanks, Brian.

Yep, that'd work, Jonathan.

Thanks, Milo. I added the following line to the style sheet:

html { background: #fff }

Posted by: ACJ on November 24, 2004, at 18:28

5/14

The simplest solution to the multiple-paragraph problem would be to add a horizontal rule (hr) tag at end end of each dd, hide it, and apply the bottom-right image to that tag.

This would have the added benefit of degrading nicely - with CSS switched off, your definition list would be separated by nice horizontal rules.

Posted by: Matthew Pennell on November 26, 2004, at 10:01

6/14

Any suggestions for multiple definitions for each list item?

For example:

DL ..DT ....DD ....DD ....DD ..DT ....DD ....DD

I'd rather not have to add a hook simply just for this trick.

Posted by: Kim Siever on November 27, 2004, at 00:27

7/14

An easy fix would be setting a class on the last dd, and refering to that, Kim. The markup would then look something like this:

<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd>
<dt></dt>
<dd></dd>
<dd class="last"></dd>
</dl>

Posted by: ACJ on November 27, 2004, at 04:44

8/14

Isn't this http://www.alistapart.com/articles/customcorners/ ? I used it in the previous iteration of a dutch restaurant-listing site I maintain, though the client decided to use a fixed width later-on.

Posted by: Bunny on November 28, 2004, at 17:22

9/14

Very cool. Thanks, ACJ. With all the hours I spent on this on Friday, I can't believe I never thought to use a "last" class. D'oh!

Thanks, again.

Posted by: Kim Siever on November 29, 2004, at 21:28

10/14

OK. First off -- Sweet article, tnx ACJ!

I am having an issue that I cannot seem to resolve. Here is my current code::

<dl class="results">
<dt id="heading"><a>RESULTS</a></dt>
<P>
<dd>row 2</dd>
<dd>row 3</dd>
<dd>row 4</dd>
<dd>row 6</dd>
</P>
<dd class="last"></dd>
</dl>

It seems to repeat all the bottom-left coners with each <DD>. I wish to use this in a page so that it acts as a detail list, is there a better way to do this? Perhaps using a <div>?

And this may be a dumb question, but how do i target the <dd class="last"> tag with this style mentioned above? Since it resides within the <dl class="results">

dd.last {}

Thanks y'all!

Posted by: pixelEngine on January 6, 2005, at 18:31

11/14

cool

Posted by: bob on July 25, 2005, at 17:46

12/14

I love theses boxes!

I was trying to add a hyperlink with the boxes, but the "a" ref throws in an additional top right corner.

Can you suggest how I would do this without wrecking frame.

Thanks

Posted by: Ross on December 14, 2005, at 12:52

13/14

what are definition lists :: che cosa sono le definition lists

http://www.sanbaldo.com/wordpress/xhtml/definition-lists/

Posted by: baldo on January 28, 2006, at 19:24

14/14

Thanks a lot, I'm looking for a while for a really easy and compatible solution. Yours is flexible, easy, clear markup - fine. Only the images are big, but a few kb are okay.

Posted by: Robert Hartl on March 22, 2007, at 20:53