silverorange labs

Comments

Comments are locked. No additional comments may be posted.

Shpolbder -

Superbest job, Daniel! It is the best css tabs I saw on the Web. Tabs from Adam Kalsey are ugly and do not react well on the font resizing in the browser (I do not say about wrong <blockquote style="font-family: 'Courier New', Courier, monospace">font: Verdana, Helvetica, Arial;</blockquote> definition in css file which is not working in IE6).

Wouter -

I had that strange glitch too. Same text display when pressing home.

Shpolbder -

Daniel, I'd like to ask: is there another way to create #fff3b3 block for secondary menu, other than create 2em border for #contents layer. The matter is border-width is fixed and it can create slight layout deformation when we resize browser font. May be it is possible to create div with background of som sort?

Daniel Burka -

Shpolbder, thanks for all the feedback. I'll fix that glitch ASAP. I made up those HTML pages pretty quickly, so I wouldn't be suprised if there are more type errors.
<p>I tried a whole bunch of ways to tie the yellow border at the top of the page to the secondary menu. With all the floating, it's very difficult without a fairly serious hack to make a background stretch the full width of the page. The final solution adds another <div> with an ID to the page, but actually makes some sense, as I want the bar to appear even when there are no secondary menus.</p>

Shpolbder -

Daniel, I mean HEIGHT of this border (which would have to change every time we change font size in the browser). Now in spite of border width is named in EM it is FIXED. My thought was to make this stripe change its HEIGHT (i.e. WIDTH of the border) according to font size changing.

Daniel Burka -

Sure, you could change the way the #main and #content work like this:
<blockquote class="code">
#main {<br />
 border: 1px solid #666;<br />
 clear: both;<br />
 background: #FFF3B3;<br />
 padding-top: 2em;<br />
}<br />
<br />
#contents {<br />
 padding: 1.5em;<br />
 background: #FFFDF3;<br />
 min-height: 300px;<br />
}
</blockquote>
But, setting a border in EMs scales properly in Gecko browsers and only breaks badly in IE at huge font sizes, so I might leave the original code the way it is.

Shpolbder -

Daniel, it would be a good idea to implement in your nice simple tabs <a href="http://www.alistapart.com/articles/slidingdoors2/" target="_blank">Sliding Doors</a> methodology... And your tabs will get all the flexibility it it possible to imagine. Next quiz, so to speak ;)

Daniel Burka -

Nice challenge about the Sliding Doors. I've intentionally kept this totally image-free for simplicity as a template for others to use.

I was kind of hoping someone else would go the next step and add the Sliding Doors to this as it would be very easy from here. If anyone decides to go ahead and do this, make sure to post a link. I'd love to see it done nicely.

Hayden Vink -

Hi Daniel. I'm loving those tabs . . . have you got any suggestions for how a third-level of navigation might be incorporated into the design?

wahid -

Peace be unto you...

Hi Daniel...
I love your tabs, they are the actually the best tabs I have seen with second level navigation.

But the best looking tabs are to be found on this site.

http://filebox.vt.edu/users/tordona/tabs/tabs-bar.html

What I would have loved, since I am a newbie and dabbles in this for the challenge of it.

I would have loved to see someone do something as smart and considerate as you have done, by creating a zip file for others who are less advanced to follow easily...
After all is that not how the technolgy grew...someone taught someone, and then that someone became a bridge, for someone else to ...

OK ...I like this site...primarly because it seems interactive, and it provides this great feedback...option...
How do I install one...?

OK back to my challenge...oops
Sorry humble request

Can someone separate please these tab scripts and place them in a zip so I can download and use....hmmmmm thanx :D

http://filebox.vt.edu/users/tordona/tabs/tabs-bar.html

Sure I do not know the standards and browser compatibility issues, but I figure I have a lot to learn and I can do so right here...

Please do not mind if I stick around. :).

Peace

Daniel Burka -

Hayden, I don't think 3 levels of navigation would work very well in a tabbed structure like this if it was built into the top nav. I'd likely include navigation in the main content area if it were required. A definition list or normal bullet list in the content would serve most purposes.

Danny Griffin -

I LOVE these tabs and want to use them.

However, when I click on a tab I see just a flash of the text before the styles are applied. It is intermittent but happens regularly.

Anyone know how to make that stop?

danl -

I like the simplicity of this design and it works well. Nice work.

My only problem is I'm having trouble positioning the main section correctly if I don't have an h1 on the page. I'd like to have the tabs at the top of the page with nothing above them. To do this, I decreased the header style height. But this leaves a gap between the tabs and the main section. This happens in both IE 6 and Mozilla 1.6.

What is the best way to adjust the vertical positions, so I don't get a gap between the row of tabs and the main section?

Thanks.

Keenan Tims -

Danny

