- This topic is empty.
January 5, 2013 at 4:17 pm #41775
I am developing a fluid width site that features a navbar of li elements themed as tabs. As I collapse browser width, tabs act as expected – just like word wrap.
My issue is that I would like the tabs to display on top instead of underneath (as browser width decreases). Does css have this ability? It’s always annoyed me.
Currently tabs are controlled via float left instead of inline. Inline is too margin inconsistent. I’d prefer to use float.
Here’s the test site so you can see what I mean: http://188.8.131.52/~cjstestd/drupal-6.26/
Thanks!January 5, 2013 at 5:56 pm #119933
Hmm yeah im thinking it’s gonna have to be scripted up. it’d be like and element gravity tag if it existed. Its just dumb, ive waited literally 6 years for a css solution hah. I tried all kinds of tags, neg margins, whitespace, clears, floats, baseline shift, line heights, positions, all gave nothing :)January 5, 2013 at 5:58 pm #119934
Consider all the tabs/inline menus out there, combine with fluid width era, use for squishing down data in reverse gravity…. and we see why such a tag would be GREAT newsJanuary 5, 2013 at 6:02 pm #119935Andy HowellsParticipant
Why not just have a hidden version of the nav for mobile and use display:none;/visibility: hidden;
Yes true, that’s how I usually do it, but I want something that works across all inlines this time. Its not just for navbar. Consider a tabber box (desc, specs, warranty) on a products page. Or tab buttons across the top of a user account page. Or list of product categories arranged in a mini nav. Actually, any horizontal list at all would use it.January 5, 2013 at 6:50 pm #119942
Hmm I guess if it were a perfect CSS world, they’d do reverse wrap order too – ie while collapsing, the first element gets wrapped instead of last element. Think RTL languages, everything gets swapped except nav tab wraps :)
- The forum ‘CSS’ is closed to new topics and replies.