Foros del Web » Creando para Internet » CSS »

Problema al hacer flotante una imagen

Estas en el tema de Problema al hacer flotante una imagen en el foro de CSS en Foros del Web. 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...> ...
  #1 (permalink)  
Antiguo 20/07/2007, 11:30
 
Fecha de Ingreso: julio-2007
Mensajes: 7
Antigüedad: 10 años, 4 meses
Puntos: 0
Problema al hacer flotante una imagen

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

Última edición por fametown; 20/07/2007 a las 11:37
  #2 (permalink)  
Antiguo 20/07/2007, 17:57
 
Fecha de Ingreso: febrero-2004
Ubicación: Resistencia - Argentina
Mensajes: 299
Antigüedad: 13 años, 9 meses
Puntos: 0
Re: Problema al hacer flotante una imagen

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

</div>
  #3 (permalink)  
Antiguo 21/07/2007, 07:21
 
Fecha de Ingreso: julio-2007
Mensajes: 7
Antigüedad: 10 años, 4 meses
Puntos: 0
Re: Problema al hacer flotante una imagen

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!
  #4 (permalink)  
Antiguo 21/07/2007, 14:37
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Re: Problema al hacer flotante una imagen

Hola fametown

¿Te refieres a algo así?

http://www.w3schools.com/html/tryit....ml_image_float
  #5 (permalink)  
Antiguo 21/07/2007, 17:51
 
Fecha de Ingreso: julio-2007
Mensajes: 7
Antigüedad: 10 años, 4 meses
Puntos: 0
Re: Problema al hacer flotante una imagen

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!
  #6 (permalink)  
Antiguo 21/07/2007, 20:55
 
Fecha de Ingreso: abril-2006
Mensajes: 72
Antigüedad: 11 años, 7 meses
Puntos: 0
Re: Problema al hacer flotante una imagen

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
__________________
Jesus!! Yo confio en tí :-)
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 17:16.