Re: Re[2]: [Ovillo] Imagen sobrepasa el borde de su contenedor
perdón, se me fue la oya, las imágenes tendrán un alto de 80px, mas 5px que quiero darle de padding___ 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://ovillo.org/mailman/listinfo/ovillo
Re: Re[2]: [Ovillo] Imagen sobrepasa el borde de su contenedor
Hola otra vez, gracias a todos.
Javier, tu propuesta funciona lógicamente, pero se pierde el float de la
imagen, de forma que el texto queda alineado en la parte inferior de la imagen,
y por tanto empuja el border-bottom hacia abajo. Pero ese espacio en blanco a
la derecha de la imagen no me sirve.
Bueno, he encontrado por ahí un hack que me funciona perfecto:
Teniendo en cuenta que las imágenes tendrán un alto de 85px...
div#derecha p{
border-bottom: 1px solid #C2C2C2;
padding-bottom: 5px;
min-height: 85px;
height: auto !important;
height: 85px;
}
div#derecha p img{
float: left;
margin-right: 6px;
margin-bottom: 4px;
border:1px solid #99;
}
El link del truquillo: http://wordpress.org/support/topic/23554
Muchas gracias otra vez por vuestra atención
- Original Message -
From: [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano
Sent: Wednesday, March 08, 2006 9:48 AM
Subject: Re: Re[2]: [Ovillo] Imagen sobrepasa el borde de su contenedor
Rectifico lo que puse antes:
Seguramente tus imágenes van a llevar enlace aunque todavía no se lo has
puessto. Cuando esto ocurra puedes arreglar el error fácilmente.
Esto lo probé con dos bloques como el tuyo en Explorer y Firefox y funciona
ESTILOS:
div#derecha p{
border-bottom: 1px solid #C2C2C2;
padding-bottom: 5px;
display: block;
clear: both;
}
div#derecha p img a{
float: left;/*intento de que no sobrepase el borde*/
margin-right: 6px;
margin-bottom: 4px;
border:1px solid #99;
display: block;
}
HTML:
Homenaje a Leandro Perdono en el décimo aniversario de su
fallecimiento
Homenaje a Leandro Perdono en el décimo aniversario de su fallecimiento.
Texto del destaque
SUERTE!!
Maikel Naigt escribió:
> Debes de activarle la propiedad hasLayout a IE [1] asignando algunas de
> estas propiedades al
[2]. Algunas validan y otras no, aunque pueden
> llegar a interferir en la maqueta, la elección es tuya.
>
> [1] http://www.satzansatz.de/cssd/onhavinglayout.html
> [2]
>
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp
>
> Un saludo, David Merino Ogando.
>
>
> On 3/8/06, xleon wrote:
> >
> > pfff, la verdad es que estoy muy perdido en el tema. Era virgen en esto
> > hasta ahora...
> > a ver, con ejemplos es mas fácil, porque creo que me explico como el culo.
> >
> >
> >
http://dns.solucionet.com:8085/proyectos/cabildodelanzarote/posicionamiento3.asp
> >
> > en la columna derecha podeis ver los
--
___
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://ovillo.org/mailman/listinfo/ovillo
--
No virus found in this incoming message.
Checked by AVG Free Edition.
Version: 7.1.375 / Virus Database: 268.2.0/276 - Release Date: 07/03/2006
___
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://ovillo.org/mailman/listinfo/ovillo
Re: Re[2]: [Ovillo] Imagen sobrepasa el borde de su contenedor
Rectifico lo que puse antes:
Seguramente tus imágenes van a llevar enlace aunque todavía no se lo has
puessto. Cuando esto ocurra puedes arreglar el error fácilmente.
Esto lo probé con dos bloques como el tuyo en Explorer y Firefox y funciona
ESTILOS:
div#derecha p{
border-bottom: 1px solid #C2C2C2;
padding-bottom: 5px;
display: block;
clear: both;
}
div#derecha p img a{
float: left;/*intento de que no sobrepase el borde*/
margin-right: 6px;
margin-bottom: 4px;
border:1px solid #99;
display: block;
}
HTML:
Homenaje a Leandro Perdono en el décimo aniversario de su fallecimiento
Homenaje a Leandro Perdono en el décimo aniversario de su fallecimiento.
Texto del destaque
SUERTE!!
Maikel Naigt escribió:
> Debes de activarle la propiedad hasLayout a IE [1] asignando algunas de
> estas propiedades al
[2]. Algunas validan y otras no, aunque pueden
> llegar a interferir en la maqueta, la elección es tuya.
>
> [1] http://www.satzansatz.de/cssd/onhavinglayout.html
> [2]
> http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp
>
> Un saludo, David Merino Ogando.
>
>
> On 3/8/06, xleon wrote:
> >
> > pfff, la verdad es que estoy muy perdido en el tema. Era virgen en esto
> > hasta ahora...
> > a ver, con ejemplos es mas fácil, porque creo que me explico como el culo.
> >
> >
> > http://dns.solucionet.com:8085/proyectos/cabildodelanzarote/posicionamiento3.asp
> >
> > en la columna derecha podeis ver los
___
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://ovillo.org/mailman/listinfo/ovillo
Re: Re[2]: [Ovillo] Imagen sobrepasa el borde de su contenedor
Debes de activarle la propiedad hasLayout a IE [1] asignando algunas de
estas propiedades al [2]. Algunas validan y otras no, aunque pueden
llegar a interferir en la maqueta, la elección es tuya.
[1] http://www.satzansatz.de/cssd/onhavinglayout.html
[2]
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp
Un saludo, David Merino Ogando.
On 3/8/06, xleon <[EMAIL PROTECTED]> wrote:
>
> pfff, la verdad es que estoy muy perdido en el tema. Era virgen en esto
> hasta ahora...
> a ver, con ejemplos es mas fácil, porque creo que me explico como el culo.
>
>
> http://dns.solucionet.com:8085/proyectos/cabildodelanzarote/posicionamiento3.asp
>
> en la columna derecha podeis ver los texto
> Los párrafos tienen un border-bottom. Lo único que pretendo es que ese
> borde no invada en ningún momento el espacio de la imagen, o mejor dicho, al
> contrario, que la imagen no sobrepase el borde.
>
> ¿me explico?
>
> este es el código de la columna, que estará mal seguro:
>
> div#derecha p{
> display: block;
> border-bottom: 1px solid #C2C2C2;
> padding-bottom: 5px;
> }
> div#derecha p img{
> float: left; /*para que la imagen se quede a la izquierda*/
> clear: both;/*intento de que no sobrepase el borde*/
> margin-right: 6px;
> margin-bottom: 4px;
> border:1px solid #99;
> }
> ___
> 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://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://ovillo.org/mailman/listinfo/ovillo
Re: Re[2]: [Ovillo] Imagen sobrepasa el borde de su contenedor
No lo he podido probar, pero si pones el siguiente códigodiv#derecha p{
display: block;
border-bottom: 1px solid #C2C2C2;
padding-bottom: 5px;
}
div#derecha p img{
display:block; /* el clear:left fuera */ float: left; /*para que la imagen se
quede a la izquierda*/
margin-right: 6px;
margin-bottom: 4px;
border:1px solid #99;
}
A ver si hay suerte
xleon escribió:
> pfff, la verdad es que estoy muy perdido en el tema. Era virgen en esto hasta
> ahora...
> a ver, con ejemplos es mas fácil, porque creo que me explico como el culo.
>
> http://dns.solucionet.com:8085/proyectos/cabildodelanzarote/posicionamiento3.asp
>
> en la columna derecha podeis ver los
___
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://ovillo.org/mailman/listinfo/ovillo
Re: Re[2]: [Ovillo] Imagen sobrepasa el borde de su contenedor
pfff, la verdad es que estoy muy perdido en el tema. Era virgen en esto hasta
ahora...
a ver, con ejemplos es mas fácil, porque creo que me explico como el culo.
http://dns.solucionet.com:8085/proyectos/cabildodelanzarote/posicionamiento3.asp
en la columna derecha podeis ver los texto
Los párrafos tienen un border-bottom. Lo único que pretendo es que ese borde no
invada en ningún momento el espacio de la imagen, o mejor dicho, al contrario,
que la imagen no sobrepase el borde.
¿me explico?
este es el código de la columna, que estará mal seguro:
div#derecha p{
display: block;
border-bottom: 1px solid #C2C2C2;
padding-bottom: 5px;
}
div#derecha p img{
float: left; /*para que la imagen se quede a la izquierda*/
clear: both;/*intento de que no sobrepase el borde*/
margin-right: 6px;
margin-bottom: 4px;
border:1px solid #99;
}
___
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://ovillo.org/mailman/listinfo/ovillo
Re[2]: [Ovillo] Imagen sobrepasa el borde de su contenedor
Hola,
Que pretendes exactamente???
float: left;
clear: both;
?¿
Bueno, no obstante. Debajo de un float tiene que existir un clear, no
en la capa que los contiene, no en la capa que flota. En una capa
contigua que este contenida en la misma que la que se encuentra
flotando.
/*aquí dentro alguien flota :0 */
/*yo floto*/
/*me dejo llevar*/
/*Se acabo la fiesta, aquí no
se flota más*/
Jeje, como se que te he liado más que ayudado:
http://css.maxdesign.com.au/floatutorial/
Tuesday, March 7, 2006, 5:28:34 PM, you wrote:
jpac> Creo que el problema es que estaás haciendo un clear:both
jpac> al párrafo en el que está metida la imagen.
jpac> Deberias quitar eso y poner un párrafo justo antes de que
jpac> termine el div "derecha" con el clear:both, a ver qué tal
jpac> Suerte
jpac> xleon escribió:
>> Hola a todos:
>>
>> tengo unos párrafos dentro de un div que contienen una imagen
>> con float:left, y un texto. El párrafo tiene un border-bottom de
>> 1px.
>> Estoy tratando de que la imagen no quede por encima del borde,
>> y que se quede bien metida dentro de su contenedor (el párrafo). En
>> firefox lo he conseguido poniendo un
>> en el html y despues del texto que acompaña la imagen, pero en ie no hace
>> caso:
>>
>> div#derecha p{
>> clear: both;
>> border-bottom: 1px solid #C2C2C2;
>> padding-bottom: 5px;
>> }
>> div#derecha p img{
>> float: left;
>> clear: both;
>> margin-right: 6px;
>> margin-bottom: 4px;
>> border:1px solid #99;
>> }
>>
>>
>> ¿alguna idea?
>>
>> Salu234
>> ___
>> 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://ovillo.org/mailman/listinfo/ovillo
Saludos.
_
Todo lo que no aprendí,
no se me ha olvidado.
_
___
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://ovillo.org/mailman/listinfo/ovillo
