menu orizzontale centrato, elementi <li> di lunghezza variabile

[tziggie]

Salve a tutti. Ho un problema che non riesco a risolvere con un menu css.
Vorrei creare un menu centrato i cui elementi non abbiano lunghezza prefissata.

Posto il CSS che ho creato:

div#navmenu{
       text-align: center;
       height: auto;
       }
div#navmenu ul{
       float: left;
       list-style: none;
       }
div#navmenu li{
       display: inline;
       background: #000033;
       border: none;
       width:auto;
       }
div#navmenu li a{
       float: left;
       font-size: 13px;
       background: #000033;
       border: none;
       }
div#navmenu li a:hover{
       background-color: #003300;
       color: #fff;
       }

Scritto così ottengo degli elementi con una larghezza fissa che io non ho stabilito.
Se tolgo l'elemento float in div#navmenu li a{ ottengo elementi di lunghezza variabile.
Vuol dire che se specifico float ottengo una larghezza fissa di default?

Ad ogni modo, in nessuno dei due casi gli elementi vengono centrati. Dove sbaglio?

Ecco invece la pagina HTML, molto semplice:

<div id="navmenu">
<ul>[*]elemento[*]elemento[*]elemento[/list]
</div>

[Mich_]

La domanda ha risposte diverse a seconda se usi IE o altri browser.
E se usi IE ha risposte diverse a seconda della DTD.

Limito quindi la risposta (parziale) al caso browser standard e XHTML Strict.

Anzitutto un errore: non puoi inserire un blocco all'intero di un elemento inline.
Precisazione: il float fa automaticamente diventare l'elemento di tipo blocco.
Quindi o togli il block dal tag <a> oppure togli l'inline dal[*].

D'altronde un elemento inline non puo` avere dimensioni.

Altra cosa: in una lista orizzontale (in cui si toglie il list-style-type) occorre specificare margini e padding, in modo da togliere gli spazi a sinistra (e anche per avere uniformita` di resa nei vari browser).

Dopodiche` per avere dimensioni variabili di un blocco, conviene definire width:auto.


E si arriva al punto dolente: centrare il tutto.
Anzitutto non si puo` centrare un oggetto flottato. Quindi il tuo <ul> non puo` avere il float. Questo comporta anche che deve esserci un clear da qualche parte, dato che gli elementi interni hanno il float. Puoi mettere il clear alla fine dell'ul, come suggerito in [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float.

A questo punto per centrare dovrebbe essere sufficiente dare margini automatici al blocco ul.

[tziggie]

Ti ringrazio per la risposta.

Cercherò di mettere a frutto quanto è stato scritto.

Ciao.

[fcaldera]

sui link utili c'è un articolo sui float "centrati"

studia bene il css di questo esempio
http://www.cssplay.co.uk/menus/centered.html