Dynamic positioning

[Griff]

I wish to replicate the behaviour of a MS Tabbed dialogue control on a web
page.

Imagine the scenario where there are three lines of tabs (3 tabs on each,
totalling 9 tabs).

If a user selects one of the tabs on the top or middle row of tabs, then
that row gets re-positioned to become the bottom row.

Now, I've an idea how to go about this, but have no idea whether it's the
best way and would appreciate some advice.

Firstly, I'd create the following DIV structure:

<div class="tabbedControl">
<div class="tabHeader">
<div class="tabHeader1">
<ul><li>tab1</li><li>tab2</li><li>tab3</li></ul>
</div>
<div class="tabHeader2">
<ul><li>tab4</li><li>tab5</li><li>tab6</li></ul>
</div>
<div class="tabHeader3">
<ul><li>tab7</li><li>tab8</li><li>tab9</li></ul>
</div>
</div>

<div class="tabBody">
<div class="data1">
</div>
<div class="data2">
</div>
<div class="data3">
</div>
<div class="data4">
</div>
<div class="data5">
</div>
<div class="data6">
</div>
<div class="data7">
</div>
<div class="data8">
</div>
<div class="data9">
</div>
</div>

The idea being that if the <li> tab7 is displayed, then data7 will be made
visible and all the other data divs will be renedered invisible.

But....how to order the rows of tabs...?

My guess is that when the page loads, I'd create a CSS rule for tabHeader1,
tabHeader2 and tabHeader3 which had ABSOLUTE positioning and top, left
properties set to certain pixel values.

If one of the tabs is called, it would have to call a JavaScript function to
dynamically change these values by passing the class name of it's parent
DIV.

Is that the best way to achieve this?

Many thanks in advance

Griff

 

[Adrienne]

I wish to replicate the behaviour of a MS Tabbed dialogue control on a
web page.

Personally, I don't like tabs that move around because I'm never sure which
tab I have visited, and then I wind up going back needlessly. I would
prefer that tabs stay in the same place. I'm sure there are others who
feel the same way.

Users might be familiar with this for programs, but the WWW is not a
program, and they might be confused, or keep on going back like I do.

You might be better off with a CSS drop down menu. Google for CSS
suckerfish for examples.