Foros del Web » Creando para Internet » CSS »

Texto que fluya alrededor de unas fotos

Estas en el tema de Texto que fluya alrededor de unas fotos en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 24/10/2005, 23:50
 
Fecha de Ingreso: marzo-2005
Ubicación: Puerto Viejo - Costa Rica
Mensajes: 125
Antigüedad: 12 años, 9 meses
Puntos: 0
Texto que fluya alrededor de unas fotos

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.
  #2 (permalink)  
Antiguo 25/10/2005, 00:59
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 13 años, 5 meses
Puntos: 0
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
  #3 (permalink)  
Antiguo 25/10/2005, 02:18
 
Fecha de Ingreso: marzo-2005
Ubicación: Puerto Viejo - Costa Rica
Mensajes: 125
Antigüedad: 12 años, 9 meses
Puntos: 0
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
  #4 (permalink)  
Antiguo 25/10/2005, 20:42
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
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.
  #5 (permalink)  
Antiguo 25/10/2005, 22:10
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 13 años, 5 meses
Puntos: 0
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.
  #6 (permalink)  
Antiguo 26/10/2005, 11:04
 
Fecha de Ingreso: marzo-2005
Ubicación: Puerto Viejo - Costa Rica
Mensajes: 125
Antigüedad: 12 años, 9 meses
Puntos: 0
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
  #7 (permalink)  
Antiguo 26/10/2005, 13:47
 
Fecha de Ingreso: marzo-2005
Ubicación: Puerto Viejo - Costa Rica
Mensajes: 125
Antigüedad: 12 años, 9 meses
Puntos: 0
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
  #8 (permalink)  
Antiguo 26/10/2005, 22:29
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
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;
}
  #9 (permalink)  
Antiguo 27/10/2005, 12:02
 
Fecha de Ingreso: marzo-2005
Ubicación: Puerto Viejo - Costa Rica
Mensajes: 125
Antigüedad: 12 años, 9 meses
Puntos: 0
Por fin resuelto, muchas gracias
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 16:57.