[Ovillo] Como estructurar unos thumbnails con texto variable

[Martin Etxauri]

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