RE: [WSG] Definition List for Products/Items with Image

Tue, 04 Apr 2006 18:42:19 -0700

I've been enjoying this disucssion, especially as this is something I have to deal with a lot. 
 
I like the solution from Richard, but I don't like having the image absolutely positioned.  It's similiar to absolutely positioning a column, when the image is the tallest 'column' (ie, there's very little text) then it overlaps the next entry. 
 
I would look to adjust this with the following css which is inspired by some of the negative margin any order column layouts floating around. 
 
Put the image width as a left padding on the dl (less repetition of this value, no need to apply dt and dd left margins) and float the image left with a negative left margin equal to it's width.  This shifts the image completely into its own left column.  Then, to account for the dt and dd left padding/margin (the space between the columns), make the image position relative and move it left by that amount.  This lets you mix units for the column spacing and image width.  This should work in IE6, firefox, safari etc and IE5 with some width/padding adjustments.
 
 
body {
 font: 70%/1.5 Verdana, sans-serif;
}
 
dl {
 width: 300px;
 margin: 0;
 padding: 0 0 1.5em 100px; /* make padding left the width of the img */
}
 
dt {
 margin: 1.5em 0 0 0;
 padding: 0 0 0.4em 1.5em;
 font-weight: bold;
 clear: left; /* start clear of the last floated img */
}
 
dd {
 margin: 0 0 0 0;
 padding: 0 0 0 1.5em;
}
 
dd img {
 position: relative;
 top: -1.5em; /* move top flush with top of dt, doesn't work when dt is multi line however */
 left: -1.5em; /* move left by amount of dt and dd padding-left */
 float: left;
 /* 'suck' the img to the left by the images width */
 margin-left: -100px;
 /* just to leave some room for border's on img etc.  You'd normally just remove this and use the correct width for the margin left  */
 margin-right: -10px;
}
 
 
Regards,
Eric
 
________________
Eric Orton
Development Consultant
Areeba Solutions Pty Ltd
Level 9/607 Bourke Street
Melbourne VIC 3000 Australia
ph:   +61 3 9629 3111
fax:  +61 3 9629 3122
[EMAIL PROTECTED]
http://www.areeba.com.au/
 

From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of Daniel Nitsche
Sent: Wednesday, 5 April 2006 10:55 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Definition List for Products/Items with Image

Great work!

The only (very minor) issue I can see, is the image is not vertically aligned when the product title wraps to two lines, but as you have written, you can adjust the width to suit.

Also works in Firefox and Konqueror (Linux).

Daniel Nitsche

On 4/5/06, Richard Czeiger <[EMAIL PROTECTED]> wrote:
Aha!
 
Following on from my chat with Micky, I've decided the best place (semantically) for an image is in a <dd>.
After playing around a little, I think I've got it!
Check out the following address:
 
 
This works in PC FireFox, PC IE (with only one hack) and Mac Safari 2.
The HTML about as clean as it's going to get.
Also, resizing the text works like a charm...
The positioning of the image (regardless of whether it's a <dt> or a <dd>) was inspired by Thierry - nice one, mate  ;o)
 
What do you think?
 
R  :o)

------------------------------------------------------
"This email is intended only for the use of the individual or entity named above and contains information that is confidential. No confidentiality is waived or lost by any mis-transmission. If you received this correspondence in error, please notify the sender and immediately delete it from your system. You must not disclose, copy or rely on any part of this correspondence if you are not the intended recipient. Any communication directed to clients via this message is subject to our Agreement and relevant Project Schedule. Any information that is transmitted via email which may offend may have been sent without knowledge or the consent of Areeba."
------------------------------------------------------

Reply via email to