Problema al hacer flotante una imagen

fametown · #1 (**permalink**) 20/07/2007, 10:30

Hola amigos.

Tengo un problema con el posicionamiento de una imagen dentro de un div.

Pongamos este pequeño ejemplo:

Código:

<div>
Texto......
Texto......
<img src...>
</div>

Necesito colocar la imagen que está en la última línea del DIV en la parte superior derecha de ese mismo div. Lo he logrado añadiendo al style de esa imagen el código: "position:relative; float:right; vertical-align:middle; top:-110px;"

La imagen se coloca donde yo quiero... el problema es que dentro del DIV se me reserva el hueco (queda el espacio) donde teóricamente debería ir la imagen (abajo del todo).

Necesito poner la imagen donde quiero pero que el DIV en la parte inferior quede ajustada al texto y no al <img> invisible que me queda.

Gracias :)

(Si no se entiende lo que trato de explicar puedo publicar la url donde se ve el tema...)

Yo

Roly · #2 (**permalink**) 20/07/2007, 16:57

pone la imagen en un div flotando a la derecha
<div>
<div style="float:right"><img src...></div>
Texto......
Texto......

</div>

fametown · #3 (**permalink**) 21/07/2007, 06:21

Mi problema es que no puedo poner el <div align="right"> arriba del texto. Este DIV (el que contiene la imagen siempre va el último en el párrafo.

Código:

texto
texto
texto
<div style="float:right">imagen</div>

Al hacerlo así siempre me deja el espacio que deja la imagen bajo el texto.

¿Se os ocurre algo?

gracias!

kahlito · #4 (**permalink**) 21/07/2007, 13:37

Hola fametown

¿Te refieres a algo así?

http://www.w3schools.com/html/tryit....ml_image_float

fametown · #5 (**permalink**) 21/07/2007, 16:51

Gracias kahlito pero no es eso exactamente.

Ir por favor a http://www.fametown.com/fams/nataschahamilton/

Si pulsais en la línea que pone "Información Metereológica" en el enlace (Mostrar/ocultar) se desplegará el detalle en un <div> (podeis ver el código).

Ese div tiene un borde a la izquierda de color gris.

Pues bien. El icono que representa el tiempo actual (un sol, una nube, etc) está en la última línea del DIV. Mediante CSS muevo esa imagen más hacia el centro para que quede más estético.

Pero ¿que ocurre con el DIV? Si os fijais en el borde gris del DIV llega más abajo de lo que es el texto... como si dejara hueco a la imagen.

Trato de evitar precisamente ese hueco y que el DIV llegue justo a donde termina el texto.

¿Se os ocurre algo?

Gracias!

zegga · #6 (**permalink**) 21/07/2007, 19:55

Aqui te va el código:

Cita:

<div id="weather" style="border-left: 6px solid rgb(222, 223, 222); overflow: hidden; display: block; width: 350px; padding-left: 12px; vertical-align:middle; margin-top:10px; margin-bottom: 10px;">
<img src="Natascha%20Hamilton%20-%20Fametown.com_files/11.png" title="Lluvia ligera" style="float: right; margin-top: 30px ">Temperatura: 54°F / 12°C <br> Humedad: 82% <br> Presión: 29.83in / 1010hPa <br>Condiciones: Lluvia ligera<br> Dirección del viento: SSO <br> Velocidad del viento: 8mph / 13km/h <br> Actualizado: 2:20 AM BST
</div>

1.- quitar el div y poner el style directamente al img
2.- colocar la imagen en la parte superior entre el final del tag div y el comienzo del texto.
3.- esteticamente agregue margin top y bottom al div para que no se vea tan apretado.
4.- con el margin-top alejas la imagen del borde del recuadro para que se centre verticalmente

Espero aun te sirva.

Saludos