Foros del Web » Creando para Internet » CSS »

Centrar menú de navegación horizontal

Estas en el tema de Centrar menú de navegación horizontal en el foro de CSS en Foros del Web. 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 ...

  #1 (permalink)  
Antiguo 27/11/2009, 03:57
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 8 años, 1 mes
Puntos: 265
Centrar menú de navegación horizontal

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.
  #2 (permalink)  
Antiguo 27/11/2009, 05:00
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Centrar menú de navegación horizontal

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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 27/11/2009, 05:11
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 8 años, 1 mes
Puntos: 265
Respuesta: Centrar menú de navegación horizontal

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.
  #4 (permalink)  
Antiguo 27/11/2009, 05:40
 
Fecha de Ingreso: octubre-2009
Mensajes: 21
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Centrar menú de navegación horizontal

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.
  #5 (permalink)  
Antiguo 27/11/2009, 05:40
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Centrar menú de navegación horizontal

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¡¡
  #6 (permalink)  
Antiguo 27/11/2009, 06:02
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Centrar menú de navegación horizontal

Hola Mario

Prueba quitando el float left del ul.menu

saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #7 (permalink)  
Antiguo 27/11/2009, 06:14
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 8 años, 1 mes
Puntos: 265
Respuesta: Centrar menú de navegación horizontal

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.
  #8 (permalink)  
Antiguo 27/11/2009, 06:21
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Centrar menú de navegación horizontal

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

__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Última edición por C2am; 27/11/2009 a las 06:26
  #9 (permalink)  
Antiguo 27/11/2009, 06:25
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 8 años, 1 mes
Puntos: 265
Respuesta: Centrar menú de navegación horizontal

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.
  #10 (permalink)  
Antiguo 27/11/2009, 06:35
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Centrar menú de navegación horizontal

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,
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #11 (permalink)  
Antiguo 27/11/2009, 06:57
 
Fecha de Ingreso: octubre-2009
Mensajes: 21
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Centrar menú de navegación horizontal

Cita:
Iniciado por C2am Ver Mensaje
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.
  #12 (permalink)  
Antiguo 27/11/2009, 07:02
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Centrar menú de navegación horizontal

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.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #13 (permalink)  
Antiguo 27/11/2009, 07:04
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 8 años, 1 mes
Puntos: 265
Respuesta: Centrar menú de navegación horizontal

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.
  #14 (permalink)  
Antiguo 27/11/2009, 07:08
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Centrar menú de navegación horizontal

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&aacute;ctenos"><span>Localizaci&oacute ;n y contacto</span></a></li>

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

</ul>

agregale ese li class vacia.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #15 (permalink)  
Antiguo 27/11/2009, 07:14
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 8 años, 1 mes
Puntos: 265
Respuesta: Centrar menú de navegación horizontal

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.
  #16 (permalink)  
Antiguo 27/11/2009, 07:15
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Centrar menú de navegación horizontal

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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #17 (permalink)  
Antiguo 27/11/2009, 07:23
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 8 años, 1 mes
Puntos: 265
Respuesta: Centrar menú de navegación horizontal

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!
  #18 (permalink)  
Antiguo 27/11/2009, 07:24
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Centrar menú de navegación horizontal

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

prueba otra cosa:

quitale el fondo al ul.menu y ponlo en el nav
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #19 (permalink)  
Antiguo 27/11/2009, 07:27
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 8 años, 1 mes
Puntos: 265
Respuesta: Centrar menú de navegación horizontal

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!
  #20 (permalink)  
Antiguo 27/11/2009, 07:31
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Centrar menú de navegación horizontal

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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #21 (permalink)  
Antiguo 27/11/2009, 07:34
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 8 años, 1 mes
Puntos: 265
Respuesta: Centrar menú de navegación horizontal

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.
  #22 (permalink)  
Antiguo 27/11/2009, 07:36
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Centrar menú de navegación horizontal

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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #23 (permalink)  
Antiguo 27/11/2009, 07:38
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 8 años, 1 mes
Puntos: 265
Respuesta: Centrar menú de navegación horizontal

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!
  #24 (permalink)  
Antiguo 27/11/2009, 07:42
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Centrar menú de navegación horizontal

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

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #25 (permalink)  
Antiguo 27/11/2009, 07:46
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Centrar menú de navegación horizontal

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¡¡
  #26 (permalink)  
Antiguo 27/11/2009, 07:51
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Centrar menú de navegación horizontal

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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #27 (permalink)  
Antiguo 27/11/2009, 07:57
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 8 años, 1 mes
Puntos: 265
Respuesta: Centrar menú de navegación horizontal

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.
  #28 (permalink)  
Antiguo 27/11/2009, 07:58
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Centrar menú de navegación horizontal

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.
  #29 (permalink)  
Antiguo 27/11/2009, 08:03
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 8 años, 1 mes
Puntos: 265
Respuesta: Centrar menú de navegación horizontal

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.
  #30 (permalink)  
Antiguo 27/11/2009, 08:51
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 8 años, 1 mes
Puntos: 265
Respuesta: Centrar menú de navegación horizontal

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:23.