Clever Geek Handbook

Multiple row tabs using CSS

I can't find a way to make multiple row tabs using ASP.NET ajax control. I also cannot find a tutorial or example of using CSS to create multiple rows of tabs.

If you don't understand what I'm looking for, this is the image of what I'm looking for http://bp1.blogger.com/_WCGCQYWEaxs/Rq1c2bLNMDI/AAAAAAAAABU/0sKw_CrKLL4/s1600-h/dsd.jpg

Can anyone give me a link on how to achieve multiple rows of tabs?

+1


source to share


3 answers


Well every tab is an object li

. Set each one to float:left

, and if you didn't set the absolute height in the container ul

, when you run a space on the first line, it li

should wrap to the next line.

Something simple how this should work, but it might take a few feet:

<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 background, as Eran says, you need to use the sliding door method. It's pretty straightforward, and should be possible without adding additional HTML, just changing 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 note, I made all this code in place. Yours should look similar, but remember mine is completely untested. Read the complete sliding door tutorial to see what I'm talking about and how it works.

Edit . I just reread the title and tags. You want it to be for the ASPNET collector. I would see if you can do a pure CSS method. Try applying the sliding door method to what you have. If you can't figure out how to work with the current HTML, please edit your question and post it at the bottom and I'm sure someone can help you get your tabs driven.

+2


source


I usually use an Unsorted List (UL) with its list items stacked so that they stack next to each other. There are many good tutorials on the internet, just "CSS tabs". Below is a good one from A List.



+1


source


If you enter closure Span and Div and then newin the header template of the last tab bar in a row, the panles tab will be split across multiple rows (seems to work anyway for me). You can use CSS , not the styling stuff that follows, but I only looked at it for a couple of minutes.

An example of the last tab on a line:

<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>
0


source






More articles:


All Articles