Lo que tú necesitas es display:inline-block; pero firefox no lo soporta
(aunque tiene -moz-inline-block) e ie tiene problemas con su interpretación.
De todas formas a lo mejor te sirve.
El día 5/11/07, Gael <[EMAIL PROTECTED]> escribió:
>
> 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
>
--
We don't need no education - Pink Floyd
_______________________________________________
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
