CSS layout problem: tabs should overlap the frame

Question

I'm working on a template like this: enter image description here

The as you can see the frame (3) has a glassy border which goes behind the tabs (1,2). But I don't know how to do this layout in CSS. I searched stackoverflow and found the following threads, but they didn't help:

The HTML code is something like this:

<div id="frame"> <nav> <ul id="topnav"> <li>Tab1</li> <li>Tab2</li> <li>Tab3</li> <li>Tab4</li> <li>Tab5</li> <li>Tab6</li> <li>Tab7</li> </ul> </nav> </div>

Sanooj · Accepted Answer · 2011-09-23 10:47:17Z

Try This

HTML :

<div id="frame"> <ul> <li><a href="javascript:void(0);">Tab 01</a></li> <li><a href="javascript:void(0);" class="active">Tab 02</a></li> <li><a href="javascript:void(0);">Tab 03</a></li> <li><a href="javascript:void(0);">Tab 04</a></li> </ul> </div> <div id="frame2">Frame 02</div>

CSS :

 #frame,#frame ul { height:30px; background:#f0f0f0; } #frame ul li { height:30px; float:left; padding-right:2px; } #frame ul li a { position:relative; height:30px; display:block; float:left; /* for IE6 bug */ background-color:#f00; left:0; top:0; padding:0 4px; color:#fff; } #frame ul li a:hover,#frame ul li a.active { height:40px; } #frame2 { border:#000 1px solid; padding:10px; }

Please Check JSFIDDLE for Reference

thank you. just out of curiosity what is "javascript:void(0);"? why not only "#" instead?
when using '#' there may be a jumping(scrolling effect) to the top of the page but the "javascript:void(0);" will prevent that

Snicksie · Accepted Answer · 2011-09-23 08:49:59Z

1

I think you are looking for the z-index. An element with a higher z-index will appear above another element with a lower z-index. you can use something like this:

.tabSelected { z-index: 99; }

answered Sep 23, 2011 at 8:49

Snicksie

1,99717 silver badges27 bronze badges

1 Comment

InanisAtheos Over a year ago

Z-index does not affect objects with position:relative. Perhaps this works in this case (I see no code above to verify...), but it should be mentioned nonetheless :)

user466764 · Accepted Answer · 2011-09-23 08:41:32Z

I would suggest having a look at jquery-ui which provides an example on the site of a tabbed element such as this, you can modify the design using the theme roller on the site to get the colours you want.

jquery ui tabs

thanks for the link. I prefer to do it without JavaScript (ie. CSS)

Community · Accepted Answer · 2017-05-23 12:19:46Z

If you're using CSS3, you could try using RGBA for the background colour of the frame - here's a couple of links:

RGBA will allow the divs to be slightly transparent while keeping the contents visible - just make sure the frame is slightly larger than the contents (so it can be seen) and set the background colour to match the glass effect.

the problem is not transparency. it is the layout: how the tab overlaps the surrounding div?

Collectives™ on Stack Overflow

CSS layout problem: tabs should overlap the frame

4 Answers 4

2 Comments

1 Comment

1 Comment

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

3 Comments

Linked

Related