No logro centrar menu horizontal

[iorio]

Hola, no logro centrar el menu, intente de todo, pero nada, soy nuevo en css, esto es una prueba que estoy haciendo leyendo el libro.

Url: http://fw.nixiweb.com/indice.html

Código CSS:

#tabs {
      float:left;
      width:100%;
      background: #333;
      font-size:93%;
      line-height:normal;
      padding-top: 0px;
      }
      
    #tabs ul {
      margin:0;
      padding:20px 20px 0 100px;
      list-style:none;
      }
      
    #tabs li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs a {
      float:left;
      background:#333;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs a span {
      float:left;
      display:block;
      background:#444;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#FFF;
      }
    #tabs a:hover {
      background:#333;
      }
    #tabs a:hover span {
      background:#222;
      }
 

Código HTML:

<div id="tabs">
  <ul>
   <li><a href="indice.html" title="Pagina principal"><span>Inicio</span></a></li>
   <li><a href="portafolio/proyecto1.html" title="Proyecto 1 de Mi Sitio"><span>Proyecto 1</span></a></li>
   <li><a href="portafolio/proyecto2.html" title="Proyecto 2 de Mi Sitio"><span>Proyecto 2</span></a></li>
   <li><a href="portafolio/proyecto3.html" title="Proyecto 3 de Mi Sitio"><span>Proyecto 3</span></a></li>
   <li><a href="portafolio/proyecto4.html" title="Proyecto 4 de Mi Sitio"><span>Proyecto 4</span></a></li>
   <li><a href="portafolio/proyecto5.html" title="Proyecto 5 de Mi Sitio"><span>Proyecto 5</span></a></li>
  </ul>
 </div> 

[elegc_27]

Hola revise tu pagina pero la veo correctamente centrada, con todo indícame cual es el nombre del archivo que estas modificando para ayudarte.

[iorio]

Hola, la pagina si esta centrada, lo que preguntaba era por el menu horizontal..

ahi deje el html y el css, que mofique y ahora es asi:

Código CSS:

/* Menu Tabs */ 
 
#tabs {
      float:left;
      width:100%;
      background: #333;
      font-size:110%;
      line-height:normal;
      padding-top: 0px;
      margin:0 auto 0 auto;   
      }
      
    #tabs li {
      display:inline;
      }
      
    #tabs a {
      float:left;
      background:#333;
      padding:0 0 0 4px;
      text-decoration:none;
      }
      
    #tabs a span {
      display:block;
      background:#444;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#FFF;
      }
    #tabs a:hover {
      background:#333;
      }
    #tabs a:hover span {
      background:#222;
      }
 

Ahi viendo un poco vi que al achicar el explorador los botones se van centrando pero si achicas mas se pasan para el otro renglon por que actua como un elemento de bloque, me gustaria que se adapte al centro lo maximo posible al achicar pero si que se pasa los botones queden en la linea y no hacia el otro renglon.

[mechaz]

HTML

Código:

<div id="tabs">
  <ul>
   <li><a href="indice.html" title="Pagina principal"><span>Inicio</span></a></li>
   <li><a href="portafolio/proyecto1.html" title="Proyecto 1 de Mi Sitio"><span>Proyecto 1</span></a></li>
   <li><a href="portafolio/proyecto2.html" title="Proyecto 2 de Mi Sitio"><span>Proyecto 2</span></a></li>
   <li><a href="portafolio/proyecto3.html" title="Proyecto 3 de Mi Sitio"><span>Proyecto 3</span></a></li>
   <li><a href="portafolio/proyecto4.html" title="Proyecto 4 de Mi Sitio"><span>Proyecto 4</span></a></li>
   <li><a href="portafolio/proyecto5.html" title="Proyecto 5 de Mi Sitio"><span>Proyecto 5</span></a></li>
  </ul>
 </div>

CSS

Código:

#tabs {
      float:left;
      width:100%;
      background: #333;
      font-size:110%;
      line-height:normal;
      padding-top: 0px;
      margin:0 auto 0 auto;   
      text-align:center;
      }

Con ese text-align, creo que se solucionara lo que quieres.

[iorio]

No no funciona, vi en un tema que los float:left; hacen que el text-align:center; no funcione, si saco el float:left; se desarman los botones.

ya probe con todo lo que dice en este tema y sigue igual:
http://www.forosdelweb.com/f53/menu-...do-div-451007/

[mechaz]

No es necesario el float, en un menú, se puede hacer fácilmente sin el.

HTML

Código:

<ul>
   <li><a href="indice.html" title="Pagina principal"><span>Inicio</span></a></li>
   <li><a href="portafolio/proyecto1.html" title="Proyecto 1 de Mi Sitio"><span>Proyecto 1</span></a></li>
   <li><a href="portafolio/proyecto2.html" title="Proyecto 2 de Mi Sitio"><span>Proyecto 2</span></a></li>
   <li><a href="portafolio/proyecto3.html" title="Proyecto 3 de Mi Sitio"><span>Proyecto 3</span></a></li>
   <li><a href="portafolio/proyecto4.html" title="Proyecto 4 de Mi Sitio"><span>Proyecto 4</span></a></li>
   <li><a href="portafolio/proyecto5.html" title="Proyecto 5 de Mi Sitio"><span>Proyecto 5</span></a></li>
  </ul>

CSS

Código:

 #tabs {
      background: #333;
      font-size:110%;
      line-height:normal;
      padding-top: 0px;
      text-align:center;
      } 

#tabs li {
      display:inline-block;
 }

Con eso solamente debe funcionarte...

[iorio]

Bueno ahi si corrigio algo, bastante bien pero no perfecto, queda un poquito descentrado, ademas se mueve segun el scroll o tamaño del explorador, incluso me quedan en 2 lineas, a igual que las imagenes se salen de contexto si acerco mucho, como se puede mejorar esto?

mi css quedo asi:

Código CSS:

#tabs {
      background: #333;
      font-size: 110%;
      line-height: normal;
      text-align: center;
      } 
 
    #tabs li {
      display: inline-block;
    }
      
    #tabs a {
      background: #333;
      text-decoration: none;
      }
      
    #tabs a span {
      display: inline-block;
      background: #444;
      padding: 5px 5px 5px 6px;
      color: #FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#FFF;
      }
    #tabs a:hover {
      background:#333;
      }
    #tabs a:hover span {
      background:#222;
      }
 

[elegc_27]

Estuve navegando y vi un menú horizontal en css que me gustaron el # 1 o el 3 me parece que queda perfecto para tu web, espero te sirvan así no te rompes la cabeza.

http://www.recursoswebmasters.com.ar/2010/02/10-menu-de-navegacion-horizontales-con_23.html