What you're referring to is called a Flash of Unstyled Content, or FOUC, and occurs on IE when using @import to load your stylesheets. Adding any random link or script element to your head should prevent it. You can read more here: http://www.bluerobot.com/web/css/fouc.asp

Ian MacLeod -

In adapting your method of doing tabs, I came across this little tidbit that may help with one of your browser-specific hacks:

in order to "unscruntch" the tabs on certain browsers (opera, etc) you have a width set ahead of time. Not sure I like that, and I can see it being a headache if you don't want to go in and modify the skin each time you add some new tabs.

Sooo.... considering that the only browsers that have that problem are standards-compliant (more or less). instead of using width: XXem; use right:0px (or some other value you wish to use) I haven't been able to test this on konqueror yet, but it seems to be working on everything else!

Ian Gordon -

Can you post the CSS for a centered, fixed width version of these tabs? I would be very interested in them.

Jon Lesser -

I've been playing with these tab for just a little while. I am trying to get them to work without absolute positioning. Can someone assure me that it's possible and maybe point me in the right direction. Thanks for the beautiful tabs.

Chris Hemp -

Hello Hello (0.o)

Found this site via mozilla news site. Anyway, I've taken your base implementation, added about 100 lines of php code (mostly echos) to allow the tabs to be dynamic. It's backed by a tabs table related by foreign keys am article table in mysql. Though, I did change the second level tabs to look consistent with the first (I wanted the folder in a folder effect). Just a heads up so far as its not finished yet (its one big function :-(. I'm using this to learn the new php5 object/exception/etc additions and need to finish the refactor changes for that. View my homepage if your interested. Thanks again for the article. It has been really informative and simple to work with.

Rahel -

I used these tabs on a site and was just told that it looks strange in Firefox. I don't have Firefox on this computer (I'm not at home at the moment). Please, can someone help? The URI is http://www.yeul-sachir.com.

Thanks also for the tip on the Flash of Unstyled Content.

All the best,
Rahel

David -

I just played a little bit too, using this beautiful example from Daniel: http://homelesspixel.de/tabs/ Thanks

l0b0 -

This looks great, but I found an error which appears in different fashions in IE and FF: If the window width is lowered sufficiently, unwanted effects occur.
IE: The border and background for the second level navigation menu resizes according to the rest of the text (which doesn't seem to have a minimum width), causing the menu text to overflow outside the border (and subsequently have the wrong background).
FF: The text has a minimum width, but the horizontal scrollbar doesn't correspond to the page size. When the window is below approximately 640px wide, the scrollbar goes only a constant length to the right. Already at about 500px the scrollbar doesn't go far enough to the right to display all of the page.

I haven't tested this on other browsers.

James Campbell -

Great Tabs! I love them and would like to use them on a site I am working on but I was having some difficulty with the positioning of the tabs.

Any sugestions on how I can position the tabs inside a table cell? I know this isn't proper to mix it with tables and table cells, but at the moment I don't have a lot of choice. Any help would be greatly appreciated!! Thanks in advance

Tod -

Just found this tutorial and I look forward to playing around with them.

Thanks for sharing.

A wireless golfer -

Thanks alot this will save me a lot of time, can't wait to add them

Tim Kelley -

Wow I really like the updated css tabs.

I have been staring at the css and html like a cow looking at a new gate. Any chance you want to write an explanation of what is going on?
tim

Daniel Burka -

Tim: Sorry, I don't think I've got the time to give a full explanation of the CSS behind this. It's really not that complicated although some of the stuff in the nested unordered list that undoes rules in the parent list makes it look more tricky than it really is. Download the ZIP and play around with the code and it'll probably start making some sense.

Tim Kelley -

I downloaded the files and have been working with it a while.
I really like it. :-)
I'm having problems modifying it to have larger text where you have the "Example Tab" text. I need my website name and tagline up under the website name where you have this text. All of my adjustments to make this happen in the style sheet break the design.
Is this an easy fix?

thanks,

Tim

Daniel Burka -

Tim: I'm not sure why I originally tied the main header title into the height of the tabs section. Well, it seems kind of silly looking at it now. I've gone and reengineered how that works so that now the stuff above the tabs is totally independant of the stuff below it. That should fix your issue and generally improves the way this works as well. I've updated the example and the ZIP file to correspond. Let me know if you notice any browser weirdness. Thanks.

Tyrone -

Your tabs are great. I'm using the older version (released several months ago). I was interested in the new version because of its nested unordered lists, but I realized absolute positioning is now used. This would have been fine for my main navigation menu, but I occassionally use the tabs in the #content section (ie, my baby names section), where the content needs to flow directly underneath the tab. Perhaps there's a flexible work-around somewhere in the code? Jon Lesser (poster above) referenced this as well.

BTW, the new .zip version you uploaded on Nov 26, 2004 is flawed. The #secondary unordered list isn't properly nested within the #primary unordered list. You're closing the ending </li> tag before the #secondary list begins rather than wrapping it around the #secondary list. Needless to say, this will cause the page to be invalid.

Daniel Burka -

Tyrone: Thanks for the heads-up on the validation issue. That's what I get for working too quickly on getting something up. Anyhow it's fixed and the HTML is valid once again. Thanks.
<p>By the way, I really like what you've done with the tabs on your site. The subtle background image on the main tabs is nice and the subset of tabs (under the babies' names section) is slick too. And... that's a classy squidfingers pattern you've got there. All 'round nice adapation.</p>

