Menu a più righe disordinato

[Lord Byron]

Ciao Ragazzi!
Sono alle prese con un menu che mi sta creando parecchi grattacapi: riguarda la pagina dei 'corsi' del sito di una scuola di musica: dal design ho previsto sotto la navigazione principale una lista dei corsi insegnati: un menu fluido formato da 3 righe, 4 elementi per riga. Il problema è che non tutti gli elementi hanno la stessa altezza. Vorrei centrare il link all'interno del'elemento[*], ma non riesco a disporli correttamente: ho provato col float, ora col display:inline, c'è qualche errore che non individuo!
Vorrei che apparissero in questo modo , ma per ora i risultati deludono parecchio, ecco una prova online

Sotto il codice responsabile:

ul.item_corsi {
	width: 60em;  	
	margin: 0; 
	padding: 0; 
	list-style: none;	
	}


ul.item_corsi li { 	
	display:inline;
	width: 25em; /*240 / 960 */   
	
	}	

ul.item_corsi li a {
	font: normal 1.43753em/1 sketch_rockwell, serif;
	color: #0a505c; 
	text-transform: uppercase;   
	display: inline-block;
	border: 1px solid white;  	
	height: 60px;
	margin: 0 auto; 
	text-align: center; 
	}

Grazie per qualunque aiuto!

[ratte]

Prova ad aggiungere quà e là un po di vertical-align: top; 8)

o/ !

[Lord Byron]

Originariamente inviato da ratte
Prova ad aggiungere quà e là un po di vertical-align: top; 8)

o/ !

Ciao Ratte e grazie per la tua risposta!
Ho fatto qualche prova ma le voci nel menu restano disallineate, curiosamente sembra la terza e la quarta diano problemi. Editando il css online hai avuto risultati migliori?
Rimane la sensazioni di perdermi in un bicchier d'acqua!

Riposto il link

e sotto il codice incriminato, anche se temo possano esserci problemi da altre parti:

  ul.item_corsi {
	width: 60em;  	
	margin: 0; 
	padding: 0; 
	list-style:none;	
	}


ul.item_corsi li { 	
	display:inline; 
	margin: 0; 
	padding: 0;    
	
	}	

ul.item_corsi li a {
	font: normal 1.43753em/1 sketch_rockwell, serif;
	text-transform: uppercase;   
	display: inline-block;
	text-align: center; 
	width: 10em; 
	padding: 1em 0; 
	color: #0a505c; 
	vertical-align: top; 	
	}

ul.item_corsi li a.on, ul.item_corsi li a:active {
	color: #fdf501; 	
	background-color: #0a505c; 
	}

.tall {
	padding: 0.5em 0;	
	}

[ratte]

Ciao! Ahhhh... ho rivisto la tua pagina, con un poco più di attenzione 8)

Bella! Bel progetto! bravo! E' già completissima e mi è lungo "smontarla" per vedere meglio, ma posso raccomandarti alcune cose che potrebbero esserti utili:
-> Vedo che ci sono elementi inline-block .... tieni presente che illi si prendono inevitabilmente un margine a destra... potrebbe esserti utile cambiare

<ul>[*]1[*]2[*]3[/list]

in

<ul>[*]
1[*]
2[*]
3[/list]

o

<ul>[*]1</li
>[*]2</li
>[*]3[/list]

etc...

-> i br all'interno dei pulsanti mi piacciono pochissimo, ma è una tua scelta.. ok... di la da quello assegnare una "min-height" ai tuoi pulsanti potrebbe semplificare le cose.. altrimenti dovresti/potresti forse trasformare il tutto in display "table-cell"...

o/ !

[Lord Byron]

Ti ringrazio per i complimenti anche se non sono sicuro di meritarli, sto combattendo con una cosa apparentemente banale ma che mi sta portando via molto tempo!
Neanche a me piace la soluzione
ma mi è sembrata funzionale, almeno per il momento!
Ho provato la modifica all'elenco che hai suggerito, in quel modo le voci si dispongono in un'unica riga e non finisce più!
In compenso ho provato 'display:table-cell;' per La pagina del blog (dove avevo un problema simile) e credo ora si visualizzi correttamente! Grazie mille per la dritta!
Rimane il primo problema del menu, ok non avevo mai gestito 3 righe e 4 colonne ma non pensavo di trovarmi in questa situazione! E' bello sperimentare e provare soluzioni ma il tempo passa e le scadenze incombono!