Foros del Web » Creando para Internet » CSS »

float para imagenes

Estas en el tema de float para imagenes en el foro de CSS en Foros del Web. Buenos dias Tengo un problemon, Dentro de un div, tengo mi texto pero quiero agregarle una imagen flotante al lado derecho, en mi css pongo: ...
  #1 (permalink)  
Antiguo 14/09/2009, 10:50
 
Fecha de Ingreso: noviembre-2007
Mensajes: 9
Antigüedad: 10 años
Puntos: 0
float para imagenes

Buenos dias Tengo un problemon,
Dentro de un div, tengo mi texto pero quiero agregarle una imagen flotante al lado derecho, en mi css pongo:

.flrgt {float:right; padding: 5px;}

cuando lo aplico a mi imagen, el texto en vez de bordear toda la imagen simplemente se va de corrido como si fuera una columna, esto me pasa en IE6 porque en IE7 y FF se ve bien.

Alguien podria darme una solucion, por favor.
  #2 (permalink)  
Antiguo 14/09/2009, 10:57
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: float para imagenes

Le tendrías que dar tambien un clear.

Siempre los confundo, pero creo es que clear: none . La otra es clear:both;
  #3 (permalink)  
Antiguo 14/09/2009, 17:03
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: float para imagenes

Algo debes estar haciendo mal, helter, pues si aplicas una clase a la imagen donde está definido float, se debería posicionar correctamente en su lado y el texto fluir a su lado y por debajo.
Mira lo siguiente. De la clase .derecha lo significativo es el float (el resto es adorno). Y El cómo se aplica a la imagen: ~~<img class="derecha" src="http://www.forosdelweb.com/f53/float-para-imagenes-735477/... ~~ que posiblemente sea donde tengas algún error de dedo.

Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Kseso? jugando con css</title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin: 0; padding:0; outline: none; border: 0;}
  7. body {
  8.     background-color: #444;
  9.     margin:20px;
  10. }
  11. #contenedor {
  12.   position: relative;
  13.   width: 40%;
  14.   margin: 0 auto;
  15.   clear: both;
  16.   background: #F5F7F9;
  17.   border-bottom:1px solid #A5A7AA;
  18.   border-right:1px solid #A5A7AA;
  19.   overflow: auto;
  20.   padding: 10px;
  21. }
  22. #contenedor p {
  23.   font-size: 1em;
  24.   font-family: monospace;
  25.   text-align: justify;
  26. }
  27. .derecha {
  28.   background: #DFDFDF;
  29.   float: right;
  30.   margin: 0 0 0 10px;
  31.   border: 1px solid #CDCDCD;
  32.   padding: 3px;
  33. }
  34. </head>
  35.  
  36. <div id="contenedor">
  37. <img class="derecha" src="http://img299.imageshack.us/img299/9726/96830574.jpg" alt="jardín" />
  38. <p>Todo el texto que quieras que se muestre junto a la imagen.</p>
  39. <p>Lorem ipsum dolor sit amet consectetuer amet interdum metus netus interdum. Maecenas consectetuer urna id tempus orci justo interdum convallis et egestas. Lobortis gravida Quisque Nam tellus Curabitur Phasellus Nam neque pretium gravida. Malesuada neque.</p>
  40. <p>Todo el texto que quieras que se muestre junto a la imagen. Lorem ipsum dolor sit amet consectetuer amet interdum metus netus interdum. Maecenas consectetuer urna id tempus orci justo interdum convallis et egestas. Lobortis gravida Quisque Nam tellus Curabitur Phasellus Nam neque pretium gravida. Malesuada neque.</p>
  41. </div>
  42. </body>

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:44.