gabibbo -

You are Great experied!

Chav -

These tabs are great - elegantly put together. Thanks... I've learned a lot customising them and playing with them in general.

Bryan -

This is some very interesting code. I will be using it on a page I am working on and will post a link. Thank you very much.

Anne -

Hello,
Great tabs. I am trying to get the current tab (ie: the page you are currently viewing) to appear in a darker color that the other tabs and am running into problems. Any suggestions?
Thanks,
Anne

Daniel Burka -

Anne: Your best bet is probably setting a class on the tab that should be current (something like <li class="current">) and then setting a special background color for that class in the stylesheet.

Teon -

Strange glitch while there are more than 6 tabs (see here). Any idea?

Lawrence Carvalho -

Great tabs. But here's a thought...I'm currently implementing this for a project and realised that the behaviour of only outputting the nested list that is "active" isn't all that great for accessibility. If you view the tabs with css off you can't see the other options available to you within the other sections. I'd rather output all of the nested lists and give these a class of inactiveSection. Then hide them via CSS with :

#menu ul#primary ul.inactiveSection {
display:none;
}

This way non css users can see all options available.

Termite -

teon: The 45em width in the header and header/primary tags is the hard right hand limit for the tabs: "width: 45em; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */"

Increasing this will give you more room for tabs, but can cause problems for those running low resolutions.

Jabo C -

Love the tabs Daniel,
I have been researching css design for the last few months. I am basically scouring the net looking for web sites that use Tabs where the header or navigation parts are fixed when the user scrolls.

I dont know about anyone else, but one thing that really annoys me about most web sites is that once you scroll down you lose the ability to navigate.

Some sites use a menu system that seems to hover & then find its place at the top of the page when you stop but I'm looking for one that is seemless.

Do you know if this can be done in CSS?

Thanks

James -

Jabo C: Though I wouldn't really recommend it since I hate the functionality you're talking about, using "position: fixed" on your navigation would do what you're looking for.

Richard Lee -

Following up Lawrences C post: "the behaviour of only outputting the nested list that is "active" isn't all that great for accessibility. If you view the tabs with css off you can't see the other options available to you within the other sections. I'd rather output all of the nested lists and give these a class of inactiveSection"
Q: How would I go about doing this? as Im relatively new to css.

Q:Secondly, has anyone or Daniel attempted creating round-cornered tabs in this abbed menu setup? Im know it will involve using images but with the current menu setup i cannot see how to set left and right rounded corner images for the life of me :(.

Thanks in advance

Richard Lee -

Hi again,

Im getting closer with m rounded corners version. Im having problems with the right corner image appearing lower than the left...solutions most welcome ;)

<!---HTML-->

<ul id="primary">
<li><a href="index.html"><span>Home</span></a></li>
<li><span id="current"><span>About Us</span></span>
<ul id="secondary">
<li><a href="philosophy.html">Our Philosophy</a></li>
<li><a href="employment.html">Employment Opportunities</a></li>
<li><a href="processes.html">Our Processes</a></li>
<li><a href="quote.html">Get a Quote</a></li>
</ul>
</li>
<li><a href="portfolio.html"><span>Our Portfolio</span></a></li>
<li><a href="contact.html"><span>Contact Us</span></a></li>
</ul>

/* CSS Document */

#header ul#primary li a{
background: #FBD024 url(../images/bgTabLeft.gif) left top no-repeat;
}

#header ul#primary li a span{
background: #FBD024 url(../images/bgTabRight.gif) right top no-repeat;
}

#header ul#primary li a,#header ul#primary li span {
width: 8em;
display: block;
float: left;
padding: 4px 0;
margin: 1px 2px 0 0;
text-align: center;
font-family: tahoma, verdana, sans-serif;
font-size: 85%;
text-decoration: none;
color: #000;
}

#header ul#primary li a:hover, #header ul#primary span#current {
background: #FFFFFF url(../images/bgTabLeftHover.gif) left top no-repeat;
}

#header ul#primary li a:hover span{
background: #FFFFFF url(../images/bgTabRightHover.gif) right top no-repeat;
}

Jabo C -

James: Thanks for the tip on Position:Fixed. I have played around with it a bit but it looks like I will need to adjust the position of some of the other elements to get what I want.

