Menu con CSS e Liste

[mattia85]

Ciao a tutti,

sto realizzando un piccolo menu con CSS e le liste, solo che riscontro un problema relativo all'altezza. Di seguito posto il codice CSS associato:

 
#navigation {
	width: 760px;
	height: 30px;
	border-top: #FFF 1px solid;
	border-bottom: #FFF 1px solid;
	background-color:#2EA7F0;
	
	}
	
#navigation ul {
	border:0;
	margin:0;
	padding:0; 
}


#navigation li {
	display:inline;
	border-right: 1px #FFF solid;
}

#navigation a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFF;
	font-weight: bold;
	text-decoration: none;
	}

Mentre l'HTML associato è così composto:

	<div id="navigation">
           		<ul>[*]Chi Siamo[*]Dove Siamo[*]Servizi[*]Preventivo
        		[/list]
            </div>

Ora il mio problema fondamentale è questo: avrei necessità che l'elemento LI fosse alto (height) 30px come il suo DIV contenitore. Questo per due motivi, il primo è centrare il testo in verticale e il secondo dovrei avere il bordo destro del LI appunto altro 30px.

Potete darmi una mano?

L'unica soluzione che ho pensato è quella di usare la proprietà display per creare una tabella (inline-table). Questa soluzione funziona ed è ok, però questa proprietà non è letta da IE6 e comunque da browser un po datati!

Help me please!

Grazie,

Mattia

[Mich_]

Gli elementi[*] sono di default di tipo blocco, per cui supportano le dimensioni.

Tu hai reso il[*] di tipo inline, e questo impedisce di poter dare delle dimensioni.

Se il dispolay:inline lo hai inserito per allineare gli elementi su una linea, hai sbagliato approccio: devi usare i float.

Ci sono molti esempi di menu gia` pronti e testati su tutti i browser: vedi tra i "link utili". A me piace l'approccio (e i codici) di CSSplay.

[mattia85]

Ciao,

perfetto, ora funziona alla grande!

Grazie,

Mattia