Salve,
sto cercando di realizzare un menu orizzontale (liste) in modo che sia centrato nella pagina e che la prima voce venga allineata a sinistra e l'ultima a destra. Qualche suggerimento operativo ?
Il posizionamento assoluto ? Con il metodo classico viene centrato ma le voci poi scostano dai bordi
tnx
allora supponiamo che il tuo elenco sia dentro a un contenitore generico, sia esso <body> <div> o <span>
a questo elemento contenitore devi dare la larghezza del 100% della pagina e l'allineamento centrale del testo,
poi nella lista andrai a specificare display:inline per renderla orizzontale e di nuovo la larghezza del 100% in modo che si espanda su tutto il contenitore
Ubuntu rulez!! :P
intanto grazie per l'attenzione,
comunque anche così facendo il menù viene centrato e rimane spazio a sinistra della prima voce e a destra dell'ultima voce.
hai ragione scusami..
ecco la soluzione:
ovviamente organizza tutto in un css separato che è meglioCodice PHP:<body align="center" style="background-color:red;">
<div style="text-align:center;width:100%;">
<ul style="margin:0px;padding:0px;width:100%;">
<li style="float:left;width:25%;display:inline;">primo elemento
<li style="float:left;width:25%;display:inline;">secondo elemento
<li style="float:left;width:25%;display:inline;">terzo elemento
<li style="float:left;width:25%;display:inline;">quarto elemento
<div style="clear:left;width:0px;"></div>[/list]
</div>
</body>
l'unica cosa che devi cambiare ai li è la larghezza in percentuale che ottieni facendo 100/"numero di[*]"
Ubuntu rulez!! :P
per il momento ho risolto con 3 div affiancati
<div id="topmenu" class="topmenu" style="position:relative;">
<div style="float:left; width:130px;text-align:left">VOCE1</div>
<div style="float:left; width:392px; text-align:center;">
<ul>
[*]VOCE2[*]VOCE3[*]VOCE4[/list]
</div>
<div style="float:left; width:130px; text-align:right;">VOCE5</div>
</div>
se esiste un modo per scrivere diversamente ben venga.....
N.B. - la lista centrale è stilizzate con CSS esterni, quindi il menù è orizzontale.....
ok grazie,
provo anche il tuo........ mi sembra meno codice del mio
umh,
ho provato il tuo, simotenax, ma purtroppo non va bene
mi lascia sempre un pò di spazio a sx della prima voce e a dx della seconda. Devo tornare alla mia soluzione.......
il metodo che hai usato non va bene in quanto a te ora va bene ma se cambi risoluzione perdi l'effetto che cerchi
tutt'al più con la soluzione che ti avevo proposto puoi integrare in questo modo:
ma perdi la spaziatura omogenea fra un elemento e l'altroCodice PHP:<body align="center" style="background-color:red;">
<div style="text-align:center;width:100%;">
<ul style="margin:0px;padding:0px;width:100%;">
<li style="float:left;width:20%;text-align:left;display:inline;">primo elemento
<li style="float:left;width:25%;display:inline;">secondo elemento
<li style="float:left;width:25%;display:inline;">terzo elemento
<li style="float:left;width:20%;text-align:right;display:inline;">quarto elemento
<div style="clear:left;width:0px;"></div>[/list]
</div>
</body>
Ubuntu rulez!! :P
un' altro problema è anche la spaziatura omogenea, infatti.
Mentre per il discorso risoluzione non è un problema perché il menù ha una larghezza fissa.
ma scusa se la tua lista ha la larghezza di 130+392+130 quindi in totale sarà di 652px quindi vuol dire che il primo e l'ultimo elemento non sono attaccati ai bordi della pagina per quanto il contenitore sia a larghezza fissa..
nota che comunque con qualsiasi metodo che utilizzi per attaccare i 2 elementi esterni ai bordi della pagina non riuscirai mai a distanziare in maniera omogenea gli elementi, sempre che non usi qualche algoritmo in javascript che ti calcola ogni volta le dimensioni..
Ubuntu rulez!! :P
Permessi di invio
Rispondi quotando