CSS mouse-over overlapping tabs?

Answer 1

I think you need to break the tabs up so that the overlap are separate images, then force those images to change depending on which tab is in front. The Rollover could affect multiple targets.

Answer 2

Use 24bit PNGs with alpha transparency .. then it shouldn't matter that they overlap. You could position them in a line floated left, with a negative margin left (useful if the tabs are not predetermined), or as you said, you could position them absolutely.

Note, in IE6, alpha trans is not supported. So maybe you'll want to target that browser with no 24 bit transparency images, or try and use the ie6pngfix.

Here is what you could do

<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 3

You could try something like:

#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;

}

Not sure if that even makes sense, and it isn't very elegant, because you'd have to make a regular image for all three tabs, a regular image for all three tabs with the clipped portion of the neighboring tab having a hover state, and a hover image for all three tabs. Then you'd need to have like 6 CSS selectors.

Answer 4

You could use relative positioning to move each tab to the left so it appears over the one before. For this to work correctly you will need to incrementally increase the right position each time eg:

The 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>

The 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;
}