Centrar menú de navegación horizontal

MarioAraque · #1 (**permalink**) 27/11/2009, 03:57

Buenos días,

Hago este thread porque estoy teniendo muchos problemas para poder centrar el menú de navegacion de la web que me encomendaron maquetar. Pongo en todos lados text-align:center y la verdad no logro ningun cambio. Y ya estoy llegando al punto de querer probar para que salga antes de solucionar el problema.....por lo que es mejor consultarle a ustedes que saben mucho mas que yo.

El codigo del nav es el siguiente:

Código:

<div class="nav">
        <div class="izquierda"></div>
            <ul class="menu">
                <li><a href="#" title="Volver al inicio"><span>Inicio</span></a></li>
                <li class="divider"></li>
                <li><a href="#" title="Empresa"><span>Empresa</span></a></li>
                <li class="divider"></li>
                <li><a href="#" title="Servicios"><span>Servicios</span></a></li>
                <li class="divider"></li>
                <li><a href="#" title="Productos"><span class="current">Productos</span></a></li>
                <li class="divider"></li>
                <li><a href="#" title="Noticias"><span>Noticias</span></a></li>
                <li class="divider"></li>
                <li><a href="#" title="Distribuciones"><span>Distribuciones</span></a></li>
                <li class="divider"></li>
                <li><a href="#" title="Cont&aacute;ctenos"><span>Localizaci&oacute;n y contacto</span></a></li>
            </ul>
            <div class="derecha"></div>
        </div>

Y el CSS es el siguiente:

Código:

.nav{
  width: 960px;
  height: 63px;
  text-align:center;
  margin: 0 auto;
}

.izquierda{
  width:9px;
  height:63px;
  float:left;
  background:url(images/bordeizq.png) no-repeat center;
}

.derecha{
  width:9px;
  height:63px;
  float:left;
  background:url(images/bordeder.png) no-repeat center;
}


ul.menu{
  list-style-type:none;
  float:left;
  width:942px;
  margin: auto;
  padding:0px;
  background:url(images/fondo_menu.png) repeat-x;
  text-align: center;
}

ul.menu li {
  font-size:12px;
  font-family:Arial, Helvetica, sans-serif;
  line-height:63px;
  vertical-align:middle;
}

ul.menu li.divider {
  width:5px;
  height:63px;
  float:left;
  background:url(images/menu_sep.png) no-repeat center;
}

ul.menu li a{
  color:#FFF;
  display:block;
  float:left;
  margin:0 14px;
  height:35px;
  text-decoration:none;
  background:url(images/fondo_menu.png);
  text-transform:uppercase;
}

ul.menu li a span:hover, .current{
  background:#ba122b;
}

ul.menu li a span{
  padding: 8px 7px 10px 7px;
}

En resultado final lo pueden ver desde el siguiente link:

http://www.juegodetenisalkon.com/tarea/

Les estare muy agradecido si me ayudan, de verdad.

Saludos.

C2am · #2 (**permalink**) 27/11/2009, 05:00

Hola
Una opción es centrarlo a "ojo", es decir a:

ul.menu ponerle un margin left definido, por ejemplo 50px, e ir probando cuando quede mas o menos centrado. Al menos eso fue lo que hice después de mucho renegar.

Saludos

MarioAraque · #3 (**permalink**) 27/11/2009, 05:11

Hola C2am

Sabes que pasa, que vi ese tipo de solución media "cutre", yo pense que habia una forma de centrar la etiqueta UL dentro del DIV con class NAV.

