Also Dan, when you add another <dd> the -30 in the top margin makes it all
screwy...
R
----- Original Message -----
From: "Dan Bowling" <[EMAIL PROTECTED]>
To: <wsg@webstandardsgroup.org>
Sent: Monday, April 03, 2006 2:19 PM
Subject: Re: [WSG] Definition List for Products/Items with Image
Well, I tried that example, and it creates some problems with wraps in
FF. Here is what I came up with ...
<html>
<head>
<style type="text/css">
dt {float: left;}
dt img { float: left; }
dd {float: right; width: 150px; margin: -30px 0 10px 0;}
dl {width: 200px;}
</style>
</head>
<body>
<dl>
<dt><img src="" height="50px" width="50px" />Title</dt>
<dd>more text again aga inajhad ajkdhjakshdasj jkahdkjasdasjk adasdas
adsada adasd adadasfasfa asdad ad as ad</dd>
<dt><img src="" height="50px" width="50px" />Title</dt>
<dd>more text again aga inajhad ajkdhjakshdasj jkahdkjasdasjk adasdas
adsada adasd adadasfasfa asdad ad as ad</dd>
<dt><img src="" height="50px" width="50px" />Title</dt>
<dd>more text again aga inajhad ajkdhjakshdasj jkahdkjasdasjk adasdas
adsada adasd adadasfasfa asdad ad as ad</dd>
</dl>
</body>
</html>
On 4/2/06, Richard Czeiger <[EMAIL PROTECTED]> wrote:
OK Lachlan - following your example, let's stretch it to something
practical:
<style>
dl {width: 300px; }
dt img { float: left; }
</style>
<dl>
<dt><img width="100" height="100">Title</dt>
<dd>Description lorem ipsum dolor sit emet. Description lorem ipsum
dolor
sit emet. Description lorem ipsum dolor sit emet. Description lorem ipsum
dolor sit emet. Description lorem ipsum dolor sit emet. </dd>
<dd>Price, etc...</dd>
</dl>
Now the description goes under the image - not what we want at all!
So should we float the <dd>s?
R
----- Original Message -----
From: "Lachlan Hunt" <[EMAIL PROTECTED]>
To: <wsg@webstandardsgroup.org>
Sent: Monday, April 03, 2006 1:50 PM
Subject: Re: [WSG] Definition List for Products/Items with Image
> Richard Czeiger wrote:
>> There's a list of products/items that have the following
>> characteristics:
>>
>> Product Title
>> Product Image
>> Product Description
>> Possible Additional Information (let's say 'Price' or something)...
>>
>> I'm thinking a Defintion List would be the way to go right?
>> Should the Image be a DT or a DD?
>>
>> How would you style it to acheive the following layout?
>> www.grafx.com.au/wip/productList.gif
>
> Maybe something like this:
>
> <dl>
> <dt><img> Title
> <dd>Description...
> <dd>price, etc...
> </dl>
>
> dt img { float: left; }
>
> --
> Lachlan Hunt
> http://lachy.id.au/
> ******************************************************
> The discussion list for http://webstandardsgroup.org/
>
> See http://webstandardsgroup.org/mail/guidelines.cfm
> for some hints on posting to the list & getting help
> ******************************************************
>
>
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
--
Dan Bowling
715 682 1401
http://www.northlander.org
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
