Hi,
I am trying to turn a definition list into an attractive tabbed pane.
The user clicks on one of the definition titles and the associated
definition is set to display:block by JavaScript. The CSS part is
causing me some grief.
In the example below, I would like the grey <dl> to contain all of the
green <dd>. If this is the case, then there would be grey in the
bottom left side of the output (below the blue). I have used absolute
positioning and don't know if it is possible to do what I want. I hope
there is a simple way without altering any of my markup. Any
suggestions greatly appreciated.
Thanks,
Peter
<head>
<title>tabbed pane</title>
<style type="text/css">
.tabbedPane {background:grey; position:relative;}
.panel {margin:0; left:10em; background:lightgreen; position: absolute;}
.tab {width:10em; cursor: pointer; background: lightblue;
float:left; clear:left;}
</style>
</head>
<body>
<dl class="tabbedPane">
<dt class="tab">One</dt>
<dd class="panel">Usually people put some Greek in places like
this.<br />Usually people put some Greek in places like this.<br
/>Usually people put some Greek in places like this.<br />Usually
people put some Greek in places like this.<br />Usually people put
some Greek in places like this.<br />Usually people put some Greek in
places like this.<br />Usually people put some Greek in places like
this.<br />Usually people put some Greek in places like this.<br
/>Usually people put some Greek in places like this.<br />Usually
people put some Greek in places like this.<br />Usually people put
some Greek in places like this.<br />Usually people put some Greek in
places like this.<br />Usually people put some Greek in places like
this.<br />Usually people put some Greek in places like this.<br
/></dd>
<dt class="tab">Two</dt>
<dd class="panel" style="display:none;">Definition 2</dd>
</dl>
</body>
</html>
______________________________________________________________________
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/
