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
titleTest 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 #44;
}
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:#22;
float:left;
width:114px;
padding:8px 8px 2px 8px;
margin:16px;
border:2px solid #44;
}
ul.thumbs li a:hover {
color:#BB9933;
background-color:#33;
border:2px solid #88;
}
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
lia href=#img src=
http://www.w3.org/Style/CSS/Buttons/cssom;
alt=1/br/test1/a/li
lia href=#img src=
http://www.w3.org/Style/CSS/Buttons/cssom;
alt=2/br/test2 test2 test2 test2 test2 test2 test2 test2/a/li
lia href=#img src=
http://www.w3.org/Style/CSS/Buttons/cssom;
alt=4/br/test3/a/li
lia href=#img src=
http://www.w3.org/Style/CSS/Buttons/cssom;
alt=5/br/test4/a/li
lia href=#img src=
http://www.w3.org/Style/CSS/Buttons/cssom;
alt=6/br/test5/a/li
lia href=#img src=
http://www.w3.org/Style/CSS/Buttons/cssom;
alt=7/br/test6/a/li
lia href=#img src=
http://www.w3.org/Style/CSS/Buttons/cssom;
alt=8/br/test7/a/li
lia href=#img src=
http://www.w3.org/Style/CSS/Buttons/cssom;
alt=9/br/test8/a/li
lia 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 Ovillo@lists.ovillo.org
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 Ovillo@lists.ovillo.org
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 Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
