Multiple row Tabs using CSS

Question

Hello, i can't find a way to do multiple row tabs with ASP.net ajax tab control. I also can't find a tutorial or example on using CSS to make multiple row of tabs.

In case you don't understand what i'm looking for here is a image of what i'm looking for http://bp1.blogger.com/_WCGCQYWEaxs/Rq1c2bLNMDI/AAAAAAAAABU/0sKw_CrKLL4/s1600-h/dsd.jpg

Can someone give me a link on how to achieve multiple row of tabs?

Answer 1

I usually use an unsorted list (UL) with its list items floated so they stack next to each other. There are plenty of nice tutorials on the web, just google "CSS tabs". Here is a nice one from A List Apart.

Answer 2

Well each tab is a li object. Set each to float:left and unless you've set an absolute height on your ul container, when you run out of space on the first line, the lis should wrap onto the next line.

Something as simple as this should work but it might need some kicking:

<ul id="nav">
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
</ul>

CSS:

#nav {width:200px;}
#nav li {float:left;background:#eee;}

As for the backgrounds, as Eran says, you'll want to use the sliding doors method. It's fairly simple and it should be possible without adding any extra HTML, just modifying the CSS to something like this:

#nav {width:200px;}
#nav li {float:left;background:url(tab-bg.png) top right no-repeat;padding-right:5px}
#nav a {float:left;background:url(tab-bg.png) 0 -5px no-repeat;padding-left:5px}

Please bare in mind, I've made all this code up on the spot. Yours should look similar but remember mine is completely untested. Read the full sliding doors tutorial to find out what I'm talking about and how it works.

Edit: I've just re-read the title and tags. You want this for a prefab ASPNET control. I'd see if you can do a pure CSS method. Try applying the sliding door method to what you've got. If you can't figure out how to work with the current HTML, edit your question and post it underneath and I'm sure somebody can help you get your tabs behaving.

Answer 3

If you inject a closing span and div then a new div into the Headertemplate of the last tabpanel on a row the tab panles will split onto multiple rows (seems to work for me anyhow). You could use css rather than the style stuff that follows but I have only looked at this for a couple of minutes

example of the last tab on a row

<cc1:TabPanel ID="tbpnAttLists" runat="server" HeaderText="Attribute Lists">
       <HeaderTemplate>
        Attribute Lists

             </span></div><div class="ajax__tab_xp" style="width:100%; border-bottom:solid 1px silver; border-right: solid 1px silver; border-left: solid 1px silver;font-family:verdana,tahoma,helvetica;font-size:11px; ">

         </HeaderTemplate>