At 04:08 PM 3/29/2006, Peter Michaux wrote:
>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.
Peter,
Here's one way to implement a tab control with DL:
_________________________
Apply styling to change the DL to a tab control only when JavaScript
runs. Run the DTs across the top as your tabs, and show only the one
currently-selected DD below:
_________________________
1) In HTML, make each DT a hyperlink to facilitate accessible
navigation. JavaScript will add the "jstabs" id to the DL so that
the following CSS will apply only when js executes.
<dl id="" class="">
<dt class="item1"><a href="#item1">Coffee</a></dt>
<dd class="item1">Black hot drink</dd>
<dt class="item2"><a href="#item2">Milk</a></dt>
<dd class="item2">White cold drink</dd>
</dl>
(These enumerated class names could easily be added by JavaScript.)
_________________________
2) JavaScript initializes by adding the id and the class of the
default (or requested) tab:
<dl id="jstabs" class="item1">
...
_________________________
3) In CSS, lay out the DT tabs as a horizontal row of blocks:
dl#jstabs dt
{
display: block;
float: left;
width: #em;
etc.
}
_________________________
4) Show only the currently selected DD panel:
/* set the DL as the framework for its absolutely-positioned children */
dl#jstabs
{
position: relative;
}
/* default = panels hidden */
dl#jstabs dd
{
position: absolute;
left: -1000em;
width: 999em;
}
/* on-state = panel shows */
dl#jstabs.item1 dd.item1,
dl#jstabs.item2 dd.item2,
dl#jstabs.item3 dd.item3,
etc.
{
left: 0;
top: #em; /* move it down below list of DT tabs */
width: ##em;
etc.
}
_________________________
5) When JavaScript initializes, it assigns the onclick behavior to
the DTs (or their As). The onclick function copies the DT's
className to its parent, replacing any existing "item#" class in the DL.
_________________________
I've used a method of displaying the current panel by matching class
names between parent and child. An alternative method assigning an
"active" class to the currently-selected DT & DD and remove it from
the previously-selected tab & panel. The way I usually do that is to
establish a global variable that points to the object that's
currently selected, so when the next item is selected I can easily
remove the class name from the globally-pointed element without
having to search the list for "active".
If either JavaScript or CSS is disabled, the markup will render as a
(vertical) sequence of DT-DD pairs.
If you want the tabs to appear at the beginning like a table of
contents to the panels when JS or CSS aren't active, you'll need to
use another markup structure such as a list of links followed by a
list of panels.
Regards,
Paul
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
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/