La verdad tengo que entregarlo lo mejor diseñado posible, y queria saber si habia alguna forma de hacer eso, en otro caso no me queda otra =(

Gracias de verdad.

Saludos.

paratrox · #4 (**permalink**) 27/11/2009, 05:40

MarioAraque, yo lo hice asi,

en el css agrege, #content { width: 880px; margin: 0 auto; }

y en la pagina en la etiqueta DIV ( linea 19 ) acontinuacion le agrege id="content" quedando asi, <div class="nav" id="content">

por otra parte borre los text-align:center; del css ( son dos)

y tambien estos dos de la pagina.
<div class="izquierda"></div>
<div class="derecha"></div>

ve que te resulta.

Impostor · #5 (**permalink**) 27/11/2009, 05:40

Prueba añadiendo esto a ul.menu, y si te es posible, reduce el width del menu.

ul.menu{
list-style-type:none;
float:left;
width:942px;
margin: 0 auto;
padding:0px;
background:url(images/fondo_menu.png) repeat-x;
text-align: center;
}

Mas info http://www.forosdelweb.com/1226002-post52.html

Saludos¡¡

C2am · #6 (**permalink**) 27/11/2009, 06:02

Hola Mario

Prueba quitando el float left del ul.menu

saludos

MarioAraque · #7 (**permalink**) 27/11/2009, 06:14

Muchas gracias por sus prontas respuestas!!

paratrox, probe hacer eso que me dijiste y la verdad no lo entiendo absolutamente para nada, ahora ademas me muestra mal el nav.
Lod DIVS izquierda y derecha deben estar pq los bordes izquierdos y derechos son diferentes, no puedo quitarlos asi pq si.

Impostor, agregue el 0 al margin, dejandolo como vos querias, y no surtio cambio. Lamentablemente si achico el tamaño del menu se me va a mostrar mas pequeño en la pantalla principal, el tamaño que tiene es justo.

C2am le quite el float y me mostro el menu de una manera muy extraña, no funciona =(

Saludos.

C2am · #8 (**permalink**) 27/11/2009, 06:21

hola, yo lo probe, por eso te lo dije y me posiciono el menu en forma centrada.
Digo con el codigo que pusiste.
ahora lo reviso de nuevo y veo si me falto algo

MarioAraque · #9 (**permalink**) 27/11/2009, 06:25

Fijate en el link y como se ve el menu al quitarle el float:left;

No hagas caso al footer porque estoy haciendo pruebas jeje, para la alineacion y eso.

http://www.juegodetenisalkon.com/tarea/

Saludos y gracias.

C2am · #10 (**permalink**) 27/11/2009, 06:35

Hola
quitale el id=content ya que es el id del contenedor principal

<div class="nav" id="content">

los id no se pueden repetir.
No creo que sea el problema pero vamos limpiando,

paratrox · #11 (**permalink**) 27/11/2009, 06:57

Cita:

Iniciado por C2am

Hola
quitale el id=content ya que es el id del contenedor principal

<div class="nav" id="content">

los id no se pueden repetir.
No creo que sea el problema pero vamos limpiando,

C2am, te explicas un poco mas, la verdad es que yo no se mucho de css, mas trato de aprender :-p , el id="content" tambien lo probe poniendolo en la etiqueta body y quedo centrado en ambos casos.

C2am · #12 (**permalink**) 27/11/2009, 07:02

estamos casi iguales con el css, jaja

Los id de cualquier elemento, etiqueta, etc deben ser únicos, no se pueden repetir dentro del mismo documento.
Si llamas a un div content, no puedes llamar asi a ningún otro div, p o lo que sea.
Además en este caso estas asignado estilos tanto con el class como con el id, ya que en tu hoja de estilos tienes el #content, y como que el navegador no sabe para donde ir, jaja.

MarioAraque · #13 (**permalink**) 27/11/2009, 07:04

Ahi le quite el float left nuevamente y le saque el id:content que tenia el div nav.

Es muy extraño que a ustedes les funcione y a mi no, y eso que pruebo en IE y en FF

Me toy volviendo loco =(

Saludos.

C2am · #14 (**permalink**) 27/11/2009, 07:08

Prueba estos cambios:
al css agregale:

.vacia {clear:both;}

quita el float left de ul menu

y en el menu:

<ul class="menu">
<li><a href="#" title="Volver al inicio"><span>Inicio</span></a></li>
<li class="divider"></li>
<li><a href="#" title="Empresa"><span>Empresa</span></a></li>
<li class="divider"></li>
<li><a href="#" title="Servicios"><span>Servicios</span></a></li>
<li class="divider"></li>
<li><a href="#" title="Productos"><span class="current">Productos</span></a></li>
<li class="divider"></li>
<li><a href="#" title="Noticias"><span>Noticias</span></a></li>
<li class="divider"></li>
<li><a href="#" title="Distribuciones"><span>Distribuciones</span></a></li>
<li class="divider"></li>
<li><a href="#" title="Contáctenos"><span>Localizaci&oacute ;n y contacto</span></a></li>

<li class="vacia"></li>

</ul>

agregale ese li class vacia.

MarioAraque · #15 (**permalink**) 27/11/2009, 07:14

Habia probado agregar un div con un clear both debajo del ul, pero tampoco funciono, tambien probe poner un span y no dio resultado.

Hice lo que vos me dijiste. Pero fijate como se ve ahora....aunq se vea mal (eso se arreglaria con los tamaños), no sigue centrado.

Probe poner un Div contenedor del ul, le puse text-align:center. Hasta con un display:block, pero no surtio efecto.

Saludos.

C2am · #16 (**permalink**) 27/11/2009, 07:15

ul.menu{
list-style-type:none;
width:880px;
padding:0px;
background:url(images/fondo_menu.png) repeat-x;
text-align: center;
border: medium solid #FFF;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
/*float: left;*/
}

el width en 880px

no sé por que no te lo puse antes, jaja

MarioAraque · #17 (**permalink**) 27/11/2009, 07:23

A ver, mira, tomo mas forma, pasa que se quedaron espacios en blanco a los costados. No se supone que si achique el tamaño, se deberia achicar solo a la derecha?

Fijate! No entiendo como llegaste a ese 880!

C2am · #18 (**permalink**) 27/11/2009, 07:24

probando, jaja, no queda otra con esto del css.

prueba otra cosa:

quitale el fondo al ul.menu y ponlo en el nav

MarioAraque · #19 (**permalink**) 27/11/2009, 07:27

Ahi se lo quite, y ya se ve bien!! Solo resta meter el div que muestra el fondo izquierdo.
Voy a probar que tamaño poner, falta re poquito!

C2am · #20 (**permalink**) 27/11/2009, 07:31

con eso me parece que solucionamos el problema del fondo, así que tal vez no sea necesario el:
<li style="clear:both;"></li>

achica un poco el div nav. hasta que el borde derecho no quede debajo

MarioAraque · #21 (**permalink**) 27/11/2009, 07:34

Justo venia a postear eso jeje, quitando ese Li ya se ve centrado.

Ahora digo , pq sale el menu con ese bordesito? Lo ves vos tb? en la parte derecha.

C2am · #22 (**permalink**) 27/11/2009, 07:36

si, es la imagen del extremo

.derecha{
width:9px;
height:63px;
float:left;
background:url(images/bordeder.png) no-repeat center;
}

flotalo a la derecha

float: rigth o como se escriba

MarioAraque · #23 (**permalink**) 27/11/2009, 07:38

Sinceramente no entiendo pq aparece asi, visto que no modifique su tamaño para que muestre ese borde.

De todos modos te mereces que te ponga karma positivo pq me has ayudado un monton, de verdad gracias!

EDIT: Listo! Funciono todo, mira como quedo!

C2am · #24 (**permalink**) 27/11/2009, 07:42

En realidad es una excusa para seguir aprendiendo esto del css, asi que gracias a vos.

Saludos

Impostor · #25 (**permalink**) 27/11/2009, 07:46

Holas, habeis hecho un gran trabajo, si me permites, solo voy a depurar un poco el código, quitando cosas no necesarias.

Las clases .derecha e .izquierda no son necesarias, tampoc los div, se pueden eliminar, mas unas cosillas mas que no son necesarias, asi quedan los códigos:

Código:

.nav{
  width: 960px;
  height: 63px;
  background:url(images/fondo_menu.png) repeat-x;
}

ul.menu{
  list-style-type:none;
  width:880px;
  margin: 0 auto;
  padding:0px;
}

ul.menu li {
  font-size:12px;
  font-family:Arial, Helvetica, sans-serif;
  line-height:63px;
}

ul.menu li.divider {
  width:5px;
  height:63px;
  float:left;
  background:url(images/menu_sep.png) no-repeat center;
}

ul.menu li a{
  color:#FFF;
  display:block;
  float:left;
  margin:0 14px;
  height:35px;
  text-decoration:none;
  text-transform:uppercase;
}

ul.menu li a span:hover, .current{
  background:#ba122b;
}

ul.menu li a span{
  padding: 8px 7px 10px 7px;
}

y el html

Código HTML:

<div class="nav">
                 <ul class="menu">
                <li><a href="#" title="Volver al inicio"><span>Inicio</span></a></li>
                <li class="divider"></li>
                <li><a href="#" title="Empresa"><span>Empresa</span></a></li>
                <li class="divider"></li>
                <li><a href="#" title="Servicios"><span>Servicios</span></a></li>
                <li class="divider"></li>
                <li><a href="#" title="Productos"><span class="current">Productos</span></a></li>
                <li class="divider"></li>
                <li><a href="#" title="Noticias"><span>Noticias</span></a></li>
                <li class="divider"></li>
                <li><a href="#" title="Distribuciones"><span>Distribuciones</span></a></li>
                <li class="divider"></li>
                <li><a href="#" title="Contáctenos"><span>Localización y contacto</span></a></li>
            </ul>
        </div>

Saludos¡¡

C2am · #26 (**permalink**) 27/11/2009, 07:51

Gracias por pasar en limpio Impostor, pero en las clases izquierda y derecha tiene los bordes izquierdos y derecho, que son imagenes de fondo, por eso son necesarias, necesarias para su diseño.

saludos

MarioAraque · #27 (**permalink**) 27/11/2009, 07:57

El tema es que me dieron a maquetar una imagen igual a la que ustedes ven en el link que tengo de prueba. En la misma los bordes se ven de diferentes colores, osea son otras imagenes.

Lo veo totalmente inutil ponerlo asi, pero ellos son los que me dicen que hacer, por lo que tengo que hacerles caso =(

Muchas gracias por tu comentario, la verdad pienso igual que vos.

Saludos.

Impostor · #28 (**permalink**) 27/11/2009, 07:58

Se que la utilidad de los div izquierdos y derechos, son otros fondos, pero la diferencia es practicamente inapreciable a altas resoluciones, solo con el zoom puedes distinguir. Pero el quitarlo o no, lo dejaremos en manos de la autora de la web.

MarioAraque · #29 (**permalink**) 27/11/2009, 08:03

Le acabo de enviar un email consultandole sobre este tema, por suerte quitar los divs no es mucho problema.

También, si notan, el padding de Productos (que esta resaltado) y de todos los hovers que haga en el nav no son iguales, puesto que en la imagen que me enviaron salen de otros tamaños. Lo hicieron con Fireworks, entonces quizas tenga algun error de diseño.

Saludos.

MarioAraque · #30 (**permalink**) 27/11/2009, 08:51

Tengo otro problema, no se si postearlo aca o hacer otro thread =(

A ustedes algune vez le paso que una imagen dentro de un link funcione en IE pero no en FF? Porque recien me doy cuenta que eso esta ocurriendo en mi pagina.