5 replies [Last post]
armyofda12mnkeys
Offline
Enthusiast
Last seen: 13 years 46 weeks ago
Timezone: GMT-3
Joined: 2005-12-01
Posts: 117
Points: 0

in old table based designs, people had "double row tabs" so one row didnt have alot of items in it... for example 10 items but was split into 2, 5 tabs on top, 5 on bottom.

is there any way to do this technique for visually nice designs, for example sliding doors which i just learned.

looking something that looks similar to attachment image...

When all
\/-rated Sites convert 'intensive' sites to CSS,
/\
bandwidth on the internet will be cut down by 42%. )

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 34 min 57 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

"double row" (2 tier) CSS tabs

Simply create a ul menu containing the first five items, and follow with another ul menu containing the next five. Each is its own context, and independent of the other.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

armyofda12mnkeys
Offline
Enthusiast
Last seen: 13 years 46 weeks ago
Timezone: GMT-3
Joined: 2005-12-01
Posts: 117
Points: 0

"double row" (2 tier) CSS tabs

but wont it look like the 1st list is not hiding behind the other list? it will look like 2 separate inline tabbed lists?
if one top tab ended in the gutter of 2 bottom tabs. it wont look like its border is 'dropping down' [border between the "xx" below]...,

-----_______--------------------------
-__|____......\----_______----------
-|............\...x|x--|.............\---------
-|.............|-------|..............|--------

When all
\/-rated Sites convert 'intensive' sites to CSS,
/\
bandwidth on the internet will be cut down by 42%. )

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 42 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

"double row" (2 tier) CSS tabs

Use position: relative/absolute in combination with z-index to place the 2nd <ul> slightly on top of the 1st one.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

armyofda12mnkeys
Offline
Enthusiast
Last seen: 13 years 46 weeks ago
Timezone: GMT-3
Joined: 2005-12-01
Posts: 117
Points: 0

&quot;double row&quot; (2 tier) CSS tabs

hmmm interesting idea. I was thinking of using positioning somehow. Totally forgot about z-index.

If i wanted to do something like this... would i need do anything special on the parent element holding the 2 list navs? and would i only need to use relative positioning/z-index on the 'top hidden list' being moved behind the 'front list'.

I remember some sort of CSS trick where something like the parent is set to relative positioning. and the child is set with absolute i think and given the values u want (top:-20px; left: 20px; etc). since absolute position is dependant on 1st parents position (or viewport if none specified), then its offset relative to this element. i forget what/why exactly this is used for. Might be unrelated to my example. just curious what its useful for.

When all
\/-rated Sites convert 'intensive' sites to CSS,
/\
bandwidth on the internet will be cut down by 42%. )

armyofda12mnkeys
Offline
Enthusiast
Last seen: 13 years 46 weeks ago
Timezone: GMT-3
Joined: 2005-12-01
Posts: 117
Points: 0

&quot;double row&quot; (2 tier) CSS tabs

ill post an example when i get it done

When all
\/-rated Sites convert 'intensive' sites to CSS,
/\
bandwidth on the internet will be cut down by 42%. )