<ul> e posizionamento menù

[idronestudy]

Ho un problema di posizionamento del menu a causa di <ul>
Infatti il menù è formato da una lista dove ogni elemento[*] ha una sua larghezza variabile in base al contenuto, vorrei però che tutto il menù si posizionasse al centro del div superiore. Il mio problema è che <ul> ha deciso che dopo l'ultima lista deve occupare tutto lo spazio che trova...e così utilizzando un div senza larghezza con margin:0 auto rimane sempre decentrato perché la larghezza diventa quella di ul che diventa tutta quella disponibile...

<div id="menu">
     <ul> [*]<a href=#>Pagina 1</a> [*]<a href=#>Pagina 2</a>[/list]
</div>

Codice CSS:

#menu{position:relative; 
    clear:both;
    margin:0 auto;
    padding:0;
    height:30px;}
#menu ul{position:relative; 
    clear:both;
    font-variant:small-caps;}
#menu li{position:relative;
    left:auto;
    height:30px;
    float:left;
    list-style:none;
    border-right:1px solid #F90;
    border-left:1px solid #F90;
    margin:0;
    padding:0;}
#menu li a{width:auto;
    display:block;
    text-decoration:none;
    text-align:center;
    line-height:30px;
    color:#F90;
    padding:0 7px 0 7px;}

Come posso risolvere il problema?

[codencode]

Avendo assegnato il float agli li, per centrare l'ul devi assegnargli una width (magari con misure relative) e margin: 0 auto.

[idronestudy]

Eh ma non posso perché dovrei farlo largo esattamente quanto la somma delle liste che non posso definire...

[0-c00l]

allora metti un width: auto; e un padding ai li

[idronestudy]

Originariamente inviato da 0-c00l
allora metti un width: auto; e un padding ai li

Ho provato impostando il width:auto sia su ul che su div superiore e non viene centrato...
Vedendo con Firebug (che colora lo spazio occupato da ogni elemento e dai suoi margini) che ul si estende verso destra per tutto lo spazio che ha...

[0-c00l]

Originariamente inviato da idronestudy
Ho provato impostando il width:auto sia su ul che su div superiore e non viene centrato...
Vedendo con Firebug (che colora lo spazio occupato da ogni elemento e dai suoi margini) che ul si estende verso destra per tutto lo spazio che ha...

metti a ul:

margin: auto; width: auto; padding-left: 10px; padding-right: 10px;

[idronestudy]

Nulla da fare mi sa che mi devo rassegnare...

[idronestudy]

E invece alla fine sono riuscito a trovare una soluzione grazie a Stu Nicholls...

#menu{clear: both;
float: left;
overflow: hidden; 
width: 100%; 
text-align:center;}

#menu ul{float: left; 
left: 50%;
list-style-type: none;
margin: 0 auto;
padding: 0;
position: relative;}

#menu li{float: left;
position: relative;
right: 50%; 
border-left:solid 1px #F90; 
border-right:solid 1px #F90; 
height:30px;
padding:0; 
margin:0;}

#menu li a{ height:30px;
 display:block; 
text-decoration:none; 
line-height:30px; 
color:#F90;}