WOW! Eric, I love it!
:o)
It's so clean and minimising need
to restate the image width is exactly what I was after... :o)
Legend!
R
----- Original Message -----
From: Eric
Orton
Sent: Wednesday, April 05, 2006 11:37 AM
Subject: [Norton AntiSpam] RE: [WSG] Definition List for
Products/Items with Image 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 [EMAIL PROTECTED]Level 9/607 Bourke Street Melbourne VIC 3000 Australia ph: +61 3 9629 3111 fax: +61 3 9629 3122 http://www.areeba.com.au/
------------------------------------------------------ |
- Re: RE: [WSG] Definition List for Products/Items with Ima... Richard Czeiger
- Re: [WSG] Definition List for Products/Items with Im... Thierry Koblentz
- Re: [WSG] Definition List for Products/Items with Im... Thierry Koblentz
- RE: [WSG] Definition List for Products/Items with Im... Eric Orton
- Re: [WSG] Definition List for Products/Items with Im... Thierry Koblentz
- Re: [WSG] Definition List for Products/Items with Im... Paul Novitski
- Re: [WSG] Definition List for Products/Items with Im... Richard Czeiger
- Re: [WSG] Definition List for Products/Items with Im... Micky Mourelo
- Re: [WSG] Definition List for Products/Items with Im... Paul Novitski
- Re: [WSG] Definition List for Products/Items with Im... Tim Trautmann
- Re: [WSG] Definition List for Products/Items with Im... Richard Czeiger