Re: [Ovillo] Lista horizontal centrada de imágenes c on pie
No se si te vale así.
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
liimg src=foto1.jpg width=150 height=100 alt=Foto 1 /
spanPiede foto 1/span
/li
liimg src=foto2.jpg width=150 height=100 alt=Foto 2 /
spanPie
de foto 2/span/li
liimg src=foto3.jpg width=150 height=100 alt=Foto 3 /
spanPie
de foto 3/span/li
/ul
Espero que te sirva
- Mensaje original
De: Gael [EMAIL PROTECTED]
Para: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Enviado: lunes, 5 de noviembre, 2007 16:18:17
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
liimg src=foto1.jpg width=150 height=100 alt=Foto 1 /Pie
de foto 1/li
liimg src=foto2.jpg width=150 height=100 alt=Foto 2 /Pie
de foto 2/li
liimg 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
__
Pregunta, Responde, Descubre.
Comparte tus consejos y opiniones con los usuarios de Yahoo! Respuestas
http://es.answers.yahoo.com/info/welcome
___
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
Re: [Ovillo] Lista horizontal centrada de imágenes c on pie
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
liimg src=foto1.jpg width=150 height=100 alt=Foto 1 /Pie
de foto 1/li
liimg src=foto2.jpg width=150 height=100 alt=Foto 2 /Pie
de foto 2/li
liimg 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
___
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
Re: [Ovillo] Lista horizontal centrada de imágenes c on pie
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
liimg src=foto1.jpg width=150 height=100 alt=Foto 1 /
spanPiede foto 1/span
/li
liimg src=foto1.jpg width=150 height=100 alt=Foto 1 /
spanPiede foto 1/span
/li
liimg src=foto2.jpg width=150 height=100 alt=Foto 2 /
spanPie
de foto 2/span/li
liimg src=foto3.jpg width=150 height=100 alt=Foto 3 /
spanPie
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
liimg src=foto1.jpg width=150 height=100 alt=Foto 1 /Pie
de foto 1/li
liimg src=foto2.jpg width=150 height=100 alt=Foto 2 /Pie
de foto 2/li
liimg 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
Re: [Ovillo] Lista horizontal centrada de imágenes c on pie
El lunes, 5 nov 2007 a las 16:18, Gael
escribió:
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?
Veamos, antes de seguir hay que entender el inline y el block.
El inline ocupa el espacio que necesite pero pierdes margenes superior
e inferior y otras cosas.
El block ocupa todo a no ser que le digas lo contrario.
En tu caso creo que poniendo display:block con with y floats tendrías el
efecto que deseas.
--
/\/
/ \ / \ /
/\/ e t \/ i c i o u s
___
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
