Me temo que lo que pides es poco menos que un imposible, al menos con medios
estandar
(sin js o chapuceo en las css) Ten en cuenta que lo que quieres es aplicar un
tamaño a un
elemento (la descripción textual) basándote en el tamaño desconocido de una
imagen...
Lo sencillo sería que dependiendo del tamaño de la ventana la descripción se
estire lo que
necesite o pueda eso sí centrada con respecto a la imagen. Y eso es tan simple
como esto:
CSS:
div.contenedorFotoPopNoticia {
text-align: center;
}
div.contenedorFotoPopNoticia img{
border:1px solid;
}
.pie {
border:1px solid;
background-color:#d3d3d3;
}
HTML:
<div class="contenedorFotoPopNoticia">
<img src="imagen.gif" alt="Imagen noticia" /><br>
<span class="pie">Mesa de autoridades (Foto: Nacho Romero)</span>
</div>
-----Mensaje original-----
De: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] En nombre de Oscar martinez
novoa
Enviado el: miércoles 7 de marzo de 2007 16:56
Para: Ovillo, la lista de CSS en castellano
Asunto: Re: [Ovillo] [OVILLO] - Centrar imagen con su pie de foto... un lio
Es eso pero centrado en el medio y que poniendo cualquier foto sin decir yo su
ancho, el ancho de la casilla de abajo que es su pie de foto, sea del mismo
ancho que la foto y no se pase de ese ancho.
eso es...
un rollo... ¿verdad?
Muchas gracias por vuestra paciencia
:)
El día 7/03/07, Alvarez Laurnaga, Jose Antonio <[EMAIL PROTECTED]>
escribió:
>
> A ver, Oscar, todavía no entiendo lo que quieres hacer.
>
> ¿Se trata de colocar una imagen con un borde y debajo un texto
> explicativo también con borde y color de fondo. Todo ello centrado
> horizontalmente en la página?
>
> ¿Es eso todo o me dejo algo?
>
>
> -----Mensaje original-----
> De: [EMAIL PROTECTED] [mailto:
> [EMAIL PROTECTED] En nombre de Oscar martinez novoa
> Enviado el: miércoles 7 de marzo de 2007 16:32
> Para: Ovillo, la lista de CSS en castellano
> Asunto: Re: [Ovillo] [OVILLO] - Centrar imagen con su pie de foto...
> un lio
>
>
> Hola gente!,
>
>
> Alguien se le ocurre como arreglar esto?
>
>
> Gracias
> ;)
>
>
> El día 7/03/07, Oscar martinez novoa <[EMAIL PROTECTED]> escribió:
> >
> > Cachis....
> >
> > no sale bien
> >
> > coge como ancho toda la ventana popup, no el ancho de la foto y el
> > borde sale en el conjunto de foto mas pie y en el pie no sale su
> > borde, da igual que se ponga width con auto que sin el... seguire
> > "jugando" con este codigo tuyo a ver si consigo, pero lo dicho, no
> > sale bien.
> >
> > De todos modos muuuchisimas gracias por la ayuda
> > :)
> >
> > ciao
> >
> > El día 7/03/07, Noemÿffffed Garcÿffffeda Lorca <[EMAIL PROTECTED]>
> > escribió:
> > >
> > > A mi no me llegó el pantallazo adjuntado ;-P
> > >
> > > Prueba esto, a ver si te sirve.
> > >
> > > html:
> > > <div class="contenedorFotoPopNoticia">
> > > <img src="../imagenes/noticias/foto1.jpg" alt="Imagen noticia" />
> > > <div class="pie">Mesa de autoridades (Foto: Nacho
> > > Romero)</div> </div>
> > >
> > > CSS:
> > > div.contenedorFotoPopNoticia{
> > > width: auto; /*prueba con él y sin él, porque como no lo he
> > > podido testear no sé si hace falta*/
> > > text-align: center;
> > > border: 1px solid;
> > > }
> > >
> > > div.contenedorFotoPopNoticia img{
> > > border: 0px;
> > > }
> > >
> > > div.pie {
> > > text-align: center;
> > > border: 1px 0px 0px 0px solid;
> > > background-color: #d3d3d3;
> > > width: 100%;
> > > clear: both;
> > > }
> > >
> > >
> > >
> > > ----- Mensaje original ----
> > > De: Oscar martinez novoa <[EMAIL PROTECTED]>
> > > Para: "Ovillo, la lista de CSS en castellano" <
> > > ovillo@lists.ovillo.org>
> > > Enviado: miércoles, 7 de marzo, 2007 9:39:03
> > > Asunto: Re: [Ovillo] [OVILLO] - Centrar imagen con su pie de
> > > foto...
> un
> > > lio
> > >
> > >
> > > Buenas,
> > >
> > > he probado esto y no me funciona, me lo coloca mal y me coge el
> > > ancho del texto que metes no el ancho de la imagen... tengo
> > > puesto:
> > > html:
> > > <div class="contenedorFotoPopNoticia">
> > > <span class="contenedor"><img
> > > src="../imagenes/noticias/foto1.jpg"
> > > alt="Imagen noticia" /></span>
> > > <span class="pie">Mesa de autoridades (Foto: Nacho Romero)</span>
> > > </div>
> > >
> > > CSS:
> > > div.contenedorFotoPopNoticia{
> > > text-align: center;
> > > }
> > > .contenedor {
> > > text-align:center;
> > > position:relative;
> > > }
> > > .contenedor img{
> > > text-align:right;
> > > border:1px solid;
> > > margin-bottom:15px;
> > > }
> > > .pie {
> > > text-align:center;
> > > border:1px solid;
> > > background-color:#d3d3d3;
> > > width:100%;
> > > position: relative;
> > > top:20px;
> > > }
> > >
> > > He adjuntado un pantallo para que veais el resultado de esto...
> > >
> > > Muchas gracias por todo
> > > :)
> > >
> > >
> > > El día 6/03/07, Leandro Asrilevich <[EMAIL PROTECTED]> escribió:
> > > >
> > > > no estoy seguro si entendi lo que quieres hacer, pero sin
> > > > haberlo testeado, supongo que este codigo te servira... (el pie
> > > > se va a acomodar al
> > > ancho de
> > > > la imagen.. va en realidad a un span que contiene adentro la
> > > > imagen y
> > > el
> > > > pie)
> > > >
> > > > <style>
> > > > body {
> > > > text-align:center;
> > > > }
> > > > .contenedor {
> > > > text-align:center;
> > > > position:relative;
> > > > }
> > > > .contenedor img{
> > > > border:1px solid;
> > > > margin-bottom:15px;
> > > > }
> > > > .pie {
> > > > border:1px solid;
> > > > background-color:#d3d3d3;
> > > > width:100%;
> > > > position:absolute;
> > > > }
> > > > </style>
> > > >
> > > > <body>
> > > > <span class="contenedor">
> > > > <img src="iwannagohome1[1].jpg" width="200" height="538" alt=""
> > > > /> <span class="pie">pepe epepep pepep pepepe pepep</span>
> > > > </div> </body>
> > > >
> > > >
> > > >
> > > > On 3/6/07, Oscar martinez novoa <[EMAIL PROTECTED]> wrote:
> > > > >
> > > > > Hola gente,
> > > > >
> > > > > como van?
> > > > >
> > > > > Bueno la cosa es que quiero centrar una imagen dentro de una
> > > > > pagina
> > > y
> > > > > abajo
> > > > > quiero poner su pie de foto, pero claro cuando me pongo a
> > > > > poner un
> > > borde
> > > > a
> > > > > la imagen y un fondo con otro borde al pie de la imagen, veo
> > > > > que el
> > > > ancho
> > > > > acupa toda la pagina.
> > > > > Se que si pongo el ancho de la foto pues se arreglaria pero
> > > > > claro,
> > > la
> > > > foto
> > > > > no siempre sera con el mismo ancho ni alto, con lo que haga me
> > > > > tiene
> > > que
> > > > > valer para todas, en puesto tambien en ancho: auto y nada...
> > > > >
> > > > > Es posible hacer esto?
> > > > >
> > > > > Muuchas gracias gente
> > > > >
> > > > > ciao
> > > > > _______________________________________________
> > > > > 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
> > > > >
> > > >
> > > >
> > > >
> > > > --
> > > > ______________________________________
> > > > | |
> > > > | Leandro Asrilevich |
> > > > | Web & Multimedia Developer |
> > > > | Movil: +54 (3442) 15-454793 |
> > > > | Tel: +54 (11) 4307-3085 |
> > > > | |
> > > > | Web: www.beastx.com.ar |
> > > > | MSN: [EMAIL PROTECTED] |
> > > > | Skype User: leandro.asrilevich |
> > > > | |
> > > > | Defensa 1805 PB "E" |
> > > > | Capital Federal - Buenos Aires - Argentina |
> > > > |_____________________________________|
> > > > _______________________________________________
> > > > 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
> > >
> > >
> > >
> > >
> > >
> > >
> > > ______________________________________________
> > > LLama Gratis a cualquier PC del Mundo.
> > > Llamadas a fijos y móviles desde 1 céntimo por minuto.
> > > http://es.voice.yahoo.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
> _______________________________________________
> 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
_______________________________________________
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