I'm not sure why you dislike having a fixed menu system on a web site. IMO As browsers mature and become more standards compliant (IE in particular), you will find that fixed menu's will become a popular feature.

Why lose the ability to navigate just because you scroll down?. It makes no sense to me.

neluas -

It's really cool! I loved it. But at this state the css is not valid, according to w3.org css validator. The errors are:

URI : http://****/tabs.css

* Line: 83 Context : #header ul#secondary li a , #header ul#secondary li span

Invalid number : text-align auto is not a text-align value : auto
* Line: 108

Unknown pseudo-element or pseudo-class last-child

Warnings
URI : http:****/basic.css

* Line : 6 Property voice-family doesn't exist for media
* Line : 7 Property voice-family doesn't exist for media
* Line : 27 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 50 font-family: You are encouraged to offer a generic family as a last alternative

C -

Att: Tyrone

Your web site is broken in Firefox

J Mitchell -

Another great example. Thanks.

Gee -

Daniel,

Well what can I say about these tabs?...other than they are probably the best tabs I have seen, no screen flashes unlike Adam Kalsey's tabs, none the less they're good too.

I've implemented these in a site that I created for a Thai/kickboxing equipment retailer with a few alterations and I think they look good. Although they work great in IE+, they're is aproblem viewing them in Firefox and Opera, is there a code fix for these browser's? If there is please hellllllllllllllllp.

Thanks again for this it's fantastic.

Zack jackson -

Can someone tell me what kind of tabs I can use for my site?
Thank you

Lars Wohlfahrt -

Nice piece of CSS :-)

brent -

the tabs are great! i haven't tinkered with it yet, but having the submenu located on the left side of the page would be ideal.

Shanti Braford -

You guys rock!

Thanks for the awesome CSS tab template.

We're using it over on Text Link Media, and of course, have given credit where credit is due =)

vegasdave2k -

I was wondering if this can be used within a single page. For example, All the text for the seperate tabs are in layers, one behind the other with the active one being the topmost. I am thinking of using this on eBay for my policies. I am trying to condense the length of my page. If this won't work, can somone point me in the right direction? Thanks all.

Robert James Ellis -

This is by far the best css tabs example that I've seen. I'm using this code as a template to assist me in making a main top menu for phpbb out of this :D
Really excellent stuff.

Thanks,
Robert

P.s: I'll make sure to link people to you and include credit on the site and in the css file.

John -

I am not very good at css as I am more of a backend developer,
so I was wondering if anyone can help the silly me with my problem

if i surround the code within a table tag

<table width=670>
<div id="header">
<ul id="primary">
<li><span>tab1</span></li>
<li>tab2</li>
<li>tabe3</li>
</ul>
</div>
<div id="main">
</div>
</table>

in ie it works fine, the width would be restricted
but firefox takes would simply ignore the 670 width and spread to the end of both sides...is there an easy way to fix this?...

john -

sorry...forgot to comment the code out

<!--<table class="tablemargindev" width=670>
<div id="header">
<ul id="primary">
<li><span>tab1</span></li>
<li>tab2</li>
<li>tab3</li>
</ul>
</div>
<div id="main">
</div>
</table>-->

Szabolcs Parragh -

Great job, I liked it so much that I chose it to make my homepage with. With some changes.

Thx!
psz

Victor Toni -

Very helpful. Thanks.

But I found one little bug:

#menuMain ul#menuSubList li:last-child a {
border: none;
}

should be:

#menuMain ul#menuSubList li:last-child * {
border: none;
}

Being on the last page on the sub-menu the will be a <span> and the original rule won't match anymore.

Victor Toni -

Sorry for the misleading post but the HTML got deleted.

Being on the last page on the sub-menu the "a" element will be a "span" and the original rule won't match anymore.

Tom Vaughn -

How do I control the placement of the first tab. I have a version of silverorange tabs css file where the tabs are not left justified but start after some gap.

kemar -

can images used as states in the tabs? If so how?

Jake Tracey -

Excellent idea and execution, i'll surely be using this technique in the future.

Mads Larsen -

Hi

Thanks for letting us use your code.

Jumping hover tabs, the tabs in the main menu, that are not current are just a little smaller than the current tab, any way of changing this so they do not seam to jump on hoover?

I have altered the css a litle, to give a darker color to the selected subject in the submenu. I have gotten it work like I want in firefox, but unfortunaly it does not work in IE. Also it does not work when you enlarge the text a little. Any suggestions on how to do this?

I will proberly keep working on this, and will let you know the result.

Mads

delemarc -

Very nice tabs, however..

How do you expand the width of the first-level tab bar. If you add more than 6 tabs on the first level, they start to wrap around....

Skiddles -

Same question as above, how can you make the tabs wider? When you enter too much text it wraps, and blows the tabs apart.

Nicholas White -

