1

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>
Community
  • 1
  • 1
AlexStack
  • 16,766
  • 21
  • 72
  • 104

4 Answers4

5

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

Sanooj
  • 2,637
  • 15
  • 20
  • thank you. just out of curiosity what is "javascript:void(0);"? why not only "#" instead? – AlexStack Sep 23 '11 at 11:36
  • 1
    when using '#' there may be a jumping(scrolling effect) to the top of the page but the "javascript:void(0);" will prevent that – Sanooj Sep 23 '11 at 11:40
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;
}
Snicksie
  • 1,987
  • 17
  • 27
  • 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 :) – InanisAtheos Sep 23 '11 at 10:19
0

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

user466764
  • 1,201
  • 7
  • 7
0

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.

Community
  • 1
  • 1
whostolemyhat
  • 3,107
  • 4
  • 34
  • 50