menu css vallign

[cesare86]

Ho un menu orizzontale che deve avere il classico stato hover con un immagine di sfondo il codice css è:

#menu{
	height: 42px;
	width: 100%;
	background-image: url(images/bg_menu.gif);
	font-size: 14px;
	padding-left: 25px;
	margin-top: 20px;
}
#menu ul{
	margin-right: 60px;
}

#menu ul li a{
	color: #FFFFFF;
	float: left;
	padding:0
	display: block;
	width: 162px;
	height: 40px;
	text-decoration: none;
	text-align: center;
}
#menu ul li a:hover{
	display: block;
	background: url(images/pul_push.gif) center bottom;
	
}
#menu ul li .visited{
	display: block;
	background: url(images/pul_down.gif) center bottom;
	
}

il problema è che il testo viene allineato a top del div menu.
come faccio ad allinearlo al centro del div (non funz vertica-allign) tenendo conto che ho un immagine di sfondo e che se metto il padding-top mi sposta anche l'immagine?

[Renyp]

prova col margin

[cesare86]

ok con margin riesco a mettere il testo dove voglio ma l'immagine di rollhoveer si sposta anchessa più in basso. sto impazzendo! se centro il testo mi si sposta lo sfondo e se centro l'immagine il testo sta in alto! qualche idea?

[mahamatt]

centrare verticalmente gli elementi è una cosa un po' complicata con i css; l'unico modo che conosco è fare un uso furbetto di position:absolute, impostando valori in % e margini negativi. Ti rimando a questo thread.

Comunque, su questo tutorial trovi la soluzione!!!

[Renyp]

il margin dovresti darlo al paragrafo (o altro tag) che contiene il testo, non al contenitore generale di testo e immagine di sfondo..hai fatto così?

[cesare86]

Risolto!
era proprio il margin a darmi problemi. ho messo line height ed ora è perfetto!
ora non rimane che farlo giusto per safari ed explorer

grazie mille !


p.s. sapete mica che editor posso usare per creare css? attualmente uso dreamweaver mx e non è un granchè.

[mahamatt]

per avere certezza assoluta su ciò che crei, la scelta più sicura è quella di compilare i codici a mano usando un editor di puro testo (insomma, parenti di notepad x intenderci). Certo, devi avere padronanza dei codici (quindi serve un po' di tempo per studiarli e provare), ma ti assicuro che ne vale la pena!