Gracias por la ayuda a ambos.
Mariano, tu propuesta no me termina de ir bien. Te comento: las imágenes
no siempre tendrán la misma altura, con lo que la posición absoluta del
span no va bien. Uno, que es caprichoso, ya ves.
Javier, no consigo, poniendo un br, que la lista sea horizontal o que me
quede centrado horizontalmente, cada foto con su pie. Por eso descarté
también este método.
Igual lo intento con una lista de definición en cada li, con la imagen
en el dt y el pie en el dd. Pero me parece algo recargado para hacer una
simple lista de fotos con un pie. Vamos, que opino que es matar moscas a
cañonazos.
Así que si a alguien se le ocurren más posibilidades, le estaré
agradecido. :-)
Un saludo!
Mariano Neyra escribió:
> No se si así te vale.
>
> ul { width: 900px; text-align: center; border: 1px solid green }
> li { display: inline; position:relative; margin: 0 auto; border: 1px
> solid red}
> li span { position: absolute; top: 100px; left: 0; }
> ------------------------------------------------------------------------
> <ul>
> <li><img src="foto1.jpg" width="150" height="100" alt="Foto 1" />
> <span>Piede foto 1</span>
> </li>
> <li><img src="foto1.jpg" width="150" height="100" alt="Foto 1" />
> <span>Piede foto 1</span>
> </li>
> <li><img src="foto2.jpg" width="150" height="100" alt="Foto 2" />
>
> <span>Pie
> de foto 2</span></li>
> <li><img src="foto3.jpg" width="150" height="100" alt="Foto 3" />
>
> <span>Pie
> de foto 3</span></li>
> </ul>
>
> Espero que si.
>
> Saludos, Mariano
>
Javier Trejo escribió:
> La opción del <br /> y un text-align: center no da el efecto que vos querés?
>
>
> Quizás yo te interpreté mal.
>
> Saludos,
>
>
> Javier Trejo
> Diseñador Web
>
> Comunicación Interactiva
> Cel.: +54 (11) 15 6485-7734
> Nextel: 54*147*4233
> Mail: [EMAIL PROTECTED]
> MSN: [EMAIL PROTECTED]
> Skype: javier.trejo
>
>
>
>
> -----Mensaje original-----
> De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
> En nombre de Gael
> Enviado el: lunes, 05 de noviembre de 2007 12:18
> Para: Ovillo, la lista de CSS en castellano
> Asunto: [Ovillo] Lista horizontal centrada de imágenes con pie
>
> Hola!
>
> Como siempre, recurro a la lista después de estarme rompiendo la cabeza
> durante horas con una maldita lista. :-)
>
> Lo que quiero conseguir es una lista horizontal centrada, la típica con:
>
> ul { text-align: center; margin: 0 auto; }
> li { display: inline; }
>
> Pero el contenido de los elementos son imágenes con un pie de foto. Algo
> así:
>
> <ul>
> <li><img src="foto1.jpg" width="150" height="100" alt="Foto 1" />Pie
> de foto 1</li>
> <li><img src="foto2.jpg" width="150" height="100" alt="Foto 2" />Pie
> de foto 2</li>
> <li><img src="foto3.jpg" width="150" height="100" alt="Foto 3" />Pie
> de foto 3</li>
> </ul>
>
>
> De manera que, para que quede el pie bajo la foto, debería poner
>
> img { display: block; }
>
> con lo que el display inline de los li se va a hacer puñetas y la lista
> queda vertical.
>
> He probado con float: left en los li (pero no quedan centrados
> horizontalmente), con <p> en los pies de foto (pero vuelve a quedar
> vertical), con <br /> entre la foto y el pie... Probaría con listas de
> definición (dt para la foto y dd para el pie) pero no todas las fotos
> tendrán pie y no me convence la idea de dejar dd vacíos.
>
> Alguien sabe cómo conseguirlo? Cómo centrar horizontalmente una lista
> con elementos de bloque o cómo conseguir el mismo efecto con otro marcado?
>
> Muchas gracias!
>
>
>
> Gael
>
_______________________________________________
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
