Aupa Un par de notas a posteriori
Lo primero que la compatibilidad crossbrowser del display: inline- block; la he sacado de un post [1] de foohack, lo tenía que haber puesto directamente. Luego lo he estado mirando y esta solución está ya bastante extendida aquí y allí. Y lo segundo he estado mirando para entender mejor lo del haslayout para IE y ya he visto que es para que: Le aplicamos el zoom a <li> para dotarlo de layout: <li> por si solo no tendría layout, pero al aplicarle un zoom, aunque sea 1 para dejarlo igual, le dotamos de layout, cosa que solo concierne al IE pues el tema del layout es propietario de IE. Al dotarlo de layout es, a groso modo, como si lo convirtiéramos en "block" y al aplicarle display: inline; resulta que los elementos de bloque en ie con display: inline; se comportan como display: inline- block, lo cual nos viene de perlas. (Para quien no esté familiarizado con el asterisco maravilloso que ponemos por delante de display: inline;, –a estas alturas dudo que quede gente– eso lo hace solo visible para IE de modo que los demás ignoran lo que pongamos tras el asterisco). Bueno, la explicación del layout es como yo lo he entendido y creo que es correcta, si alguien difiere que me corrija y así no voy dando falsas explicaciones por ahí y confundiendo a la gente :) espero que esto ayude a entender mejor lo que se está haciendo, siempre es bueno entender :) [1] http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ El 15/07/2009, a las 17:14, Martin Etxauri escribió: > 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
