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
