allineamento menu

[Dante12]

ho letto bene questa guida http://css.html.it/articoli/leggi/37...oad-via-css/3/ , che spiega come fare un menu con rollover con soli css ecc... , però mi sorge un problema, in quanto io vorrei centrare questo menu in una pagina, ma non me lo fa centrare, credo per via del float impostato su left, però modificando l'allineamento di quest'ultimo in uno diverso ottengo il risultato che i tasti mi vanno uno sotto l'altro. :master:
Naturalmente align e center non risolvono il problema
Come posso fare per centrare quindi questo menu.. grazie a tutti

[thomas_anderson]

ciao!
la proprietà 'text-align' allinea i box in riga all'interno di una riga. per quanto riguarda i box a blocco, ha la facoltà di allinearne solo il testo: http://www.w3.org/TR/REC-CSS2/text.html

Detto questo, parlando sempre di un contesto di formattazione di blocco, ti consiglio di impostare un contenitore per il menu che sia centrato. per centrare un contenitore, devi dare text:align: center al suo genitore (per IE) e poi margin-left/right su auto al contenitore stesso (per gli altri browser). nota che questo non centrerà gli elementi, in quanto il float trasforma automaticamente un box in un box di blocco. se vuoi che la proprietà 'text-align' allinei al centro, devi trasformare il contesto di blocco in un contesto di riga, ossia dare display: inline agli elementi[*], text-align: center a <ul>. poi potrai agire sul padding di <a> per impostarne le dimensioni. Nota per un elemento in riga non rimpiazzato la proprietà 'width' non ha effetto:
http://www.w3.org/TR/REC-CSS2/box.html e http://www.w3.org/TR/REC-CSS2/visuren.html
se il tuo scopo è quello di fare un rollover di immagini hai bisogno sia di 'width' che di 'height', dunque di un contesto di formattazione a blocco. quindi devi usare il float, che condiziona l'allineamento delle voci.

in sintesi: avrai il box del menu centrato, ma l'allineamento delle voci sarà sempre condizionato dal float, che rimuove un elemento dal flusso del documento, spostandolo o a destra o a sinistra
rispetto al box in riga di riferimento.

Nota: tu hai questo CSS:

body{font: 76% arial,sans-serif;background-color: #C1D5F0}
h1{color: #666;font: normal 1.3em georgia,serif;letter-spacing: 2px}
div#navigation{width: 660px;height: 35px;margin-top: 20px}
div#navigation ul{list-style-type: none;margin: 0;padding: 0}
div#navigation li{float: left;margin: 0 3px 0 0;padding:0}
div#navigation a{display: block;width: 120px;line-height: 30px;text-decoration: none;
    border: 1px solid #666;background: url("sfondocombinato.jpg") no-repeat top left;
    color: #333;font-variant: small-caps;text-indent: 27px}
div#navigation a:hover{background-position: -130px 0;color: #336}
div#navigation li#activelink a,div#navigation li#activelink a:hover{
    background-position: -260px 0;color: #fff}

la parte interessante del codice sono le dichiarazioni di background-position, che spostando l'origine del background fanno in modo che questo sia caricato in anticipo dal browser. altra cosa da notare è che per i blocchi <a> non è stata impostata l'altezza ma solo l'interlinea
('line-height'). questo evita un problema di IE: http://gabrieleromanato.altervista.o...inglayout.html dovuto alla sua proprietà hasLayout. una tecnica simile è comunque stata esposta anche su http://www.constile.org/css_guida_completa/ , un libro che ti consiglio di comprare.