Hey,

I never in a squillion years would have been able to figure out on my own how to make CSS buttons look so damn cool. Decided to use them on my company's website; I'm pretty new to this and am trying to learn web design to add as a 'service' for potential clients, so keep the laughter to yourself.

<br><a href = "http://wemads.com/wemads/">http://wemads.com/wemads/</a><br>

Technical stuff: all the pages were written in PHP, including a loop to dynamically generate two levels of unordered lists (primary and secondary) by scanning an array in a navigation.php file filled with all the different pages I want to have in my site:

$primary = array("page1", "page2", "page3");
$secondary = array("sub_page1", "sub_page2", "subpage_3");

Each page has at the top (in PHP) two variables: $primary and $secondary, each one describing its link position in the unordered list; these get passed into a separate navigation script, and the corresponding (ul) and (li) tags are printed to a webpage.

I then applied a modified version of the tabs.css file to all the HTML elements and VOILA! some cool looking buttons.

A HUGE thanks to Daniel Burka for posting the information on how to make these cool buttons. Hopefully I'll be able to use my site as a 'resume' and get a better job.

Take care,

Nick

Michael -

found your tabs are quire cool. i wish there was a way to use that in combination with javascript on page.

Brian -

Great work on this. I'm impressed and will be looking at using much more css in the future.

For other css wannabes like myself this was also a good read:
http://www.alistapart.com/articles/taminglists/

Andrew -

@Brian: thanks for sharing the link, alistapart is quiete a googd site.

Cameron -

Very nice! EXCEPT, when no tab is active (selected). Then the span is not called and the borders disapear. It's quite common to have a Help page or other pages where you don't necessarily want a tab selected. And I don't see a way to make this solution work in that case.

fleptin -

hi! I'm using your great tabs - but I've a problem: When I use more then six tabs, the tabs are shown in a second row and that doesn't look great. I want that all tabs (more than six) are shown in one row and not that a second row starts. Does anyone know a solution for this problem?

Hugo -

Fleptin,

the header div and the primary ul both have widths specified, so if you create extra tabs
they float down to a second row. Look in the tabs.css file and experiment with the widths you
find under

#header
#header ul#primary

you will find you will be able to fit your tabs on one line (up to a point) by increasing
the widths.

Hugo

fleptin -

Hi Hugo!

Yes, I tried that now and I can make a lot of tabs in one row, but it doesn't look good. IE6 is crashing when i've more then 12 tabs in one row and i click through the tabs.

When I let width=45em; (original value) I can have maximum six tabs in one row, when I've more tabs it starts a second row. But the second row doesn't look great, because there are hohles with the background-color of <body>, only if the count of the tabs is a multiple of six like 12 (two rows), 18 (thre rows) and so on there are only tabs and no hohles in the rows.

Is there any possbility of filling this hohles with the same color like the tabs and giving them the same border? Or the holes are in the first row and the second to the last rows are full with six tabs?

background: I'm programming a web-based documentation system with PHP, the count and the name of the rows is dynamic and generated by PHP from a database. I'm a PHP-programmer and I know html very good, but I don't have good knowledge on CSS.

best regards!

*werner*

Hugo -

Hello again Fleptin / Werner :)

To be honest, I'm learning CSS myself. With these tabs, as we have seen, you can increase the
number of tabs by increasing the widths. But this only allows you to maybe have 8 or 9 tabs,
the design can't handle any amount you choose.
I think I see where you are going with having a full second row and so on - I don't think you
are going to find it easy with the current design to do this; you would need to completely
re-design the CSS.

Good luck,
Hugo

fleptin -

Hi Hugo!

Perhaps I don't have to change the design, I just want to know how can I enforce a row-return. So I could program in PHP, when I've e.g. 20 tabs that in the first row are only 2 tabs and in the next 3 rows are full each with 6 tabs.

The limit of e.g. 6 rows has sense, there's no scrolling necessary on the screen. If there would be any possiblity in the HTML or CSS code to enforce the row return I'd be happy!!!!

best regards!

*fleptin*

M.Ouwerkerk -

