Allineamento verticale di una lista

[sonik_the_sonik]

Salve a tutti,

ho un piccolo problema spero risolvibile : ho una lista non ordinata che mi funge da menu. Tale menu segue una linea ad arco ed è posizionato all'interno di un div alto 300px. Come faccio ad allineare questo menu in basso? (deve seguire una linea curva che c'è nello sfondo)

vi posto codice e css

<div id="menu">
<ul>
	<li id="uno">il gestbook
	<li id="due">la societ&agrave;
	<li id="tre">i calendari
	<li id="quattro">le classifiche
	<li id="cinque">gli atleti[/list]
</div>

(gli id progressivi servono al posizionamento)

#menu{
	height:px;
	width:530px;
	border:1px solid #000000;
}

#menu ul{
	line-hight:300px;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#menu a{
	display: block;
	width: 200px;
	line-height: 35px;
	background: url(img/sfondo/Pallone-MENU.gif) no-repeat left center;
	text-indent: 80px;
	text-decoration: none;
	color: #000000;
}

#menu a:hover{text-decoration: none; color: #000000; font-style: normal;}
#menu li#uno a{left: 370px; position: relative;}
#menu li#due a{left: 260px; position: relative;}
#menu li#tre a{left: 170px; position: relative;}
#menu li#quattro a{left: 90px; position: relative;}
#menu li#cinque a{left: 30px; position: relative;}

Ho provato a cercare sia nel forum sia in html.it ma non ho trovato niente che faccia al mio caso. Soluzioni valide le preferirei dato che volendo potrei usare una tabella con una cella alta 300px e con valing="bottom".

Grazie a chiunque abbia voglia di aiutarmi

[sonik_the_sonik]

heeeellllppppppp

No, davvero. Avrei proprio bisogno di un aiuto. Voglio fare un sito serio dal punto di vista validità-accessibilità e abbandonare una volta per tutte le tabelle!!

[thomas_anderson]

ciao!
quando dichiari una voce di blocco, di fatto rinunci alla possibilità di usare la proprietà vertical-align, che si trova in un contesto di formattazione in riga (inline). quindi, devi usare necessariamente altre proprietà, come line-height ed il padding superiore ed inferiore.

[sonik_the_sonik]

Dato che quel menu è alto in totale 175px e deve andare dentro ad un div (header) alto 300px ho provato a dare un padding-top di circa 120px... ma il risultato è stato quello di vedere aumentare l'altezza del mio div invece di spostare il div id="menu" in basso di 120px!! Questa soluzione l'ho testata con diversi browser e con uno mi funzionava. Però non mi ricordo quale... mi sembra proprio con IE...

Dico non mi ricordo quale perchè c'ho spippolato ieri sera e ora non sono con il mio pc, bensì da un computer della facoltà che frequento.

Come dovrei fare a far funzionare le cose tramite line-height?

Grazie mille per l'interessamento!!

[Mich_]

Comportamento noto.
Il padding fa parte del height (e width) nei browser IE, ne e` esterno nei browser conformi.
Prova ad usare margin, invece, che e` sempre esterno all'height e width.

[panta1978]

Originariamente inviato da sonik_the_sonik
Dato che quel menu è alto in totale 175px e deve andare dentro ad un div (header) alto 300px ho provato a dare un padding-top di circa 120px... ma il risultato è stato quello di vedere aumentare l'altezza del mio div invece di spostare il div id="menu" in basso di 120px!! Questa soluzione l'ho testata con diversi browser e con uno mi funzionava. Però non mi ricordo quale... mi sembra proprio con IE...

Dico non mi ricordo quale perchè c'ho spippolato ieri sera e ora non sono con il mio pc, bensì da un computer della facoltà che frequento.

Come dovrei fare a far funzionare le cose tramite line-height?

Grazie mille per l'interessamento!!

Ehm... anche ammettendo che tu riesca a risolvere il problema dell'allineamento in basso, come la mettiamo con l'ingrandimento del carattere? Se l'utente ingrandisce il carattere gli si dovrebbe sballare tutto, se non ho compreso male il tuo layout.

[sonik_the_sonik]

@ Mich_
Grazie per il consiglio. Appena torno a casa provo a spippolare un po'. Ma mi sa che avevo provato qualcosa, comunque se mi dici che potrebbe essere la strada giusta per risolvere il mio problema mi ci impegno di più!!

Comportamento noto.

Avevo letto qualcosa al riguardo. Sto facendo un sito e in questo periodo avrò letto centinaia di discussioni, articoli e guide...

@panta1978
maledizione... non ci avevo pensato!!
Ora che mi ci fai pensare, così su due piedi mi verrebbe da dire che imposto anche il font-size in pixel solo per il menu... ma così addio accessibilità vero?

@ tutti
Complimenti a tutto il forum. Grazie a voi sto imparando decine di cose nuove a ogni visita!!

Vi faccio sapere al più presto

[panta1978]

Originariamente inviato da sonik_the_sonik

@panta1978
maledizione... non ci avevo pensato!!
Ora che mi ci fai pensare, così su due piedi mi verrebbe da dire che imposto anche il font-size in pixel solo per il menu... ma così addio accessibilità vero?

Non solo addio accessibilità. Se usi una dimensione in px, i browser standard (Opera, Firefox...) ti permetteranno comunque di ingrandire/rimpicciolire il carattere (come è giusto che sia). Solo con IE sarà tutto fisso.

[sonik_the_sonik]

Non solo addio accessibilità. Se usi una dimensione in px, i browser standard (Opera, Firefox...) ti permetteranno comunque di ingrandire/rimpicciolire il carattere (come è giusto che sia). Solo con IE sarà tutto fisso.

maledizione doppia...

Non avresti qualche consiglio?

[panta1978]

Originariamente inviato da sonik_the_sonik
maledizione doppia...

Non avresti qualche consiglio?

Forse potresti fare una cosa del genere (non ci ho mai provato, comunque l'esempio è liberamente ispirato dal sito http://linux.syrolnet.org/?itemid=71.

p.testo1{
position:fixed;
left:100px;
top:50px;
display:block
}

In questo modo dovresti ritrovarti un testo che si trova distanziato 100px dal margine sinistro dello schermo e 50px dal margine superiore dello schermo. Ripeto, dello schermo, non del div in cui si trova.

Forse fa al caso tuo.