Html ul li - tabs

Question

I scratch my head here to make something that I thought so simple.

I have tabs created using ul / li elements.

Suppose I have the following:

• Tab1
• Tab2
• TAB3
• tab4

Tabs are displayed horizontally as:

Tab1 Tab2 Tab 3

tab4

There is a fixed width, so it overflows horizontally.

I would like the row with the least number of tabs to be at the top:

tab4

Tab1 Tab2 Tab3

How can i do this?

Thank you very much in advance

Answer 1

Thanks so much for the answers of all the guys. But maybe my question was not clear. I am also new to stackoverflow.com, so please take it easy :)

In any case, what I did last night to solve this problem is to use jQuery, delete the current tabs and re-create them, but this time add a fixed number of list / tab items on ul / row. If the tab has more than a fixed number, create a new ul element for them. Each UL element will look like a new line

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

Answer 2

I do not think you can, since you are not using any "lines". This is just text that pushes to the next line.

If your tabs come from a database, you can process them using PHP, ordering them using an array, but you still need a different way to display them. A table can be a good alternative (in this case one way or another).

Answer 3

I should not clearly understand your question, but you are trying to separate the last tab li element from the other li elements:

This can be done using:

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

and perpendicular last li, to become the first, use jQuery like:

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

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 out http://jsfiddle.net/mxgNT/

Answer 5

I don't know which language you want to use for this, but here is the jQuery solution:

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

JQuery

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

UPDATE: float styles added

Answer 6

It may seem a little confusing at first. 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/

Answer 7

Without looking at your css style tabs, it's hard to say. But consider using some tabbed interface from some frameworks, such as boot tabs, foundation tabs, or jQuery ui tabs. If you are using a premium tab app, look at the zozo tabs, which have many examples.

http://zozoui.com/tabs

amuses

Faridesign