Great tabs.
I am an amateur in coding but I managed to have a fixed width and centered it (thanks to http://www.bluerobot.com/web/css/center1.html ). Then I had a problem in firefox; when the contents exceeded the browser height, it inserted the scroll-bar, making the box shift a bit to the left between the pages which exceeded the browser height. I fixed that by adding a min-height of 100.1% to the body element so Firefox always shows the scroll-bar.
Does anybody now a better solution for the scroll bar?

abacusdotcom -

This is as a result of hardwork. Kudo to you! Daniel. Your Good job make a super web designer in the eyes of my colleagues in the office. I can't thank you enough.

Ivan Miric -

Heya!

I was looking for a tab layout for a long time a couple of months ago, for my sister's site, and when I stumbled across your work, I knew it was right what I needed.

I implemented your tabs in this site: http://www.revistaparadigmas.com/ (excuse the lame splash page, it was requested by the owner..)

It's in Spanish, so just click on "entrar" to go in.

I basically changed the colors and adapted it to the layout I needed. Your submenus certainly came in handy in one section.

Anyways, just letting you know that you've inspired a CSS beginner into getting better and I couldn't thank you enough. Cheers!

Niclas -

Well its said before, what a nice job!!!!
However, Im having some troble with setting a global size for texts on a page that uses the tabs.
If I set an font-size in basic.css and element "body" it affects the second row of the tabs, the row gets "very high".
Ive tried to play with the tabs.css to make it override this behaviour, no luck....

body{ /* redundant rules for bad browsers */
font-family: verdana,sans-serif;
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: 33px;
color: #333;
}

Do you have any idea how I can overcome this problem?

Best regards Niclas

Hugo -

Hi Daniel,

I really like the design of silverorange.com and these tabs are great. I've just launched
my blog using these tabs as a template (and I've credited silverorange of course), so just
wanted to let you know and to say thanks very much and I'll be working hard on my CSS skills from now on.
I think I've taken the design to about as minimalist as you can..

Thanks, Hugo

Arun -

Absolutely best html/css tabs I have used. Most the tabs found on internet have multiple images, javascripts etc to work. But this is purely CSS and HTML. The easiest one to use.
Great job!

niivs -

Really love the tabs - they are definitely the best tabs around. I am really looking forward using them on a site I'm developing, but I keep having a problem with the fixed width of the primary tabs.

I have a big menu which I have been trying to 'squeeze' into the primary tabs, without making the webpage too wide.

I have finally managed to limit the primary tabs down to 7, but I would really like to make the primary tabs not fixed in width. Could anyone point me to the right direction, I don't seem to understand enough the CSS, to find the correct place to put some margin (?) values...

I'm sorry I do not have the site online yet, so no possibility to show the problems visually :/
Any help is very much appreciated!

Finqoo -

Thank you so much for this code..

Steven Chow -

Wonder if you now have an updated Ajax version of the tabs. would be happy to try that out!

Carlos Ferreira -

Great example Daniel, just the solution i was looking for. I'm wondering if this can be done with just a single page and change the css dinamically via javascript?

cheers

Paula -

The text I have on the tabs doesnt seem to be exactly centered, also the tabs are wider on firefox and so dont fit properly on my page. Can you tell me what Im doing wrong? thanks.

Phil K -

Great piece of CSS code! However it is not very practical for variable sized tabs. All browsers display them fine when I remove the width properties from #header ul#primary a,#header ul#primary span,#header ul#primary a.current and #header ul#primary. Except well... Opera. It wraps the <li> elements. Increasing the size of #header in pixels only adds massive scrollbars before Opera aligns them properly again. Any solution found yet for variable sized tabs that work in Opera too?

Robert Beltran -

Dude your tabs are awesome. Plain and simple. No caveats no nothing. I needed some tabs fast and I am a software engineer who hates doing graphics, no eye for that stuff, and your updated ones came in super handy and were SOOOOOOOO easy to implement. I really appreciate it dude. Thanks. Everyone who's saying "Oh they're great, except for ...." You guys are asses this man has put forth his design and it is good.

Thanks again,

Robert

Boda -

Great stuff Daniel, it is what I was looking for.

Thanks

Boda

Widget -

Has anyone managed to take this fab code and put 'sliding-doors' on it yet? I noticed Daniel mentioned it was easy to do, but I'm new to css and wondered if anyone had an example of it to see working? Essentially taking the GREAT code, and just modifying it with a few images to make nice rounded/graphical tabs or whatever. I quite fancied the idea of trying to make the tabs look like post-it's, or real-paper tabs.

Anyone??

Ramm -

Thank You, Daniel! It is the best css tabs...
I will to use your css tabs as an example for my future sites.

kukhka -

Very nice across the board. I did notice most of the changes, but as I tend to be a Firefox user (long story short, my Mac needs a whole lotta TLC at the moment and Safari freezes up a lot more often than Firefox), I'd missed the Safari goodies.

If this were my site, the only change I think I'd make would be to turn off the text-decoration on the post headers. It seems cleaner to me that way.

But more than anything else, I now have the itch to tweak my site. I'm more or less putting that off until the next version of Wordpress, but you've inspired me to at least start planning for it. Not that I've got the time.

Anyhow, thanks for sharing the thinking behind your changes. And nice work, as usual.

Sukh -

Very good job.
I was looking for a similar solution to this one but with images.

LV -

Hi,

I love your tabs :) However, I'm having problems correctly aligning your whole layout horizontal. For instance, I want your whole page to be 800px in width and then centered horizontally. I can get it to work in Firefox and in IE separately, but I cannot find the correct css to let it work in both browsers... Any idea?

Thanks!

Mark -

Hey! Great set of tabs, best I've seen! I do have a small query however. I notice that on all the pages <span> tags are used to denote the active page. This would obviously be a problem on a large site where ideally you would contain all the navigation in one file (and include this on each page). Is there a way to style the primary and secondary links within the lists without having to manually enclosing them in span tags? Would setting up id's on the body of each page and then setting the styles of the primary / secondary navigation via these be feasible?

Daniel Burka -

Due to ridiculous amounts of comment spam, I've shut down this thread for now. We're debating how to handle this and until we settle on a solution, feel free to email me daniel-at-silverorange.com with any questions or comments. Sorry and thanks for understanding.

trimble -

I'm running into the same sort of scaling concerns that Mark (above) presented. I've been using Adam Kalsey's tab css (http://kalsey.com/blog/2003/05/css_tabs_with_submenus/) up to now and have been very pleased with its scalability. He uses numeric ids to identify his primary (aka nav-x) and secondary (aka subnav-x) list items. These combined with a numeric id for the header (aka tab-x) allow one highlight the current tab while reusing the same unordered list. Used this way, Adam's tab structure rocks, but his does have a serious shortcoming, and that's what brought me here.

The problem I'm having with Adam's css (and which yours solves nicely) is that the secondary (subnav) links are absolutely positioned and generally a pain to position (and keep positioned). Yours just work, and look better while so doing!

To get the best of both, I've tried to reconcile the differences between your approach and Adam's, but css design is still something of an arcane science to me and I feel that I'm just stumbling around in the dark. The reusability issue is critical to me, given the number of menu's my site(s) contain. I feel that the solution is staring me in the face, but I'm just too inexperienced to see it.

Any help would sure be appreciated!

John -

I like this tab layout. But is there a way to right align the tabs so that they start from the right edge of the screen?

Regards,
John (jjohn555 <at> yahoo.com)

Fal -

Hi Daniel,
Very sweet & simple tabs, real nice.
Thanks for sharing.
Is there any licensing issus with working your code?
Thanks again,
Fal.

Sevein -

fucking spam! by the way, nice css tabs design. thanks for your work, daniel!

Kailash -

I got a problem in a tabbed menu, actually i want to display the tabs from right to left direction but i couldn't do it and have tried all the possible ways and still i cannot figure it out. So if anyone knows and have experienced this problem and solved it please help me out

thanking you

Teoman -

Hi Daniel,

after 3 days I finally found your great CSS tab and it is really cool!

thanks for sharing!
Teoman

Christoph -

I had noticed this kind of navigation before in the script: Simple Mailing List
by http://www.notonebit.com/
Know i know where the Idee is from.
Thx
Keep up the good work!

Jan Prill -

Great Tabs that work in the important browsers. Thanks for sharing!!

Cheers,
Jan Prill

random reader -

My god...the spam...it burns!!!

:(

Stefan -

Thanks for your work. I will use this wonderful menu for one of my next project.

Mike Gauthier -

random reader:

Sorry for the spam. We're dealing with it as best we can.

Trista York -

I have been struggling on how to make something like this work in CSS and I was just so glad I stumbled upon your work. Sheer genius Daniel. Thank you so much for sharing!

Ben Satterfield -

Thanks for the great design, I had to modify it a wee bit for allowing the current tag to be a URL link. So instead of using the span I created a id called #current2 Had to change the css twice for it.
#header ul#primary a,#header ul#primary span,#header ul#primary a#current2, #header ul#primary a.current {
width: 9em;
display: block;
float: left;
padding: 4px 0;
margin: 1px 2px 0 0;
text-align: center;
font-family: tahoma, verdana, sans-serif;
font-size: 85%;
text-decoration: none;
color: #fff;
}

#header ul#primary span,#header ul#primary a#current2, #header ul#primary a.current,#header ul#primary a.current:hover {
border: 1px solid #aaa;
border-bottom: none;
background: #5A5C4C;
padding-bottom: 6px;
margin-top: 0;
}

