Question

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

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.