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=item1a href=#item1Coffee/a/dt
dd class=item1Black hot drink/dd
dt class=item2a href=#item2Milk/a/dt
dd class=item2White 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/
