Previous Message
Next Message

CSS to format <dl> as tabbed pane

Sent by Peter Michaux on 30 March 2006 01:01


Hi,

I'd like to learn how to use CSS to display a definition list as a
tabbed pane. I think this would be a nice way to relate the tab and
the content in case the browser is not CSS or the document is being
presented aurally. Any tips on how to do this might get me headed in
the right direction.

The definition list would be simple HTML like

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

The tabbed pane have the tabs along the top and a content cell below.
I imagine the various <dd> elements would just be overlapping. I will
be activating this with JavaScript so really I'm just interested in
how to position these items. Then the JavaScript can change the
visibility or display of the possible content cell.

---------------------
| Coffee | Milk |
--------------------------------------------------------------------------
|
|  White cold drink
|
--------------------------------------------------------------------------

Any ideas?

Thanks,
Peter
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
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:

Possibly related: