Previous Message
Next Message

Re: [css-d] Definition list display table-like

Sent by T. Daniel on 6 May 2003 16:04


----- Original Message -----
From: "Niket Kaisare" [EMAIL-REMOVED]>
To: [EMAIL-REMOVED]>
Sent: Monday, May 05, 2003 3:57 PM
Subject: [css-d] Definition list display table-like

> Questions:
> 1. Are tables appropriate here? Should I go for Definition list instead?

It could be argued that tables are appropriate here, and I probably wouldn't
argue against that. But it could also be argued that <dl> is appropriate,
and that's the way I would personally go if possible - but that's my
personal opinion, not a dogmatic one.

A related discussion can be found at:
http://lists.w3.org/Archives/Public/www-html/2003Mar/thread.html#72

> 2. If I use <dl>, how do I get them to display as above?
> table-cell and display: table-row. Neither worked.

 I've listed some code below that might help.

> 3. Should "Summary" also be a <dt> + <dd> or should it be <h3> + <p>
> instead?

Ideally, I would list it the same way as the rest of the data, but in the
sample below, that didn't work out too well. It probably just needs a bit
more tweaking. But in the interest of time, I've cheated and put them into
header/paragraph form instead.


the CSS:
dl
 {
 display: block;
 }

dt
 {
 clear:   left;
 display:  block;
 font-weight: bold;
 float:   left;
 width:   125px;
 }

dd
 {
 clear:   right;
 display:  block;
 white-space: nowrap;
 }

the HTML:
   <dl>
    <dt>Organization:</dt>
    <dd>Organization Name</dd>

    <dt>Location:</dt>
    <dd>Somewhere</dd>

    <dt>Focus:</dt>
    <dd>Project focus area</dd>

    <dt>Budget:</dt>
    <dd>$10,000</dd>
   </dl>

   <h3>Summary:</h3><!-- or h2, or h4, or whatever is appropriate -->
   <p>
    This is one paragraph summary on the project. Lorem ipsum dolor sit
amet,
    consectetuer adipiscing elit. Etiam bibendum, justo vel venenatis
dapibus,
    dui risus tempor augue, vitae sollicitudin pede lectus nec felis.
   </p>

I've tested this sytem in Mozilla, Opera, and IE on Windows and it seems to
work fairly well, IMO.

One down-side of the technique is that it  requires you to manually set the
width of the <dt> - it won't automatically adjust to fit its contents, like
a <td> would.

Hope that helps,

T. Daniel


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

Message thread: