<DIV> en esquina inferior izquierda de la ventana del navegador

Ragonicha_fulva · #1 (**permalink**) 13/05/2005, 11:03

Hola a Todos,

Quiero hacer que una imagen se vea por encima del texto de la página (flote) y que se encuentre SIEMPRE en la esquina inferior izquierad de la página. Con CSS he asignado clase para referenciar desde el documento HTML esa capa:

#elPilar
{
position: RELATIVE;
bottom: 0px;
left: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: transparent;
vertical-align: sub;
}

Y no consigo que lo haga. Lo máximo ha sido que se situe en esa posición, pero respecto al documento HTML, y lo quiero hacer respecto a la ventana del navegador.

Un saludo!

kahlito · #2 (**permalink**) 13/05/2005, 12:33

Hola Ragonicha_fulva, prueba cambiado la posicion a absoluta:

#elPilar
{
position: absolute;
bottom: 0px;
left: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: transparent;
vertical-align: sub;
}

Saludosss

Ragonicha_fulva · #3 (**permalink**) 13/05/2005, 14:25

Hola!

Muchas gracias, ya lo había probado... poniendo "absolute" , el problema es que lo hace, pero se mantiene fijo, por lo que al ir bajando la página desplaza con el texto... Necesito que se quede inmóvil en esa posición si muevo el texto. Quizás con javascript?

kahlito · #4 (**permalink**) 14/05/2005, 02:48

Hola de nuevo Ragonicha_fulva.

¿Has probado entonces con una altura determinada para que no se desplaze por ejemplo así?

Código HTML:

#elPilar
{
position: absolute;
height:300px;
bottom: 0px;
left: 0px;
background-color: transparent;
vertical-align: sub;
}

Por cierto al poner la posición absoluta creo que no hace falta poner el margin-left ni el margin-bottom, ya lo tienes definido.

Saludosss

furoya · #5 (**permalink**) 14/05/2005, 13:13

Hola Ragonicha_fulva , kahlito :

¿ Tiene que ser con CSS ?. Hay algunas formas de hacerlo con JavaScript.

Acá hay un ejemplo -al final- que funciona en Mozilla e Internet Explorer. Está adaptado del de tierradenomadas, pero no es totalmente CSS. Hice una versión que sí lo es, pero no la puse a la fecha porque no la terminé de probar en Firefox y Opera.

Colocar imágenes en las esquinas

saludos

furoya

Ragonicha_fulva · #6 (**permalink**) 16/05/2005, 12:20

Hola ambos!

gracias por responder.

Ambos me habéis dados soluciones con CSS, pero las he probado ambas. Por cierto furoya, en la web que me remites les ocurre lo mismo que a mí... la de la luna, etc...

Supongo que la única opción sería javascript.... lo había pensado pero no he encontrado nada... sabéis de algún script en javascript que pudiera adaptar y me pueda ayudar?

Un saludo y gracias mil!

kahlito · #7 (**permalink**) 16/05/2005, 13:47

Hola de nuevo, ¿puedes poner el resto de código o algo visual?

Saludosss

Ragonicha_fulva · #8 (**permalink**) 17/05/2005, 09:15

El código resumido es:

PAGINA HTML
--------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" href="stylesheet.css">
</head>

<body>
<p>texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto </p>

<DIV ID="elPilar">
<img src="images/elpilar.gif" width="156" height="156" alt="">
</DIV>

</body>
</html>

CSS
--------

#elPilar
{
position: absolute;
bottom: 0;
left: 0;
}

A VER SI OS AYUDA...

kahlito · #9 (**permalink**) 17/05/2005, 14:45

Cita:

Iniciado por Ragonicha_fulva

Hola a Todos,

Quiero hacer que una imagen se vea por encima del texto de la página (flote) y que se encuentre SIEMPRE en la esquina inferior izquierad de la página.

Ahora que me fijo lo más parecido que he visto pero al revés es esto:

http://www.dynamicdrive.com/dynamici...topcontent.htm

Cita:

Iniciado por Ragonicha_fulva

Y no consigo que lo haga. Lo máximo ha sido que se situe en esa posición, pero respecto al documento HTML, y lo quiero hacer respecto a la ventana del navegador.

La verdad no entiendo aún si es una cosa u otra, en el ejemplo que citas lo tienes tanto con una posición como con otra ¿no?

Por si acaso que no si si esto es lo que quieres prueba con esto:

Código HTML:

<style type="text/css">
#elPilar
{
position: absolute;
bottom: 0;
left: 0;
}
</style>
<body>
<DIV ID="elPilar">
<p>texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto </p> 
<img src="images/elpilar.gif" width="156" height="156" alt="">
</DIV>
</body>
</html>

Saludosss

Ragonicha_fulva · #10 (**permalink**) 18/05/2005, 10:47

Gracias Kahlito,

Gracias a la web de Dynamicdrive y a alguna inventiva por i parte he solucionado el problema... ahora la posición se mantiene, aunque al recolocarse la capa lo hace un poquito a trompicones, pero bueno...

Muchas gracias!

Si se os ocurre un script con javascript que pueda hacer esto con un movimiento más suave os gradeceré que me lo remitáis.

Un saludo!

kahlito · #11 (**permalink**) 18/05/2005, 10:56

Hola de nuevo, me alegro que vayas mejorando

Lo del movimiento más suave en con Javascript lo podrias mirar en el mismo foro de Javascript

Saludosss