Previous Message
Next Message

Data Definition list query - solution

Sent by Brian Lowe on 3 July 2005 00:12


> I am wondering if it is possible ti get a data definition list to 
> laytout like a 3 column table.
 
> for example:
 
> col 1 (dt)      col 2 (dd)     col 3 (dd)

How about this...

http://domain799642.sites.fasthosts.com/demo/check2.htm
(Styles are inline)

dl {
  line-height: 1;
  margin-left: 12em;
}
dt {
  clear: both;
  margin-top: .3em;
  width: 12em;
  margin-left: -12em;
}
dd {
  float: left;
  width: 12em;
  margin: -1em 0 0 0;
} 

For <dl>
Set the default margin for everything in the dl to be a known distance from
the left edge, and a known line height.

For <dt>
Clear floats (because the dds are floated), create some space between terms,
set a known width and then shift the term left by the same distance (back to
the left edge).

For <dd>
Float left, set a known width (so a following dd will also be a know
distance away) and shift the top edge up so that it's in lin with the term
(it would normally be on the line below)

My demo also sets background colours just so that I can see where elements
are, and also an extra class on the second <dd> so you could use alternate
colouring, border, etc.



-----Original Message-----
From: stu [EMAIL-REMOVED]] 
Sent: 01 July 2005 15:01
To: [EMAIL-REMOVED]
Subject: [css-d] Data Definition list query


______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: