html ul li - tabs

Question

I'm scratching my head here for something I thought could be so simple.

I have a tabs created using ul/li elements.

Suppose I have the following:

• Tab1
• Tab2
• Tab3
• Tab4

The tabs gets displayed horizontally like:

Tab1 Tab2 Tab 3

Tab4

There is a fixed width, so it overflows horizontally.

What I would like to have is the row with lowest number of tabs to be at the top like this:

Tab4

Tab1 Tab2 Tab3

How can I accomplish this?

Many thanks in advance

Answer 1

Many thanks for all the responses guys. But maybe my question wasn't clear. Also I'm new to stack-overflow.com so please take it easy on me :)

Anyway, what I did last night to solve this issue was using jQuery, remove the current tabs and re-create them - but this time add a fixed number of list-item/tabs per ul/row. If there are more than the fixed number per tab, then create a new ul element for them. Each UL element will be like a new row

Here's my javascript/jQuery

// contains tab headers and contents
var tabsContainer = $('.tabs');
// this is a UL element containing the tab headers
var currentUlElement = $('.tabNavigation');
// this are the LI elemets which are the actual tabs
var currentLiElements = currentUlElement.children('li');

// we can only have 6 tabs plus the '+' tab (total 7) in a row.
// if there's mroe than that we need to sort the overflow
if (currentLiElements.length > 7) {

    // remove all current tab headers
    currentUlElement.remove();

    // create new tab headers container
    var newUlElementRow = $('<ul />');
    // make the list items appear like tabs
    newUlElementRow.addClass('tabNavigation');
    // add the new tabs header container to the front of the main tab/content container control
    tabsContainer.prepend(newUlElementRow);

    for (var index = 0; index < currentLiElements.length; index++) {

        // if one row of tabs is complete
        if (index == 6) {
            // create a new tab headers container
            newUlElementRow = $('<ul />');
            // make the list items appear like tabs
            newUlElementRow.addClass('tabNavigation');
            // add the new tabs header container to the front of the main tab/content container control
            tabsContainer.prepend(newUlElementRow);
        }

        // add the tab/list item to the new tab headers container
        newUlElementRow.append(currentLiElements.get(index));
    }

    // re-enable the tab click actions
    trackNetPeople.SetupTabs();
}