campo <li> equidistribuito

[james]

E' possibile fare in modo che un elenco puntato <ul> sia equidistribuito su una linea? Con i css ho impostato

li { display:inline; }

però vorrei che le varie voci anziche essere allineate a destra o sinistra siano equidistribuite, una sorta di giustificato per riempire l'intera riga, è fattibile con i CSS?

[floyd46]

Prova a mettere il tuo elenco in un div ed a questo dai:
text-align:center;
ciao

[Jerry Masslo]

Originariamente inviato da floyd46
Prova a mettere il tuo elenco in un div ed a questo dai:
text-align:center;
ciao

visto che facciamo provare a lui io proverei coll'impostare al li un width, eventualmente in percentuale secondo il loro numero.

[james]

avete ragione, nel caso di floyd46 imposto poi un padding destro e sinistro uguale per tutti i li finchè non riempio lo spazio orizzontalmente. Oppure uso la soluzione di Jerry Masslo che a vista mi sembra più precisa, grazie comunque ad entrambi!

Visto che ci sono, non è che sapete anche come gestire lo swap delle immagini sempre con CSS? Questo gruppo di[*] deve essere un menu orizzontale, ho impostato al div che li contiene un'immagine di sfondo, ora vorrei che all'evento onmouseover (ogni[*] contiene un link essendo un menu) vorrei impostare un'immagine temporanea al[*] stesso così da avere il classico effetto di illuminazione al passaggio del mouse. Sapreste indicarmi la retta via?! Vorrei farlo con i css e non con javascript, almeno imparo...

[Jerry Masslo]

solo coi css puoi cambiare un'immagine di sfondo eventualmente diversa per ogni link e sceglierla come posizionarla e se farla ripetere cioè:


li a {background:red url(ImmagineLinkNormale.gif) repeat-y}
li a:visited {background:navy url(ImmagineLinkVisitato.png) repeat-y}

li a:hover {background:yellow url(ImmagineLinkHover.jpg) repeat-x}

[james]

grazie, c'è un modo per centrare le verticalmente il contenuto di un div?! Ho il div che contiene questo menu, che ha come sfondo un'immagine, ora però non riesco a centrare le veticalmente i campi[*], se imporsto un padding corretto per firefox non va bene per expolorer e viceversa!

[span]

line-height?

[james]

Originariamente inviato da span
line-height?

questa non la sapevo, avevo provato con vertical-align ma non funzionava, line-height invece funziona, anche se non capisco il perchè, il senso della parola mi fa capire che è l'altezza della linea, che in teoria non c'entra nulla con l'allineamento verticale, ora a questo approfondisco da solo, se non trovo risposta mi faccio risentire.

Grazie a tutti.

[james]

Originariamente inviato da Jerry Masslo
solo coi css puoi cambiare un'immagine di sfondo eventualmente diversa per ogni link e sceglierla come posizionarla e se farla ripetere cioè:



li a {background:red url(ImmagineLinkNormale.gif) repeat-y}
li a:visited {background:navy url(ImmagineLinkVisitato.png) repeat-y}

li a:hover {background:yellow url(ImmagineLinkHover.jpg) repeat-x}

FireFox mi visualizza bene l'immagine di "li a:hover" ma IE no, se imposto un colore anzichè un immagine lo vedo correttamente, ma non l'immagine, è normale? Un'altra pessima interpretazione di IE?

[Jerry Masslo]

Originariamente inviato da james
FireFox mi visualizza bene l'immagine di "li a:hover" ma IE no, se imposto un colore anzichè un immagine lo vedo correttamente, ma non l'immagine, è normale? Un'altra pessima interpretazione di IE?

non è normale e senza qualche prova online sarà difficile aiutarti, se mozilla avesse lo stesso comportamento penserei a qualche errore ma così la faccenda si complica, a meno che non dipenda dalla cache, prova a ricaricare la pagina.