Últimamente he tenido MUCHÍSIMO trabajo (ahí la falta de tiempo para actualizar el blog :S una disculpa). En uno de los proyectos que tenía me encontré con un problema que de principio no debería estar ahí. Había un listado de características (una lista desordenada en HTML) que se repartía en 3 columnas. Si la lista tenía 3 columnas y 9 elementos, los primeros tres elementos estaban en la primer columna; del 4 al 6 en la segunda columna y del 7 al 9 en la tercera, de este modo:
Muy bonito ¿cierto? Pero codificarlo no es tan sencillo. El problema que tenía es que había diferentes listas con diferentes números de elementos y no quería extender mucho el CSS para manejar x número de listas; necesitaba crear un medio para poder manejar múltiples listas con diferentes números de elementos pero que todas siguieran más o menos el mismo estandar, las mismas clases.
El buen Dynamo recomendó crear 3 listas diferentes y simplemente flotarlas entre sí. Esto no me pareció tan buena idea, pues no hay una separación lógica entre las listas; por lo tanto tampoco hay razón para separarlas en diferentes listas cuando son parte de una misma lista (ordenada o no). También estaba el pequeño problema de que, si de listas ordenadas se trataba, el crear diferentes listas requería el uso del atributo start=""; lo que significaba manejar la presentacion de la lista en columnas desde el HTML lo que, como sabemos, es pecado en nuestro mundo de semántica y estandares web. También está el detalle de que el atributo start="" no es XHTML Strict válido.¡Mal!
Para solucionarlo, se me ocurrió primero flotar los <li> a la izquierda con float: left; pero esto no funcionó muy bien que digamos; pues el orden se alteraba y quedaba así:
Entonces se me ocurrió usar posicionamiento absoluto. Es una técnica algo... extraña, pero funciona y es fácil de aplicar a diferentes listas con diferentes números de elementos. Así que empecemos.
Excelente tutorial, había visto uno similar en ALA , pero nada mejor que tenerlo en tu idioma y con esta buena explicación.
Muchas gracias ñ_ñ
Hola, como estas.
Estoy buscando a alguien que me instale en mi servidor los siguientes modulos:
FFmpeg
FFmpeg-PHP
Mplayer + Mencoder
flv2tool
Libogg + Libvorbis
LAME MP3 Encoder
Me podrias ayudar?, conoces a alquien?
Te agradeceria que me respondieras a mi email.
Gracias.
Gracias por el tutorial, esta interesante. Sin embargo no me quedo claro porque cada elemento tiene su propia clase, en lugar de asignar clases directamente por columna.
ej:
uno
dos
tres
cuatro
cinco
seis
siete
ocho
nueve
-->
Gracias por el tutorial, esta muy interesante (y muy útil). Sin embargo no me quedo claro porque cada elemento tiene su propia clase, en lugar de asignar clases directamente por columna.
Ejemplo:
Gracias.
Muy bueno
proximamente te agrego a mi blogroll !
Saludos!
Buenisimo tutorial! ... pero yo no me conformo, debe de haber una manera de hacer listas más flexibles X| ... andare haciendo pruebas, si encuentro algo, aviso.
Por cierto, que mal que ya no vivas en Guadalajara, te invitaría unas copas
... saludos paisano!!!!!
Hola, este tutorial está genial.
Yo sólo tengo un problema: delante de cada linea de la lista me sale un numero y lo quiero quitar.
Ejemplo:
1. Hola 3. Hasta Luego 4. Bye Bye
2. Adios
¿Alguien sabe como?
Saludos
Me contesto al instante..jaja..
Sólo tenía que poner
list-style: none;
^_^
Dany: También te recomiendo que en lugar de <ol> uses <ul>. Ya que, si no quieres números muy probablemente se trate de una lista sin ningún orden en específico.
Gracias por el dato.
Tanto tiempo dedicado a hacer blogs, webs... y todavía me queda mucho por aprender.
No tiene mucha gracia hacerlo asi, es demasiado fijo.
Poco dinamico.