La solución que me propones me sirve; aunque en un primer momento pensé que iba a tener problemas si el usuario cambiase el zoom del texto, pero poniendo las unidades en em queda bastante aceptable el resultado.
Un saludo y muchas gracias. On 3/22/07, Juan Jorge Muñoz Herrero <[EMAIL PROTECTED]> wrote: > > Lo siento pero el CSS es así, lo elementos flotados a la izquierda van > ocupando posiciones, y pasan abajo en el momento que tienen espacio, por > lo > cual detrás del elemento que ocupe más. La solución pasa por que le des un > display block y un height específico a "ul.thumbs li a", lo cual además, > creo que quedaría más bonito a nivel visual... > > > El día 22/03/07, Daniel <[EMAIL PROTECTED]> escribió: > > > > Hola a todos. > > > > Estoy haciendo una página web en la cual se muestran una lista de > imágenes > > y > > tengo un problemas con el CSS. Yo quiero que la lista de imágenes sea > > horizontal y que muestre un número variable de imágenes por línea según > el > > ancho del navegador (Eso ya está hecho). > > > > El problema surge porque las imágenes tienen texto debajo de ellas y ese > > texto puede ocupar una o varias líneas y cuando hay algún texto con > varias > > líneas la fila de imágenes que está debajo no empieza en el borde > > izquierdo > > sino a continuación de la imagen que tiene ese texto. > > > > A continuación os pongo el archivo en cuestión por si no quedó > > suficientemente claro el problema. > > > > <?xml version="1.0" encoding="iso-8859-1"?> > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " > > http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> > > <html> > > <head> > > <title>Test page</title> > > <style type="text/css"> > > > > body { > > background-color:black; > > } > > > > ul.thumbs > > { > > background-color:#090900; > > > > list-style-type:none; > > > > position:absolute; > > left:5%; > > width:90%; > > > > padding:0; > > margin:0; > > > > border:3px solid #440000; > > } > > > > ul.thumbs li { > > display:inline; > > } > > > > ul.thumbs li a { > > font-size:small; > > font-style:italic; > > text-align:center; > > text-decoration:none; > > > > color:#AA8822; > > background-color:#222222; > > > > float:left; > > > > width:114px; > > padding:8px 8px 2px 8px; > > margin:16px; > > > > border:2px solid #000044; > > } > > > > ul.thumbs li a:hover { > > color:#BB9933; > > background-color:#333333; > > > > border:2px solid #000088; > > } > > > > ul.thumbs li a:active { > > color:yellow; > > background-color:gray; > > > > border:2px solid blue; > > } > > > > ul.thumbs li a img { > > color:#668822; > > > > width:108px; > > height:152px; > > > > border-width:2px; > > margin-bottom:0; > > } > > > > ul.thumbs li a:hover img { > > color:#779933; > > } > > > > ul.thumbs li a:active img { > > color:lime; > > } > > > > </style> > > </head> > > > > <body> > > <ul class="thumbs"> > > <li><a href="#"><img src=" > > http://www.w3.org/Style/CSS/Buttons/cssom"; > > alt="1"/><br/>test1</a></li> > > <li><a href="#"><img src=" > > http://www.w3.org/Style/CSS/Buttons/cssom"; > > alt="2"/><br/>test2 test2 test2 test2 test2 test2 test2 test2</a></li> > > <li><a href="#"><img src=" > > http://www.w3.org/Style/CSS/Buttons/cssom"; > > alt="4"/><br/>test3</a></li> > > <li><a href="#"><img src=" > > http://www.w3.org/Style/CSS/Buttons/cssom"; > > alt="5"/><br/>test4</a></li> > > <li><a href="#"><img src=" > > http://www.w3.org/Style/CSS/Buttons/cssom"; > > alt="6"/><br/>test5</a></li> > > <li><a href="#"><img src=" > > http://www.w3.org/Style/CSS/Buttons/cssom"; > > alt="7"/><br/>test6</a></li> > > <li><a href="#"><img src=" > > http://www.w3.org/Style/CSS/Buttons/cssom"; > > alt="8"/><br/>test7</a></li> > > <li><a href="#"><img src=" > > http://www.w3.org/Style/CSS/Buttons/cssom"; > > alt="9"/><br/>test8</a></li> > > <li><a href="#"><img src=" > > http://www.w3.org/Style/CSS/Buttons/cssom"; > > alt="10"/><br/>test9</a></li> > > </ul> > > </body> > > > > </html> > > > > Saludos. > > Dani > > _______________________________________________ > > Lista de distribución Ovillo > > Para escribir a la lista, envia un correo a [email protected] > > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > > http://lists.ovillo.org/mailman/listinfo/ovillo > > > > > > -- > Juan J. Muñoz > http://www.taarq.com > _______________________________________________ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a [email protected] > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a [email protected] Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