And then on the html changed it so
<div id="header">
<ul id="primary">
<li><a id="current2" href="#">Home</a></li>
<ul id="secondary">
<li><a href="#">Calendar</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Find It Quickly</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Superintendent</a></li>
</ul>
<li><a href="#">School Board</a></li>
<li><a href="#">Administration</a></li>
<li><a href="#">Instruction</a></li>
<li><a href="#">Schools</a></li>
<li><a href="#">Parents/Students</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>

Again thanks a million. Hope that helps others in case they need current to be navigate(able)
Ben

Ben Satterfield -

Hmmm html was not displayed, sorry.
div id="header"
ul id="primary"
li a id="current" href="#" Home /a /li
instead of
li span home /span /li

The Dope -

Thanks for the css tabs menu - I put it together and it worked great in the browsers that comprise over 95% of my site visits.

Akash -

I have a very difficult problem. I tried to use this Tab Navigation with the already started project in Visual Studio 2003 so I converted all the html files into .aspx pages. Everything is working as it says in this website but I need to display a current user First and Last Name alone with option to sign out featuers next to Example Tabs header or top-right corner of the pages. However, when I drop drag the lable or textbox from visual studio's toolbox it creates an extra padding around Label, TextBox etc. I have spent 5 hours trying different stuffs and still I can not get it the normal way, without any padding.

