Tabbed Panels from Definition List

Hello everyone,

Hopefully someone can help me out.

I have a definition list which has one dt per dd (pretty typical). Now, the tricky part is I want to be able to pull each dt to the top so I can create a kind of tabbed content.

Can anyone think of a method which doesn’t involve me manually specifying the left value for absolutely positioned dts?

Thanks,
Chris

Here is a way to do it. I have written the resulting list of dts to the page. You may have other ideas on what to do with it. I have used inline scripts to make it clear what is going on.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Definition list manipulation</title>
<script type=“text/javascript”>
<!–
var allDTs
function getDT()
{ allDTs=document.getElementsByTagName(“dt”);
var build=‘<p class=“smlB”>List of DTs<\/p>
‘;
for(var i=0;i<allDTs.length;i++)
{build+=’<p>’+allDTs[i].innerHTML+'<\/p>
';
}
document.getElementById(“output”).innerHTML=build;
}
//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial, helvetica, sans-serif; color:#000; font-size:13px; font-weight:bold }
dd { color:#00F; }
#output p { margin-top:0px; margin-bottom:5px; color:#F00; }

.smlB { font-size:12px; font-weight:bold; color:#000080; }
–>
</style>
</head>

<body onload=“getDT()”>

<dl>
<dt>House</dt>
<dd>Dwelling for people</dd>
<dt>Nest</dt>
<dd>Dwelling for birds</dd>
<dt>Burrow</dt>
<dd>Dwelling for rabbits</dd>
</dl>
<div id=“output”>
</div>
<!-- end output –>

</body>

</html>

Thanks for the attempt. Unfortunately that uses a lot of generated HTML, which I’m not a fan of.

I wound up using a technique very similar to the one described here: http://robmaurizi.com/extra/tabs.html

It requires me to position each dt, but I prefer this to having to generate a lot of extra markup.

Haven’t tried this but wondering if you could just use float instead of positioning each dt?

http://snippets.aktagon.com/snippets/314-How-to-make-a-horizontal-definition-list-dl-dd-dt-

Here’s another one

It looks like that’s going the other direction (with tabs on the left side).

I tried floating them (and using all possible arrangements of display) and they space horizontally how I wanted, but all of the dts that come after the dd stay below that dd.

I just edited the example page you gave in firebug. I was able to take out the positions and float them all left


dl#program_details dt#tab_overview, dl#program_details dt#tab_works, dl#program_details dt#tab_var, dl#program_details dt#tab_billing, dl#program_details dt#tab_legal  {
			float: left;
		}

This is off the top of my head so may not be 100% but try it out.

You’re right, it does work.

I found what is different between mine and their example. He has the DD set to position: absolute as well. However, in my case, I can’t have DD set to position: absolute (because I need it’s parent to stretch to appear properly).