Menu a larghezza fissa

[Balördög]

Buongiorno ragazzi.

Ho inserito un semplice menù nel sito che sto sviluppando, fatto coi css.

XHTML:

<div id="nav">
L'AZIENDA
I NOSTRI LAVORI
DOVE SIAMO
</div>

CSS:

div#nav{
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    padding: 3px 0 5px 0;
}
a.MENU
{
    background-color: #999999;
    color: #FFFFFF;
    font-weight: Bold;
    text-decoration: None;
    margin: 0 15px 0 15px;
    padding: 4px 25px 4px 25px;
}
.pag_corrente{
    background-color: #336633;
    color: #EEEEEE;
    font-weight: Bold;
    text-decoration: None;
    margin: 0 15px 0 15px;
    padding: 4px 25px 4px 25px;
}
a:hover.MENU
{
    background-color: #336633;
    color: #EEEEEE;
    font-weight: Bold;
    text-decoration: None;
    margin: 0 15px 0 15px;
    padding: 4px 25px 4px 25px;
}

Vorrei però far si che le mie caselle (elementi del menu) abbiano larghezza fissa, e uguale per tutti (or ora la dimensione è tratta dal padding, quindi relativa al testo di ogni elemento.

Avete suggerimenti? Grazie, ciao!

[Mich_]

Prova ad usare i <ul> e[*] per il menu. Sono elementi di blocco, quindi supportano il width.

I tag segnalati sono quelli corretti dal punto di vista semantico, e la maggior parte dei menu sono realizzati tramite essi (trovi una raccolta di menu nell'apposita sezione dei "link utili").

[Balördög]

Originariamente inviato da Mich_
Prova ad usare i <ul> e[*] per il menu. Sono elementi di blocco, quindi supportano il width.

I tag segnalati sono quelli corretti dal punto di vista semantico, e la maggior parte dei menu sono realizzati tramite essi (trovi una raccolta di menu nell'apposita sezione dei "link utili").

Ok, ho usato <ul> e[*]. Ma se devo utilizzare effetti tipo il cambio di background on hover della[*]??

ul li{
    list-style: none;
    width:100px;
    border: 1px solid;
    margin: 3px;
    padding: 3px;
    background-color: #999999;
    color: #FFFFFF;
}

ul li a:hover{
    background-color: #336633;
    color: #EEEEEE;
    font-weight: bold;
    text-decoration: none;
}

Così purtroppo il cambio di background lo fa chiaramente solo al testo.

[Mich_]

Purtroppo IE6 non conosce il
li:hover
che invece e` supportato da tutti gli altri browser moderni.

Pero` ci sono dei trucchi per allargare tag <a> a tutto lo spazio a disposizione.
Ho visto un accenno a cio` pochi giorni fa in questo forum, ma se cerchi nelle raccolte (vedi tra i "link utili"), dovresti trovarlo senza troppe difficolta`.

[Balördög]

Uh, sei istantaneo, Mich_!

Comunque ho fatto, ecco, così funziona, posto il codice se servisse a qualcuno ed un'immagine:
CSS:

ul, li{text-align: center; background-color:#CCCCCC}

ul li{
	list-style: none;
	width: 100px;
	border: 1px solid;
	margin: 3px;
	background-color: #999999;
    color: #FFFFFF;
}

ul li a:link, ul li a:visited{
	display: block;
    font-weight: bold;
    text-decoration: none;
	background-color: #999999;
    color: #FFFFFF;
	height: 16px;
	line-height: 16px;
}
ul li a:hover{
	display: block;
    background-color: #336633;
    color: #EEEEEE;
    font-weight: bold;
    text-decoration: none;
	height: 16px;
	line-height: 16px;
}

HTML:

<ul>[*]inserisci[*]modifica[*]cancella[/list]

E allego l'esempio. Ovviamente la manina punta su "modifica".

Mich_, tu che ne sai, come faccio a centrare questo mio menù orizzontalmente nel div che lo contiene?

Con IE basta mettere "text-align: center" all'ul, con FF non funziona. :master: Grazie.

[Mich_]

Con IE occorre usare una regola pensata per altre cose.

Per i browser corretti, basta mettere
margin: 0 auto;
nel blocco da centrare (deve avere display:block.


PS: non ha senso ripetere gli attributi che non cambiano in tutte le regole: ad esempio il display:block; come pure height: 16px; dovrebbero stare solo nel ul li { e non in tutte le varie varianti.

[Balördög]

Originariamente inviato da Mich_
PS: non ha senso ripetere gli attributi che non cambiano in tutte le regole: ad esempio il display:block; come pure height: 16px; dovrebbero stare solo nel ul li { e non in tutte le varie varianti.

Sìsì, grazie, avevo già ottimizzato.