Tab Wraps

If you add “white-space:nowrap” to the style ul tab menu, wouldn’t this work as well?

That doesn’t always seemt o be effective. If you have the tabs laid out using floats, they’ll still wrap.

Hi Adam,

I’m following CSS/tab develoments with avid interest.

Question: Can CSS be written to produce NavTabs that trigger SubMenuLinks on :hover? That is, the SubMenu Links appear beneath the tabs when :hover is invoked. Further, the user must be able to move the mouse to—and click—the SubMenuLinks when they appear. Is this possible in “straight” CSS?

Here’s a JS solution for reference: http://www.davacosourcing.com/index.asp Of course, I’d like to achieve this tab/submenulink functionality without JS.

Thanks.

Norsayk,

I don’t think CSS has the power to modify the CSS properties of other elements. You couldn’t dynamically make the submenu appear when hovering over an element, like you can with JS.

The only thing I can think of is trying to figure out a way to include CSS “rules” that affect the display of the submenu and include the :hover on the main menu link. Something like: .link1:hover, .subnav1 {display: block;} OR .link1:hover > .subnav1 {display: block;}

I would bet against these working. Perhaps there is some crazy proposed CSS-3 property that will make something like this work? I don’t know.

I’ve made a JS example that performs similar to your DavacoSourcing example. The example is: http://www.milamberart.com/plogmenutest.html My explanation can be found at: http://www.plogs.net/users/andlife/15704.html

-Chris

Hey there.. I’m loving these tabs but I am having a serious problem with my top and bottom padding within the main content div. I am getting some weird results when nesting another div inside it. I’ve posted an example here: http://www.spin45.net/bug/

What I am trying to acheive is a white content box inside the padding of the tabbed div. It looks OK on IE6/mozilla, and I don’t need to be pixel perfect, but on IE5.x, it seems that the “mysterious extra padding” causes a break in the yellow borders on the left and right, which is downright ugly.

If anyone has any pointers, I’ve looked everywhere and come up empty. Since IE6 and mozilla treat my code the same way, I’m inclined to believe that It’s my code and not the browser (as much as I’d love to blame the browser…)

Thanks so much for the examples so far. I’ve been trying to build semantically correct css tabs which honour the text-size in the browser for quite some time, and this entire discussion has been a great help!

IE5 doesn’t handle padding very well. It mistakenly adds the padding to the size of the box, but you can use Tantek’s box model hack to fix it.

Thanks, I’ll take a second look at that but I’m not defining width and height properties so I’m not sure if that will apply. If not, I figure with enough tweaking over the next little while I’ll stumble across a solution!

I think I figured it out, in case anyone cares… The browser default margins around headings and paragraphs was breaking IE5.x, so removing the top margin fixed the gap in the border as well as the mysterious extra padding (which turned out to be extra border garbage taht was being implemented all willy-nilly-like)

Thanks again for a great tab implementation!

Excerpt: If you've seen my site since I added the new tab "old site", you've probably noticed the "old site" tab was sticking out a bit if you viewed in internet explorer. I didn't mind at the time, because I wanted...

I recently had to solve the problem of preventing my navigation tabs from wrapping. I couldn’t set the ul width because the content was dynamic. I was using the ‘sliding doors’ css method of using art with transparent corners. The way I solved the problem was to put the tabs in a ‘table’, instead of using list elements. I wrapped the ‘a’ tags in ‘div’ elements, and placed each inside a ‘td’. css classes that would otherwise apply to the ‘li’ now apply to the ‘div.

For me, it is the other way around.

I have a set of tabs that wrap when they don’t have enough space to fit on one row. And that is what I want.

But the problem I have is to have a few pixels margin between the tabs so that they don’t stick, and a few pixels between each tab border and its text content so that the text does not touch the border.

I can have it fine in Firefox, but not on both IE and Firefox.

It can be seen at http://fks.thalasoft.com

Click on “cliquez ici” then on the green check button.