pestañas Simple CSS - necesidad de romper la frontera en la pestaña activa

Question

Quiero crear una muy simple estilo de pestaña que tiene este aspecto:

_____ _____ _____ 
_|_____|_|  |_|_____|______________ 

Así que, básicamente hay un borde horizontal del cuadro delimitador que rompe el pestaña activa Estoy usando una lista básica, con el siguiente CSS, pero el borde exterior siempre aparece sobre las pestañas individuales. He intentado varios posicionamientos e índice Z sin ningún resultado.

ul.tabHolder { 
    overflow: hidden; 
    clear: both; 
    margin: 1em 0; 
    padding: 0; 
    border-bottom: 1px solid #666; 
} 
ul.tabHolder li { 
    list-style: none; 
    float: left; 
    margin: 0 3px -1px; /* -1 margin to move tab down 1px */ 
    padding: 3px 8px; 
    background-color: #444; 
    border: 1px solid #666; 
    font-size: 15px; 
} 
ul.tabHolder li.active { 
    background-color: #944; 
    border-bottom: 1px solid #944; 
} 

Answer 1

Probar this solution por Eric Meyer.

El contenido que se encuentra debajo copia del sitio para asegurarte de que la respuesta aún sea válida si el sitio se cierra, cambia o se rompe.

HTML

<div id="navcontainer"> 
    <ul id="navlist"> 
     <li id="active"><a href="#" id="current">Item one</a></li> 
     <li><a href="#">Item two</a></li> 
     <li><a href="#">Item three</a></li> 
     <li><a href="#">Item four</a></li> 
     <li><a href="#">Item five</a></li> 
    </ul> 
</div> 

CSS

#navlist 
{ 
    padding: 3px 0; 
    margin-left: 0; 
    border-bottom: 1px solid #778; 
    font: bold 12px Verdana, sans-serif; 
} 

#navlist li 
{ 
    list-style: none; 
    margin: 0; 
    display: inline; 
} 

#navlist li a 
{ 
    padding: 3px 0.5em; 
    margin-left: 3px; 
    border: 1px solid #778; 
    border-bottom: none; 
    background: #DDE; 
    text-decoration: none; 
} 

#navlist li a:link { color: #448; } 
#navlist li a:visited { color: #667; } 

#navlist li a:hover 
{ 
    color: #000; 
    background: #AAE; 
    border-color: #227; 
} 

#navlist li a#current 
{ 
    background: white; 
    border-bottom: 1px solid white; 
} 

sobre el código Algunas listas dentro del sitio Listamatic tuvieron que ser modificadas para que pudieran trabajar en modelo simple lista de Listamatic. En caso de duda, primero use el recurso externo, o al menos compare ambos modelos para ver cuál satisface sus necesidades.

Answer 2

Cambiar su código existente lo menos posible - tratar display: inline-block para los li etiquetas, con la frontera en un recipiente .menudiv:

.menu { 
    border-bottom: 1px solid #666; 
} 
ul.tabHolder { 
    overflow: hidden; 
    margin: 1em 0 -2px; 
    padding: 0; 
} 
ul.tabHolder li { 
    list-style: none; 
    display: inline-block; 
    margin: 0 3px; 
    padding: 3px 8px 0; 
    background-color: #444; 
    border: 1px solid #666; 
    font-size: 15px; 
} 
ul.tabHolder li.active { 
    background-color: #944; 
    border-bottom-color: #944; 
} 

HTML que se utiliza para ilustrar (div añadido en la parte inferior para mostrar la mezcla de la pestaña activa en el color div):

<div class="menu"> 
    <ul class="tabHolder"> 
     <li>Menu 1</li> 
     <li class="active">Menu 2</li> 
     <li>Menu 3</li> 
    </ul> 
</div> 
<div style="background-color: #944; height: 1em"> 

Answer 3

.tab { 
 
    display: inline-block; 
 
    background-color: #aaa; 
 
    padding: 4px; 
 
    border: 1px solid #888; 
 
    border-bottom: none; 
 
    
 
    position: relative; 
 
    bottom:-1px; 
 
    z-index: -1; 
 
} 
 

 
.tab-body { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 200px; 
 
    padding: 4px; 
 
    background-color: #ccc; 
 
    border: 1px solid #888; 
 
    z-index: 1; 
 
} 
 

 
.tab.active { 
 
    background-color: #ccc; 
 
    z-index: 2; 
 
}

<div class="tab tab1">Tab 1</div> 
 
<div class="tab tab2 active">Tab 2</div> 
 
<div class="tab tab3">Tab 3</div> 
 

 
<div class="tab-body">Tab Body</div>