Foros del Web » Creando para Internet » CSS »

Centrar elementos de lista UL

Estas en el tema de Centrar elementos de lista UL en el foro de CSS en Foros del Web. Buenas noches, tengo un problema para centrar una lista con un par de etiquetas <li> dentro. Lo que sucede, es que al darle un ancho0 ...
  #1 (permalink)  
Antiguo 26/04/2011, 00:20
Avatar de McBlink  
Fecha de Ingreso: noviembre-2006
Ubicación: $ARG->LaPampa()
Mensajes: 1.694
Antigüedad: 11 años
Puntos: 22
Centrar elementos de lista UL

Buenas noches,
tengo un problema para centrar una lista con un par de etiquetas <li> dentro. Lo que sucede, es que al darle un ancho0 fijo a la lista <ul> y flotar sobre la derecha los <li> dentro, éstos no se centran porque están flotados.. hay alguna forma de poder centrarlos?

Si yo le pongo el ancho a la lista del tamaño total de los <li> totales, obviamente quedara centrada, pero el problema es el tamaño de las lista puede variar ( según longitudes de palabras).

si no se entiende pongo un imagen.

Muchas Gracias,
Saludos
  #2 (permalink)  
Antiguo 26/04/2011, 00:30
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Centrar elementos de lista UL

seria genial si nos das tu html y css....
aun asi, creo que deberias solucionarlo con el text-align: center; y sino,
prueba colocando los textos dentro de una etiqueta contenedora y a esta darle el estilo centrado, algo asi: <li><span>texto</span></li>.

Suerte
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #3 (permalink)  
Antiguo 26/04/2011, 00:55
Avatar de McBlink  
Fecha de Ingreso: noviembre-2006
Ubicación: $ARG->LaPampa()
Mensajes: 1.694
Antigüedad: 11 años
Puntos: 22
Respuesta: Centrar elementos de lista UL

gracias por tu respuesta! ahi pongo el codigo.. el problema no es centrar el texto, sino los elementos <li> que contiene la lista:

Código CSS:
Ver original
  1. #nav {
  2.     width:1024px;
  3.     height:100%;
  4.     list-style:none;
  5.     margin:auto;
  6. }
  7. #nav li {
  8.     min-width:75px;
  9.     height:100%;
  10.     padding-left:10px;
  11.     padding-right:10px;
  12.     float:left;
  13.     text-align:center;
  14. }

le pongo a los <li> un ancho mínimo de 75px y si la palabra es mayor, será mas ancho.. el poblema que la suma de todos los <li> no siempre será 1024px (o casi nunca), entonces quisiera que si hay 1 <li> solo dentro de la lista, se vea centrado dentro de los 1024px que mide la lista.

Gracias!
  #4 (permalink)  
Antiguo 26/04/2011, 01:00
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Centrar elementos de lista UL

sencillo mi estimado.....
la lista debes encerrarla en un contenedor, ejemplo en un div....
luego el ancho de 1024px lo debe tener el div y la lista ul sin ancho o en auto....
y por ultimo, le das text-align: center al div para que la lista este centrada...

Claro que hay otras maneras, ejemplo usando margin en auto.
Pero prueba eso aver si te sale, sino... como te pedi, tambien postea el html, cosa que te doy una solucion exacta.

Suerte
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #5 (permalink)  
Antiguo 26/04/2011, 01:04
Avatar de McBlink  
Fecha de Ingreso: noviembre-2006
Ubicación: $ARG->LaPampa()
Mensajes: 1.694
Antigüedad: 11 años
Puntos: 22
Respuesta: Centrar elementos de lista UL

No0, lamentablemente no me funciona asi: aca dejo el codigo para ver si hay alguna forma efectiva de hacerlo andar :)

Gracias!
Código HTML:
Ver original
  1. <div id="nav">
  2.         <a href="#"><li>sdflajldasd</li></a>
  3.         <a href="#"><li>sadasdasdasd</li></a>      
  4.  
  5.  </div>
  #6 (permalink)  
Antiguo 26/04/2011, 01:26
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: Centrar elementos de lista UL

arregla tu html porque esta mal codificado.... deberia ser:
Código HTML:
Ver original
  1. <div id="nav">
  2.     <ul>
  3.         <li><a href="#">abc</a></li>
  4.         <li><a href="#">sdflajldasd</a></li>
  5.     </ul>
  6. </div>
Y tu css quedaria asi:
Código CSS:
Ver original
  1. #nav {
  2.     width: 1024px;
  3.     text-align: center;
  4. }
  5. #nav ul {
  6.     margin: 0;
  7.     padding: 0;
  8.     list-style: none;
  9. }
  10. #nav ul li {
  11.     display: inline;
  12.     padding: 0 10px;
  13. }

Listo mi estimado.... espero te sirva de mucho....

Hasta la proxima y gracias por el karma
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #7 (permalink)  
Antiguo 26/04/2011, 05:29
Avatar de McBlink  
Fecha de Ingreso: noviembre-2006
Ubicación: $ARG->LaPampa()
Mensajes: 1.694
Antigüedad: 11 años
Puntos: 22
Respuesta: Centrar elementos de lista UL

Amigo, gracias por tus respuestas.. te comento:
ya habia probado usar la propiedad inline, pero el problema es que no toma la altura de los elementos, nose porque sucede ésto. Creo que todos los elementos con prop inline no toman altura..
y queda bastante mal si no se le puede dar altura.

seria una solución usar div en lugar de <li>, pero seria eso correcto?
alguna otra idea?

Gracias

Última edición por McBlink; 26/04/2011 a las 05:41
  #8 (permalink)  
Antiguo 26/04/2011, 15:20
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Centrar elementos de lista UL

Hola:

Cita:
Iniciado por McBlink Ver Mensaje
seria una solución usar div en lugar de <li>, pero seria eso correcto?
No. Lo correcto es que los menús se hagan con listas y en las listas los elementos <li></li> deben ir, obligatoriamente dentro de elementos <ul></ul> tal y como te lo ha indicado masterojitos.

Saludos.


Etiquetas: lista
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 20:51.