Menù con immagini. Allineamento testo voci menù.

[vales]

Ho creato dei menù con immagini abilitando l'inserimento di immagini sia nel menu che nel modulo usato mod_mainmenu.

Sono intervenuto nei css creando delle proprietà per alcune classi e tag che sono interessati all'operazione.

Qualcosa ho ottenuto. Ma vorrei centrare verticalmente il testo della voce di menu, che è contenuto in uno span, rispetto all'immagine inserita.

Il tutto è visibile qui nel menù "altre risorse turistiche".

Le nuove proprietà CSS che ho creato sono queste.

Codice: [Seleziona]

.item81 img, .item82 img, .item83 img, .item84 img, .item85 img {
     float: left;
     padding-right: 10px;
}

.item81 span, .item82 span, .item83 span, .item84 span, .item85 span {
     vertical-align: middle;
     height: 35px;
}

li.item81 a, li.item82 a,  li.item83 a, li.item84 a, li.item85 a {height: 35px;}

Qualcuno (tonicopi) ha qualche idea ?

Saluti Vales

[tonicopi]

Non è male il menù che hai creato con le icone. Non riesci ad allineare i link testuali verticalmente perchè le immagini sono di dimensioni diverse. Ciò provoca un fastidioso disallineamento anche nel senso orizzontale. Prova a rifare le iconcine tutte della stessa dimensione in  altezza e anche in larghezza, tranne intoscana.it , forse. Poi dai il vertical-align: middle all'elemento a img .
Dovrebbe andare

[vales]

Ho rifilato le icone e l'aspetto è migliorato.

Però lo span dei testi non si schioda dal top del tag <a>.
Ho provato a dare l'altezza dello span uguale a quella del tag <a> 35px ma ignora la proprietà.
Ignora anche vertical-align: middle per img.

[tonicopi]

Questo è il comando che allinea le immagini a metà altezza rispetto al testo typography.css (riga 373)

Codice: [Seleziona]

a img {
border:medium none;
vertical-align:middle;
} Vedrai che le immagini sotto il menù risorse si disporranno in posizione middle rispetto il testo.
Sul menù sopra non succede lo stesso proprio a causa di quel heigth 35. Se tu aumenti l'altezza di quelle immagini in modo tale da non aver più bisogno di mettere l'height nello span dei link dovresti risolvere.

[vales]

Questo è il comando che allinea le immagini a metà altezza rispetto al testo typography.css (riga 373)

Codice: [Seleziona]

a img {
border:medium none;
vertical-align:middle;
} Vedrai che le immagini sotto il menù risorse si disporranno in posizione middle rispetto il testo.
Sul menù sopra non succede lo stesso proprio a causa di quel heigth 35. Se tu aumenti l'altezza di quelle immagini in modo tale da non aver più bisogno di mettere l'height nello span dei link dovresti risolvere.

Grande tonicopi per indicazione fondamentale.
Ho tolto tutto quello che avevo inserito, ho inserito la tua modifica, ridefinito tutte le icone con h 35px.
Ho dovuto inserire una modifica per la voce dell'Enit che andando su due righe non intendeva allinearsi e scappava a sinistra sotto. Confesso che non ho compreso pienamente perchè funziona.
Riassumo le modifiche inserite.

Codice: [Seleziona]

a img {
border:medium none;
vertical-align:middle;
}
.item85 img {
     float: left;
     padding-right: 7px;
}

[tonicopi]

Bene! Adesso quei menù mi piacciono...
Quanto a capire, confesso che del tutto non capisco neppure io. Ma so che l'immagine allineata a middle tiene il testo in mezzo. E non viceversa. Inoltre se l'immagine è alta 30px e io faccio uno span in cui definisco l'altezza della riga del codice 100 px , esasperando, evidentemente vado incontro a difficoltà...
Cmq non è sempre importantissimo capire tutto. L'importante è che la maggior parte delle cose funzioni al meglio... Accontentiamoci 

[vales]

Ok ! Anche se non oso andare a vedere come va in IE6 od in video 800X600 che ancora resistono.
Devo ancora completare qualche sezione ed entro pochi giorni renderò visibile tutto in homepage del sito. Ringrazio fin da ora per la collaborazione.

A proposito di HTML, XHTML, CSS ho trovato questo bel sito che è un ottimo punto di riferimento. Lo segnalo nel caso possa essere utile anche ad altri per la continua evoluzione che è necessaria.
Penso tonicopi che dovresti segnalarlo insieme agli altri mitici strumenti Web Developer e Firebug.

[tonicopi]

Le modifiche appena fatte vanno alla grande pure con IE6 e anche ad 800px
Il sito sembra molto buono, lo metto nei preferiti css e me lo guardo con calma. Casca pure a fagiolo per la lingua visto che sto studiando l'inglese. Ciao

[vales]

Bene.
Grazie per il test.

[andrea66vi]

Salve, sto usando Joomla v. 1.5.22 e il template Trip-navigator, volevo inserire delle icone vicino ad alcune voci di menu, pero' risultano non allineate al testo. Vedendo questo vecchio topic, pensavo di risolvere seguendo le indicazioni:

Questo è il comando che allinea le immagini a metà altezza rispetto al testo typography.css (riga 373)
 Codice: [Seleziona] a img {
border:medium none;
vertical-align:middle;
}

 
ma non trovo il file typography.css da nessuna parte.
Nel cartella css del template c'e' il file template.css, devo fare la modifica qui ? ma cosa devo inserire di preciso ?
 
Spero possiate darmi un suggerimento, Grazie.

[andrea66vi]

Salve, scusatemi il codice funziona copiandolo nel template.css, non mi sono accorto che avevo copiato male il codice.
 
Grazie.

[tonicopi]

Ottimo. Aggiorna però il tuo joomla alla 1.5.26