Foros del Web » Creando para Internet » CSS »

Imagenes junto a texto.

Estas en el tema de Imagenes junto a texto. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/02/2005, 13:21
Avatar de AleSanchez
Colaborador
 
Fecha de Ingreso: septiembre-2004
Ubicación: Buenos Aires, Argentina
Mensajes: 3.692
Antigüedad: 19 años, 6 meses
Puntos: 47
Imagenes junto a texto.

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.
  #2 (permalink)  
Antiguo 14/02/2005, 17:07
 
Fecha de Ingreso: marzo-2004
Ubicación: Córdoba
Mensajes: 239
Antigüedad: 20 años
Puntos: 0
con float lo solucionas

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
__________________
Un gran desarrollador de soluciones webs -
-----------------------------
  #3 (permalink)  
Antiguo 14/02/2005, 17:13
Avatar de AleSanchez
Colaborador
 
Fecha de Ingreso: septiembre-2004
Ubicación: Buenos Aires, Argentina
Mensajes: 3.692
Antigüedad: 19 años, 6 meses
Puntos: 47
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...
  #4 (permalink)  
Antiguo 14/02/2005, 20:43
 
Fecha de Ingreso: julio-2002
Mensajes: 447
Antigüedad: 21 años, 8 meses
Puntos: 0
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
  #5 (permalink)  
Antiguo 15/02/2005, 08:31
Avatar de AleSanchez
Colaborador
 
Fecha de Ingreso: septiembre-2004
Ubicación: Buenos Aires, Argentina
Mensajes: 3.692
Antigüedad: 19 años, 6 meses
Puntos: 47
Gracias delaVega pero no me funciona...
Hice eso que me dijiste, agregue un div fuera del contedino con el clear pero no funciona...
  #6 (permalink)  
Antiguo 15/02/2005, 08:43
 
Fecha de Ingreso: marzo-2004
Ubicación: Córdoba
Mensajes: 239
Antigüedad: 20 años
Puntos: 0
a ver

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
__________________
Un gran desarrollador de soluciones webs -
-----------------------------
  #7 (permalink)  
Antiguo 15/02/2005, 13:49
 
Fecha de Ingreso: julio-2002
Mensajes: 447
Antigüedad: 21 años, 8 meses
Puntos: 0
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
  #8 (permalink)  
Antiguo 15/02/2005, 20:01
 
Fecha de Ingreso: enero-2005
Mensajes: 265
Antigüedad: 19 años, 2 meses
Puntos: 1
No lo he entendido bien del todo, pero quizás: #content1, #content2, #content3 { clear:both; }
  #9 (permalink)  
Antiguo 16/02/2005, 09:43
Avatar de AleSanchez
Colaborador
 
Fecha de Ingreso: septiembre-2004
Ubicación: Buenos Aires, Argentina
Mensajes: 3.692
Antigüedad: 19 años, 6 meses
Puntos: 47
Gracias a todos, voy a probar desde cero y les cuento....

Me esta costando esto del CSS, ufffff......
  #10 (permalink)  
Antiguo 16/02/2005, 09:47
 
Fecha de Ingreso: marzo-2004
Ubicación: Córdoba
Mensajes: 239
Antigüedad: 20 años
Puntos: 0
si cuesta pero...

a todos nos cuesta pero ahi es ta lo motivador, por lo menos para mi!!
saludos
__________________
Un gran desarrollador de soluciones webs -
-----------------------------
  #11 (permalink)  
Antiguo 17/02/2005, 08:14
Avatar de AleSanchez
Colaborador
 
Fecha de Ingreso: septiembre-2004
Ubicación: Buenos Aires, Argentina
Mensajes: 3.692
Antigüedad: 19 años, 6 meses
Puntos: 47
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;
}
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 01:32.