schede CSS semplici - necessità di rompere confine su scheda attiva

Question

Voglio creare uno stile molto semplice scheda che assomiglia a questo:

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

Quindi, in pratica c'è un bordo orizzontale del rettangolo di selezione che si rompe per la scheda attiva. Sto usando un elenco di base, con il seguente CSS, ma il bordo esterno appare sempre sopra le singole schede. Ho provato vari posizionamenti e z-index senza alcun risultato.

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

Prova this solution di Eric Meyer.

Contenuto sotto copiato dal sito per garantire che la risposta sia ancora valida se il sito si chiude, si modifica o si interrompe.

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

sul codice Alcune liste all'interno del sito Listamatic dovevano essere modificate in modo che potessero lavorare sul modello semplice lista di Listamatic. In caso di dubbio, utilizzare prima la risorsa esterna o almeno confrontare entrambi i modelli per vedere quale si adatta alle proprie esigenze.

Answer 2

Modifica del codice esistente il meno possibile - provare display: inline-block per le li tag, con il bordo su .menu contenitore div:

.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 usato per illustrare (div aggiunto in basso per mostrare miscelazione della scheda attiva in colore 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>