Un aiuto per centrare un ul

[matmilan]

Ciao a tutti,

ho una parte della mia pagina strutturata così:

<div> (con width: 960px)
Div con float left ---- ul con dentro menu ---- Div con float right
</div>

Il mio problema è che i due div variano larghezza in base al loro contenuto grazie a javascript e non so come fare a centrare l'ul in centro.

Come posso risolvere?

[Nobody33]

Dato che non ho visto il progetto, suggerirei di metterlo dentro un contenitore (forse anche senza) con margin: 0 auto;

[matmilan]

Dato che non ho visto il progetto, suggerirei di metterlo dentro un contenitore (forse anche senza) con margin: 0 auto;

Questo è il codice:

<div class="menu" style="height:88px;">
<div style="background: url("css/img/menu.png") repeat scroll 0% 0% transparent; height: 51px; width: 100%;">
<div style="padding: 0px; width: auto; float: left; height: 49px; margin-left: 6px;"><a class="lefthover" style="color: #FFFFFF;     display: block;     float: left;     padding: 17px 5px;     text-decoration: none;"></a><a style="background-repeat:  repeat-x; background-image: url("css/img/hover.png"); font-weight:  bold; color: rgb(255, 255, 255); display: block; float: left;  text-decoration: none; font-size: 14px; padding: 16px 4px;">Lunedì 1 ottobre 2013</a>
<a class="righthover" style="color: #FFFFFF;     display: block;     float: left;     padding: 17px 5px;     text-decoration: none;"></a></div>


<ul class="topnav">
...menu...
</ul>

<div style="padding-top: 0px; padding-bottom: 0px; padding-left: 0px; width: auto; height: 49px; float: right; margin-right: 6px;"><a class="lefthover" style="color: #FFFFFF;     display: block;     float: left;     padding: 17px 5px;     text-decoration: none;"></a><a style="background-repeat:  repeat-x; background-image: url("css/img/hover.png"); font-weight:  bold; color: rgb(255, 255, 255); display: block; float: left;  text-decoration: none; font-size: 14px; padding: 16px 4px;">Visite: 1000</a><a class="righthover" style="color: #FFFFFF;     display: block;     float: left;     padding: 17px 5px;     text-decoration: none;"></a></div></div><div class="squadre">...altro menu...
</div></div>

Come faccio?

[Nobody33]

Non crederai mica che un essere umano riesca a leggere quel codice indentato cosi perfetto...hehehe .
Per favore, manda un link alla pagina oppure indentalo come si deve.

[matmilan]

Non crederai mica che un essere umano riesca a leggere quel codice indentato cosi perfetto...hehehe .
Per favore, manda un link alla pagina oppure indentalo come si deve.

Scusa comunque eccolo:

<div class="menu" style="height:88px;">
   <div style="background: url(css/img/menu.png) repeat scroll 0% 0% transparent; height: 51px; width: 100%;">

      <div style="padding: 0px; width: auto; float: left; height: 49px; margin-left: 6px;">
           <a class="lefthover" style="color: #FFFFFF; display: block; float: left; padding: 17px 5px; text-decoration: none;"></a>
           <a style="background-repeat:  repeat-x; background-image: url(css/img/hover.png); font-weight:  bold; color: rgb(255, 255, 255); display: block; float: left;  text-decoration: none; font-size: 14px; padding: 16px 4px;">testo...</a>
           <a class="righthover" style="color: #FFFFFF; display: block; float: left; padding: 17px 5px; text-decoration: none;"></a>
      </div>


      <ul class="topnav">
      ...menu...
      </ul>

      <div style="padding-top: 0px; padding-bottom: 0px; padding-left: 0px; width: auto; height: 49px; float: right; margin-right: 6px;">
           <a class="lefthover" style="color: #FFFFFF; display: block; float: left; padding: 17px 5px; text-decoration: none;"></a>
           <a style="background-repeat:  repeat-x; background-image: url(css/img/hover.png); font-weight:  bold; color: rgb(255, 255, 255); display: block; float: left;  text-decoration: none; font-size: 14px; padding: 16px 4px;">2 testo</a>
           <a class="righthover" style="color: #FFFFFF; display: block; float: left; padding: 17px 5px; text-decoration: none;"></a>
      </div>

   </div>
 
  <div class="squadre">...altro menu...</div>

</div>

[Nobody33]

dagli una larghezza che vuoi tu ed aggiungi margin: 0 auto;

Inoltre manca un contenitore principale (almeno nella parte incollato qui), dovresti metterlo.

Se ancora hai dei dei problemi, magari carichi tutto da qualche parte e manda un link; sempre meglio vedere tutta la pagina.
Infine, se non vuoi che il tuo script sposta il contenitore forse sarebbe opportuno darle una position: absolute.