Foros del Web » Creando para Internet » CSS »

Cómo centrar una navegación basada en ul-il ??

Estas en el tema de Cómo centrar una navegación basada en ul-il ?? en el foro de CSS en Foros del Web. Hola señores Durante mucho tiempo siempre he tenido ese problema. Para la navegación de mis proyectos prefiero los ul-li y como sabrán, los títulos de ...
  #1 (permalink)  
Antiguo 16/05/2012, 14:07
Avatar de junihh  
Fecha de Ingreso: febrero-2004
Ubicación: República Dominicana
Mensajes: 997
Antigüedad: 17 años, 9 meses
Puntos: 7
Cómo centrar una navegación basada en ul-il ??

Hola señores

Durante mucho tiempo siempre he tenido ese problema. Para la navegación de mis proyectos prefiero los ul-li y como sabrán, los títulos de los enlaces pueden ser muy variantes en cuanto al ancho.

Si la navegación es horizontal, hacer que centre el ul en relación al contenedor siempre ha sido un problema para mi. En esos casos siempre termino poniendo el ul centrado forzozamente con margin-left/right.

¿Alguien conoce el link de algún tip para centrar los ul-li en relación a su contenedor?

Gracias anticipadas a cualquier sugerencia, idea o ayuda que me puedan ofrecer.
__________________
JuniHH
- Mi blog
- Mi portafolio
  #2 (permalink)  
Antiguo 16/05/2012, 14:20
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 12 años, 5 meses
Puntos: 269
Respuesta: Cómo centrar una navegación basada en ul-il ??

En css2.

horizontal:
bloque: margin:0 auto; http://www.librosweb.es/css/capitulo...ntalmente.html
o
linea: text-align:center:

vertical:
bloque: posicion absoluta y margen en % http://www.librosweb.es/css/capitulo...icalmente.html
linea: line-height igual a la altura de la caja padre (de bloque)
  #3 (permalink)  
Antiguo 16/05/2012, 15:12
Avatar de junihh  
Fecha de Ingreso: febrero-2004
Ubicación: República Dominicana
Mensajes: 997
Antigüedad: 17 años, 9 meses
Puntos: 7
Respuesta: Cómo centrar una navegación basada en ul-il ??

Gracias por la sugerencia cristian_cena, pero no me sirvió. Para dejar más claro lo que pretendo, acá verás un ejemplo de nevegación con ul-li similar a lo que acostumbro a usar.

En lo que pones, "margin: 0 auto;" obliga a poner un ancho fijo, pero si el menú tiene enlaces adicionales agregados con javascript (como me tocó en una ocasión), el ancho fijo se vuelve un problema.
__________________
JuniHH
- Mi blog
- Mi portafolio
  #4 (permalink)  
Antiguo 16/05/2012, 15:43
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 13 años, 5 meses
Puntos: 1011
Respuesta: Cómo centrar una navegación basada en ul-il ??

creo que te refieres a esto
Cita:
ul.horizontal {
list-style-type: none;
display: inline-block;
padding: 20px;
background-color: grey;
}


ul.horizontal li {
display: inline-block;
background-color: navy;
color: white;
font-weight: bold;
margin: 0 auto;
padding: 0 7px;
}


<ul class="horizontal">
<li>JAVASCRIPT</li>
<li>CSS</li>
<li>PHP</li>
<li>HTML 5</li>
</ul>
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #5 (permalink)  
Antiguo 16/05/2012, 16:02
Avatar de junihh  
Fecha de Ingreso: febrero-2004
Ubicación: República Dominicana
Mensajes: 997
Antigüedad: 17 años, 9 meses
Puntos: 7
Respuesta: Cómo centrar una navegación basada en ul-il ??

Hola IsaBelM

Tampoco me funciona porque no centra en relación a su contenedor. Para dejar una idea más clara, acá verás un ejemplo gráfico de lo que busco.

Como podrás ver, la navegación centra en relación al ancho del contenedor naranja y en relación a su ancho según la suma de todos los enlaces. En casos de ese tipo uso margin-left/right (como mencioné antes) para dar la apariencia de centrado, pero no me sirve si la cantidad de enlaces varía con javascript.
__________________
JuniHH
- Mi blog
- Mi portafolio
  #6 (permalink)  
Antiguo 16/05/2012, 16:56
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 13 años, 5 meses
Puntos: 1011
Respuesta: Cómo centrar una navegación basada en ul-il ??

prueba ahora
Cita:
div.horizontal {
width: 600px;
background-color: grey;
text-align: center;
height: 50px;
}

ul.horizontal {
list-style-type: none;
display: inline-block;
padding-left: 0;
}


ul.horizontal li {
display: inline-block;
background-color: navy;
color: white;
font-weight: bold;
margin: 0 auto;
padding: 0 7px;
}


<div class="horizontal ">
<ul class="horizontal">
<li>JAVASCRIPT</li>
<li>CSS</li>
<li>PHP</li>
<li>HTML 5</li>
</ul>
</div>
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
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 01:01.