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

Hirsch

you have a maximum amount of rows? – Talented

no, also the number of tabs are dynamic. – Hirsch

Answer 1

I may not have understood your question clearly, but you seem to be trying to separate out the last tab li element from other li elements:

This can be done using:

.tabs ul li:last-child {
  display: block;
}

and perpending last li to become first, use jQuery as:

$(function(){

   $('.tabs ul').prepend($('.tabs ul').find('li:last'));

});

Am‚lie

I think he means that if any li elements that are shown underneath a complete "row" (I know it's not really a row) and do not form a complete "row" themselves should be placed above the complete "rows". Rather than simply taking the last li element in the list. – Whensoever

its not the last item, its all the remainder items after rendering a full row – Hirsch

Oh, I'm bit naughty by the way! And as you also know, this answer is not be acceptable anyway! – Am‚lie

Answer 2

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();
}

Hirsch

Answer 3

I don't think you can, since you're not using any "rows". It's simply text that gets pushed to the next line.

If your tabs come from a database you could process them using PHP, ordering them using an array, but you'll still need another way to display them. A table may be a good alternative (in this case anyway).

Ventriculus

thanks for the quick response. the ordering is not important, its the display - i'm going to play around with jquery – Hirsch

Answer 4

You can write like this:

HTML

<ul>
    <li>test4</li>
    <li>test1</li>
    <li>test2</li>       
    <li>test3</li>
</ul>

CSS

li + li{
    float:left;
}

Check this http://jsfiddle.net/mxgNT/

Favourable

Answer 5

I don't know what type of language you want to use to accomplish this, but here is the jQuery solution :

LIVE EXAMPLE : http://jsfiddle.net/gzZ6C/1/

jQuery

$(function(){
    $('ul').prepend($('ul').find('li:last'));
    $('ul').find('li:not(:first)').css('float','left');
});

UPDATE : added the float styles

Metatarsus

Answer 6

May sound a little confusing at first glance. But not too difficult.

css :

ul {position:relative;}
ul li {padding:3px 10px;height:20px}
ul li:last-child{position:absolute}
ul li:not(:last-child) {float:left;color:green;margin-top:20px; /*height of li*/}
​

Live Demo:

http://jsfiddle.net/f6GEp/

Sibel

Yes, Because IE8 and lower don't support css3 selector. quirksmode.org/css/contents.html – Sibel

Please don't worry about IE support anymore. – Maximomaximum

Answer 7

Without looking at your tabs css style its difficult to tell. But consider using some tabbed interface from some frameworks like like bootstrap tabs, foundation tabs or jQuery ui tabs. If your for a premium responsive tabbed solution, have a look zozo tabs, which has a lot of examples.

http://zozoui.com/tabs

cheers

FariDesign

Kirsten