Texto que fluya alrededor de unas fotos

gutiw · #1 (**permalink**) 24/10/2005, 22:50

Saludos a todos:
He conseguido pasar casi toda mi página hecha con tablas a CSS, pero me falta lo más importante y no consigo solucionarlo.
Me explico: me queda por solucionar una tabla con el contenido principal (que también quiero sustituir por un div) ésta capa debería llevar una foto en el ángulo superior izquierdo, otra foto a mitad de la altura del lado derecho y otra en el ángulo inferior izquierdo, todo el espacio que quede vacío es para el texto, que debería fluir por esos espacios y en caso de no caber, continuaría por debajo de la última foto.
Esto es así porque es una revista que se actualiza trimestralmente y lo que quiero es cambiar unicamente las fotos y el texto sin más complicaciones.
Eso antes lo hacía con celdas y quedaba más o menos, (bastante mal), pues lo que hacía era poner trozos de texto en una celda al lado de la celda que contenía la foto.
Ya sé que es mucho pedir, pero si alguien tuviera algún código ya escrito para algo semejante, o consejos o lo que sea y me lo enviara para poderlo estudiar y adaptarlo me ahorraría un montón de trabajo, pues la verdad es que voy muy perdido.
Se agradece cualquier consejo y ayuda.
Muchas gracias.

ramm · #2 (**permalink**) 24/10/2005, 23:59

Para eso se usa el float.
En tu CSS haces 2 clases:

Código:

.imgderecha {
  float:right;
  margin-left:12px;
  }
.imgizquierda {
  float:left;
  margin-right:12px;
  }

luego a las imagenes correspondientes le aplicas la clase que necesite:

Código:

<img src="imagen.png" alt="La Imagen" class="imgderecha" />

Saludos

gutiw · #3 (**permalink**) 25/10/2005, 01:18

ramm, gracias por responder, pero sigo con problemas, te agradecería que me lo explicaras un poco más si eres tan amable.
Mira, he hecho lo que me decías, o como yo lo he entendido, y me queda una foto en el ángulo superior izq y la otra pegada al lado

<div id="Layer1" style="position:absolute; left:174px; top:44px; width:304px; height:345px; z-index:1">
<img src="basilsco.jpg" alt="basilisco1" class="imgderecha"/> <img src="basilsco.jpg" alt="basilisco2" class="imgizquierda" /></div>
</div>

.imgderecha {
float:right;
margin-left:12px;
}
.imgizquierda {
float:left;
margin-right:12px;
}

Si te fijas en mi explicación son tres fotos, una arriba izq de la capa, otra en medio pegada al lado derecho de la capa y otra abajo izq, y en los espacios vacíos va texto, que no sé todavía como poner.
Otra cosa, lo de poner 12 px ¿por qué?
Disculpa tantas preguntas, pero es que quiero entender esto de las CSS de una vez.
Muchas gracias

Rafael · #4 (**permalink**) 25/10/2005, 19:42

La position absolute es en cierta medida contradictoria al float., también el Z index. El código es más sencillo:

Código PHP:

  <head> 
<style> 
.imgderecha { 
float:right; 
margin-left:12px; 
} 
.imgizquierda { 
float:left; 
margin-right:12px; 
} 
</style> 
</head> 
 
<body> 
<p> 
<img src="basilsco.jpg" alt="basilisco1" class="imgizquierda"> 
Bla bla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla bla. 
<img src="basilsco.jpg" alt="basilisco1" class="imgderecha"> 
Bla bla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla bla. 
<img src="basilsco.jpg" alt="basilisco1" class="imgizquierda"> 
blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla bla. 
</p> 
</body>

Los 12px cámbialos del tamaño que quieras, es un margen junto a la foto.

ramm · #5 (**permalink**) 25/10/2005, 21:10

Exactamente como te lo dice Rafael, si pones solamente las imagenes obviamente se van a colocar juntas las que tengan el float al mismo lado, pero para evitar eso necesitas el texto, es decir, las imagenes las tienes que ir metiendo con el texto (mejor aun si este esta dividido en parrafos [<p>] como debe estar)
Y los 12px, pues eso, un margen para que el texto no se pegue de la imagen.

gutiw · #6 (**permalink**) 26/10/2005, 10:04

Muchisimas gracias por las respuestas, ayer no pude entrar en el foro y no las había viusto, ahora mismo me pongo a hacerlo a ver si me sale de una vez.
Un saludo

gutiw · #7 (**permalink**) 26/10/2005, 12:47

Lo he hecho y queda perfecto MUCHISIMAS GRACIAS, le he puesto unos padding para que no se pegue todo a los márgenes y funciona muy bien, solo hay algo que me queda por ajustar y es que la tercera foto (la de abajo a la izq) como está controlada por los mismos valores que la primera (las dos a la izq)

.imgizquierda {
float:left;
margin-right:12px;
margin-bottom: 4px;
}

debería llevar un margin-top para que no se pegue al texto por arriba, pero claro, no lo puedo poner porque actuaría también sobre la imagen primera (que está pegada al borde superior y no lleva texto por encima)
No se me ocurre cómo hacerlo ¿una ayuda más por favor?
Muchas gracias

Rafael · #8 (**permalink**) 26/10/2005, 21:29

Podrías hacer un class nuevo

.imgizquierdatop {
float:left;
margin-right:12px;
margin-top: 10px;
margin-bottom: 4px;
}

y para las demás usas el que ya tienes.
.imgizquierda {
float:left;
margin-right:12px;
margin-bottom: 4px;
}

gutiw · #9 (**permalink**) 27/10/2005, 11:02

Por fin resuelto, muchas gracias