[web] menu css 100%

[bouncey2k]

Se inserisco questo menu in un <div align="center" width="70%"></div> è possibile fare in modo che le caselle del menu in questione occupino tutto lo spazio del div?

grazie

[kk3z]

Cioè vuoi che i tab siano tutti larghi uguali, indipendentemente dal testo, e che riempino tutto lo spazio disponibile?

[bouncey2k]

si

[bouncey2k]

up

[whiles_]

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

[bouncey2k]

scusate se riapro questo topic ma non ho risolto.

Io ho 5 elementi ed ho messo la percentuale al 16% ma c'è molto spazio dopo..

Il codice è quanto segue:

.menu li{
margin: 0;
float: left;
text-align: left;
width: 16%;
}

.menu li a{
display: block;
text-decoration: none;
padding: 3px 5px;
margin-right: 0px;
margin-left: 0px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}

che posso fare?