Ver Mensaje Individual
  #3 (permalink)  
Antiguo 14/09/2009, 16:03
kseso?
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
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? +++