Hola a todos
Creo que he conseguido algo decente para lo que comentaba de la página
de thumbnails, cada uno con texto variable y que sea fluido, vamos que
a mayor tamaño de ventana mas entren por fila. El problema era que si
los flotamos y uno tiene mas texto que otro, los que mas texto tienen
toman mas altura y se nos estropea el asunto porque los flotados se
quedan "atascados" cuando se encuentran un con mas altura.
Agradeceré comentarios y correcciones, que si dejamos esto apañado va
a ser bonito :)
Os dejo el link de el resultado [1] que está con algunos apaños para
ver las posibilidades de maqueo.
Al grano:
Lo primero lo he convertido todo en una lista que creo que
semánticamente es mas apropiado.
Para últimas versiones de navegadores la solución era sencilla:
li{
width: 150px;
display: inline-block
vertical-align: top
}
Limitamos el ancho de los elementos para que todos tengan el mismo
ancho (seguramente el de la imagen mas algún padding), lo que llevará
a que los textos largos pasen a varias lineas y se provoque la
diferencia de altura. Con el display: inline-block, conseguimos, por
un lado que al ser block nos acepte la anchura del elemento, pero por
otro que se comporten como si estuvieran flotados, que se vayan
apilando a la izquierda a medida que les deje el ancho de ventana,
pero respetando la altura, ya que no es que estén flotados, si no que
son elementos inline y todos tienen origen en la base de la linea. Con
el vertical-aling: top; conseguimos que en vez de alinearse en la
base, lo cual descuadra y deja las imágenes a diferentes alturas
(según cuanto texto tengan debajo), se alinea todo arriba y las
imágenes quedan bien alineaditas.
Esto funciona para IE8, FF3, Opera y safari por lo menos.
Tenemos el problema de que no solo IE6 y 7 no aceptan el display:
inline-bock si no que versiones anteriores a FF3 tampoco.
Para hacerlo crossbrowser el css y el código se va a enguarrar un
poquillo, bueno.
Para IE 6 y 7 le añadimos esto:
zoom:1;
*display:inline;
tiene que ver con el hasloyout, no acabo de entender muy bien como
rula, pero rula.
Y para que versiones anteriores de FF lo pillen tenemos que añadir esto:
display:-moz-inline-stack;
mejor meterlo por encima del display: inline-block para que FF3 y
posteriores se queden con display: inline-bock;
con lo que quedaría así:
li{
width: 150px;
display:-moz-inline-stack; /*para FF anterior al 3*/
display: inline-block
zoom:1; /*para IE anterior a 8*/
*display:inline; /*para IE anterior a 8*/
vertical-align: top
}
Al utilizar el display:-moz-inline-stack; FF2 tiene un comportamiento
un poco raro que no logro entender, igual me podéis ayudar aquí, y es
que si tenemos:
<li><img src="imagen.jpg" width="150" height="200" /><br /> pie de
fotooo</li>
y aplicamos display:-moz-inline-stack; FF2 coge la imagen y la pone
como imagen de fondo del <li> y el texto queda por encima de la
imagen. Para evitar esto no he visto otra salida que poner un span
recogiendo el contenido de <li> y queda así:
<li><span><img src="imagen.jpg" width="150" height="200" /><br /> pie
de fotooo</span></li>
semanticamente nos sobra el span pero bueno, es lo que necesitamos
para que FF2 lo pille bien.
si lo que tenemos dentro de <li>, recogiendo imagen y texto, es un
<a>, porque normalmente los thumbnails son para clickar, pues ya está,
no problemo, no necesitamos el span extra.
A ver que os parece todo esto, creo que es una solución bastante digna
al tema, creo que hacía falta y, yo por lo menos, no he encontrado
nada por aquí y por allí.
Saludos a todos.
[1] http://www.eragin.com/txo/x/xxx2.html
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
