Overlapping CSS tabs with overlapping?

Question

I have tabs.

http://img196.imageshack.us/img196/7167/tabs.gif

And I want to add a rollover effect. The problem is that the tabs overlap, so there is no room for their separation. Should I just use absolute positioning and PNG to fold them, or is there a more elegant solution?

Answer 1

Use 24-bit PNG with alpha transparency .. then there should be no meaning that they overlap. You can place them in a row on the left with a negative margin on the left (useful if tabs are not set), or, as you said, you could position them absolutely.

: IE6 - . , , 24- ie6pngfix.

<ul>
    <li><a href="">link1</a></li>
    <li><a href="">link1</a></li>
    <li class="active"><a href="">link2</a></li>
</ul>

ul li {
    display: block;
    float: left;
    margin-left: -20px;
    background: url(path/to/image.png) no-repeat;

}

ul li:hover { /* will not work in ie6 - either change the background to the anchor, or add a slice of js */
     background-position: -200px 0; /* i'm using sprites in this example */
}

ul li:first-child {
    margin-left: 0;
}

ul li.active {
    position: relative; /* Mark reminded me I needed to set a position other than static */
    z-index: 100;
}

Answer 2

, , , , . .

Answer 3

- :

#recent a + #friends a: hover {

background-image: url('recent-normal-neighbor-hover.png') no-repeat;

}

#friends a: hover {

 background-image: url('friends-hover-neighbor-normal.png') no-repeat;

}

, , , , , . 6 CSS.

Answer 4

You can use relative positioning to move each tab to the left so that it appears above the previous one. For this to work correctly, you need to gradually increase the correct position each time, for example:

HTML

<ul>
   <li id="tab1"><a href="#">Tab1</a></li>
   <li id="tab2"><a href="#">Tab2</a></li>
   <li id="tab3"><a href="#">Tab3</a></li>
   <li id="tab4"><a href="#">Tab4</a></li>
</ul>

CSS

#tab2 {
   position:relative;
   right:30px; /* overlap distance */
}
#tab3 {
   position:relative;
   right:60px; /* double overlap distance */
}
#tab4 {
   position:relative;
   right:90px; /* triple overlap distance */
}

Answer 5

This is the solution I went with:

HTML

<ul id="tabs">
    <li class="upload"><a href="/upload"></a></li>
    <li class="friends"><a href="/friends"></a></li>
    <li class="recent"><a href="/recent"></a></li>
</ul>

CSS

#tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: auto;
    position: absolute;
    bottom:0;
    right:0;
}

#tabs li {
    position: relative;
    float: right;
    width: 182px;
    height: 49px;
}

#tabs li a {
    display: block;
    width: 182px;
    height: 49px;
}

#tabs .upload {
    background: transparent url(/img/upload.png) no-repeat top left;
    z-index: 3;
}

#tabs .friends {
    background: transparent url(/img/friends.png) no-repeat top left;
    margin-right: -34px;
    z-index: 2;
}

#tabs .recent {
    background: transparent url(/img/recent.png) no-repeat top left;
    margin-right: -31px;
    z-index: 1;
}