<div class="shadetabs">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
<li class="selected"><a href="http://www.dynamicdrive.com/style/">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
</ul>
</div>
e
<style type="text/css">
.shadetabs{
border-bottom: 1px solid gray;
width: 100%;
margin-bottom: 1em;
}
.shadetabs ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}
.shadetabs li{
display: block;
margin: 0;
float: left;
width: 19%;
}
.shadetabs li a{
display: block;
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(http://www.dynamicdrive.com/cssexamples/media/shade.gif) top left repeat-x;
}
.shadetabs li a:visited{
color: #2d2b2b;
}
.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}
.shadetabs li.selected{
position: relative;
top: 1px;
}
.shadetabs li.selected a{ /*selected main tab style */
background-image: url(http://www.dynamicdrive.com/cssexamples/media/shadeactive.gif);
border-bottom-color: white;
}
.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}
</style>
con firefox funziona meglio, in quanto quando la pagina si restringe troppo le singole schede non vanno a capo ma continuano a restringersi indipendentemente dal testo...
Ho segnato in grassetto e in rosso la parte che devi cambiare se cambi il numero degli elementi [purtroppo non c'è altra soluzione che io conosca]. Ora è settata a 19%, cioè 100 / 4 con una unità in meno per evitare che con explorer gli elementi vadano a capo (con il 20% con firefox funziona pefettamente.. ma che ci vuoi fare..). Siccome non si può richiedere la perfezione per via del margin e del padding, a destra ( o ai lati o a sinistra, a seconda di come posizioni il div) resterà un po' di spazio... ma spero vada bene lo stesso.. ciao!