mega menu dropdown...centrato

[paul78]

allora....ho fatto delle ricerche sul megamenu creato in css.....ho fatto delle ricerche ed ho trovato molto interessante dei menu a disposizione in questo sito:

http://www.cssplay.co.uk/menus/pro_horizontal.html

ho utilizzato il menu2.....

tutti i megamenu (anche in jquery) sono solo o disposti a destra o a sinistra.....

io lo vorrei al centro.....
ora vi scrivo anche lo script che ho inserito alla mia pagina web;
nell'head ho inserito questo script modificando il "padding" in base alla dimensione del mio schermo.....il padding era solo :0

/* menu*/
.menu2 {padding:0px 0px 0px 450px; margin:0 auto; text-align : center; list-style:none; height:40px; background:#fff url(button1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu2 li {float:left; display:inline;}
.menu2 li a {display:block; float:left; height:40px; line-height:40px; color:#aaa; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu2 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu2 li.current a {color:#fff; background:url(button3.gif);}
.menu2 li.current a b {background:url(button3.gif) no-repeat right top;}
.menu2 li a:hover {color:#fff; background:#000 url(button4.gif);}
.menu2 li a:hover b {background:url(button4.gif) no-repeat right top;}
.menu2 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
.menu2 li.current a:hover b {background:url(button3.gif) no-repeat right top;}

nel body ho inserito il menù.....

<ul class="menu2"/>[*]Home[*]Intro[*]Banner[*]Sfondi[*]Photogallery[*]Contatti[/list]

il menù così come stà va benissimo.....ora vorrei solo disporrerlo automaticamente al centro....non in base alla grandezza del mio monitor ma in tutte le dimensioni.....

so che la modifica da fare è nel padding e nel margin:0 auto...ma non riesco a capire dove sbaglio....

se mi potreste aiutare....stò impazzendo.....



grazie

[Mich_]

Per avere un oggetto centrato, devi dare margini orizz. automatici, e devi mettere a zero (o comunque uguali fra loro) i padding.
Pero` l'oggetto stesso deve avere una dimensione definita, altrimenti non e` detto che i browser riescano a centrare.

Quindi la formattazione del blocco principale del tuo menui (quello che contiene tutto), dovrebbe essere formattato in questo modo:

.menu2 {
  padding: 0;
  margin: 0 auto;
  width: 20em;      /* misura da definire in base alle tue esigenze */
  text-align: center;     /* questo ha effetto sui testi dei vari[*] - forse dovresti spostarlo nei li, se serve */
  list-style: none;
  height: 40px;
  background: #fff url(button1.gif);
  position: relative;
  border: 1px solid #000;
  border-width: 0 1px;
  border-bottom: 1px solid #444;
}

E perche` ci metti tutti i [b] all'itnerno di <a>? A parte che il tag [b] e` deprecato, ma sarebbe meglio definire il font-weight all'interno degli <a>