Ayuda con las imágenes

Citar

Escrito el 14 Feb 2008 12:47 am

Tengo una duda. Tengo algo así:

Código :

<blockquote>
BLABLABLABLABLABLA<img scr="imagen.jpg">
</blockquote>

el problema es que quiero hacer que la imagen esté recuadrada. La lógica me dice que haga esto:

Código :

img{
border:1px solid #767676;
padding:5px;
background:#CCCCCC;
}

en Firefox funciona pero en IE, sólo me muestra la img con borde pero sin padding.
Entonces la pongo dentro de un div.

Código :

<blockquote>
BLABLABLABLABLABLA<div class="imagen"><img scr="imagen.jpg"></div>
</blockquote>

y en CSS:

Código :

.imagen{
border:1px solid #767676;
padding:5px;
background:#CCCCCC;
}

Aquí funciona en ambos navegadores. Pero el problema viene cuando quiero que la imagen se alinee a la derecha. Intento poner

Código :

.imagen{
/*LO MISMO DE RECIÉN*/
float:right
}

LA imagen flota correctamente pero esta desborda el div superior que contiene al blockquote.
¿Hay alguna forma de arreglar esto?
NOTA: Me olvide de aclarar

Código :

<div>
<blockquote>
BLABLABLABLABLABLA<div class="imagen"><img scr="imagen.jpg"></div>
</blockquote>
</div>
<div class="otro div">
.......
</div>

Por chi770

7 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Citar

Escrito el 14 Feb 2008 07:31 am

Algo parecido me pasó a mí.
No conseguí que la imagen se quedara quieta dentro del div.

Así que si alguien sabe cómo encerrar una imagen en un div... ayuda a dos.
:oops:

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 14 Feb 2008 11:41 am

Talvez, (repitao talvez) se pueda solucionar con el truco del Clearfix. Buscadlo en Google (algo así como css clarfix).

Por ryuz

350 de clabLevel

2 tutoriales

Envíale un mensaje privado Web

Citar

Escrito el 15 Feb 2008 02:05 am

encontre la solución!... pero el problema es que no entiendo realmente a que se debe este funcionamiento.
Lo explico con un ejemplo:

Código :

<html>
<head>
<style>
.no_flota{
clear:both;
background:#CECECE;
}
.parrafo{
border:1px solid #767676;
background:#CCCCCC;
float:left;
}
.asd{
float:right;
vertical-align:top;
padding:5px;
background:#FFFFFF;
border:1px solid #767676;
}
blockquote{
background:orange;
width:100%;
}
 </style>
</head>
<body>
<div class="no_flota">UN DIV que no flota y que no permite que floten a su costado</div>
<div class="parrafo">
 <div class="asd"><img src="cualquiera.jpg"></div>BLABLA<br>MAS BLA BLA..</div>
 <blockquote style="clear:left">
BLA EN BLOCKQUOTE!
</blockquote>
</body>
</html>

Al parecer, para que la imagen flote dentro un elemento, este debe a su vez flotar. Fijense que el div "parrafo" flota y que el div "no_flota".....ehhm...no flota!

. Esto lo hago con el clear:both. ¡Entonces el parrafo se queda en su lugar con la imagen flotando!.
Este ejemplo si funciona. Pero el problema ahora, es que realmente no entiendo el porqué de este funcionamiento.¿Alguien sabe?.
en cuanto a lo de la imagen: Para crear ese enmarcado necesariamente hay que poner un DIV que la encierre, ya que en IE6(por lo menos) no se crea la caja con el padding.

Por chi770

7 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Citar

Escrito el 16 Feb 2008 12:15 am

En internet explorer 6 e inferiores solo puedes asignar valores de padding en css si su display es bloque. Por lo tanto, puedes, en vez de usar un div extra, usar:

Código :