I feel like it is taking a padding from somewhere with in a <body> because if I put the lable outside the <body> and inside <form> tag then it behaves normal. Please someone help me. Here is the syntax.

<pre style="overflow: auto; width: 500px;">
<BODY>
<div id="topbar">
<TABLE id="Table1" cellSpacing="0" cellPadding="0" width="424" border="0" style="WIDTH: 424px; HEIGHT: 74px">
<TR>
<TD style="WIDTH: 206px"><h1>Example Tabs</h1></TD>
<TD><asp:Label id="Label1" runat="server">Label</asp:Label></TD>
</TR>
</TABLE>
</div>
<div id="tabs">
<ul>
............
</pre>

Mike Gauthier -

Akash,

I'm afraid we can't help you with ASP.net or Visual Studio code. You'll have to get help elsewhere. For starters though, you might try not using tables for your layout.

Mary -

You did not mention IE7 as a browser that this is compatible for but I checked it myself. It appears that this particular tabbed layout also works well in IE7.

Bob -

I added "secondary" navigation to (2) of the other tabs using your css and html as written. When linking to the secondary navigation, the main tab color reverts back to "inactive" color but the tab remains "active".

This does not occur with the secondary navigation that you created, only with the navigation I added to additional tabs. The html is exact and no css has been altered.

IE 6.0

Any suggestion?

Sirish -

Thanks dude.. It's simple and easy to understand.. Keep posting good articles...

David Fuchs -

When switching tabs the whole page blinks in IE6.

Mike -

Perfect. Just what i was looking for. Thanks.

Alexander -

Hello all
First of all thanks for this menu. But after i read last comments i'm a little afraid. As i'm going to use this menu need to clarify does this menu work well on IE 6 and IE7 browsers?

thanks in advance

Daan -

I am trying to implement this script into my website holidayou.nl. Some tabs like the holidaycars tab have a iframe which points to a car rental engine. I wonder whether it's possible to have a script remember the search results from the holidaycars tab when you go to a different tab and switch back to the holidaycars tab?

Peter -

is it possible to store the tabs inside a database table and create a user management for the tabs? or this tabs are
only exclusive for hardcode variables not dynamic stuff?

:)

thanks

gtucker -

clicking print preview in firefox only displays current tab content. is it possible to print all tabs in print preview one after the other?

bala -

This is one of the best tabs I've seen. Thank you for the inspiration

Reda -

Hi,

I am trying to use your tabs with master page in asp.net. but I only get one tab selected all the time even when i click on a different tab. Because I am using a master page, I don't want to repeat the list on all of my pages. Has anyone tried this with master pages?

Cheers,
Reda

Hoessel -

Great work!

Regards from Germany!

Ruediger

Zain -

Hey,

I have one question.Probably a off topic.

How would i host this easily.

as a sub domain.

obviously modify it and give you the credit.

Thanks

Awaiting for your feedback. :)

Mike Gauthier -

Zain,

That is a bit off topic. Probably all you'd need to do it extract the provided ZIP file. Good luck!

Jon -

Thanks so much for sharing these tabs. They seem to work really well. I like the simplicity of the code. Very elegant.

Srihari Padmanabhan -

Thanks for this post. Please post more about CSS tabs as it would help me in my ongoing projects.

Best,
Hari

Skateboard Forum -

Hm, I should really incorporate more css into the things I do.

Luis -

i was looking for some tabs like this in the past ... i have used javascript code instead css

jquery-1.26.js and jquery.tabs.js ui.core.js ui.tabs.js

:S .. i think this solution is better than mine ..

keep the good work!

Sarah Harvey -

Well this is the first step for me when it comes to CSS in general. I have played around with CSS styles, but it is still a learning curve. Now if I can integrate this information with my site I am working on, then it will be great.

Thanks for the great post.

Sin -

What adjustments would be needed to make it work like
http://compete.com/?

On top level navigation hover, it will reveal the sub navigation. This approach is more intuitive as it allows you to reach a destination with one click. Any help is appreciated.

K Workman -

I am also new to css and valid xhtml. I needed a tabbed nav and after a rather exhaustive search found this to be a very elegant solution. I am very pleased with the sub nav menus. It appears easily customized and have found that this is exactly what I needed. Thank you for making it public.