Imagenes junto a texto.

AleSanchez · #1 (**permalink**) 14/02/2005, 13:21

Hola a todos.

Quiero generar lo siguiente en CSS:

y lo hice con este codigo:

Código HTML:

 <div id="content1">
      <h3><span>La Boca</span></h3>
      <p><img src="images/interior/buenosaires/laboca.jpg" width="234" height="163"></p>
      <p>Aqui el texto</p>
    </div>
    <div id="content2">
      <h3><span>Tango</span></h3>
      <div id="img"></div>
      <p>Aqui mas texto</p>
    </div>

Los parrafos son mas que dos. Pueden ver el estado actual de lo que tengo hecho aqui: Ejemplo

Como veran, el segundo parrafo si tiene texto mas corto que lo que ocupa la imagen verticalmente, la imagen se sobresale de la capa y se me encima con la que le sigue.

Si le pongo la propiedad overflow:auto, en Firefox se ve ok, pero Internet Explorer sigue mostrandolo superpuesto.

Como se puede arreglar?

Gracias y saludetes.

juanchilo · #2 (**permalink**) 14/02/2005, 17:07

utiliza float y se termina la historia.

float:left; lizquierda

float:right; derecha

y ya!!!

claro a la imagen por ejemplo....

html:

Código HTML:

<img src="tango.jpg" width="123"  height="131"/>

css:

Código HTML:

 img {float:right;}

saludos y contame

AleSanchez · #3 (**permalink**) 14/02/2005, 17:13

Ya lo tengo con float la imagen, es mas, probe tambien ponerla como fondo de un DIV, pero me hace lo mismo. El tema es con el overflow del DIV, que puesto en auto en Firefox se ve bien, pero el IE me deforma la pagina como habras visto en el ejemplo que puse...

DeLaVega · #4 (**permalink**) 14/02/2005, 20:43

Hola... te hace falta utilizar un clear para eliminar el espacio a los costados del float:

...
ujpogdj</p>
</div>
<div style="clear: both;">
<div id="content2">
...

Con eso lo solucionás, si querés podés poner el estilo en tu .css así en caso que lo tengas que usar varias veces (veo que el sitio sigue para abajo), por ejemplo:

.clearer {
clear: both;
}

y simplemente lo usás (en todos los lugares donde te sea necesario):

<div class="clearer"><div>

Yo me resistía a usarlo al principio (por el tema de separar completamente el contenido de la presentación, pero creeme que es lo único que te salva en estos casos y además es mínimo).

Saludos, suerte

AleSanchez · #5 (**permalink**) 15/02/2005, 08:31

Gracias delaVega pero no me funciona...

Hice eso que me dijiste, agregue un div fuera del contedino con el clear pero no funciona...

juanchilo · #6 (**permalink**) 15/02/2005, 08:43

lo haces con div verdad?

ok prueba hacer un contenedor, con 2 filas y dentro dos columnas para cada una de las dos filas (eso es para lo que veo en la imagen).
Cuando este en casa mas tranquilo te armo la interface su quieres
saludos

DeLaVega · #7 (**permalink**) 15/02/2005, 13:49

Es muy raro que no te funcione, porque yo mismo lo probé antes de enviarte el código, grabé la página en mi máquina, le agregué eso y la parte con la imagen "Tango" que no bajaba en Explorer, si baja agregando el clear... fijate de agregarlo justo ahí donde te puse.
Saludos

posavasos · #8 (**permalink**) 15/02/2005, 20:01

No lo he entendido bien del todo, pero quizás: #content1, #content2, #content3 { clear:both; }

AleSanchez · #9 (**permalink**) 16/02/2005, 09:43

Gracias a todos, voy a probar desde cero y les cuento....

Me esta costando esto del CSS, ufffff......

juanchilo · #10 (**permalink**) 16/02/2005, 09:47

a todos nos cuesta pero ahi es ta lo motivador, por lo menos para mi!!
saludos

AleSanchez · #11 (**permalink**) 17/02/2005, 08:14

Funciona!!!
El tema es que no entiendo exactamente porqué funciona.....

No tienen por ahi algun tutorial bueno de posicionamiento, porque aun me confundo en el uso de positioning, clear, float, etc....

Saludetes...

PD: Les agrego el codigo que hice:

Código HTML:

<body>
<div id="contenedor">
  <div style="clear:both">
    <div id="content1">
        <div id="img1"></div>
        <div id="txt1">
           <h3>Título</h3>
           <p>Texto Texto Texto</p>
        </div>
    </div>
  </div>
  <div style="clear:both">
    <div id="content2">
       <div id="img2"></div>
       <div id="txt2">
          <h3>Título</h3>
          <p>Texto Texto Texto</p>
       </div>
    </div>
   </div>
   <div style="clear:both">
       <div id="content3">
       <div id="img3"></div>
       <div id="txt3">
           <h3>Título</h3>
           <p>Texto Texto Texto</p>
       </div>
    </div>
   </div>
</div>
</body>

Y la hoja de estilos:

Código HTML:

#contenedor {
	background-color: #FFFFFF;
	width: 760px;
}
#content1 #img1 {
	background-image: url(images/interior/buenosaires/laboca.jpg);
	height: 163px;
	width: 234px;
	float: left;
}
#content2 #img2 {
	background-image: url(images/interior/buenosaires/tango.jpg);
	height: 237px;
	width: 192px;
	float: right;
}
#content3 #img3 {
	background-image: url(images/interior/buenosaires/centro.jpg);
	height: 139px;
	width: 177px;
	float: left;
}