Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de <DIV> en esquina inferior izquierda de la ventana del navegador en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/05/2005, 12:03
 
Fecha de Ingreso: marzo-2004
Mensajes: 13
Antigüedad: 13 años, 8 meses
Puntos: 0
<DIV> en esquina inferior izquierda de la ventana del navegador

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!
  #2 (permalink)  
Antiguo 13/05/2005, 13:33
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
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
  #3 (permalink)  
Antiguo 13/05/2005, 15:25
 
Fecha de Ingreso: marzo-2004
Mensajes: 13
Antigüedad: 13 años, 8 meses
Puntos: 0
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?
  #4 (permalink)  
Antiguo 14/05/2005, 03:48
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
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
  #5 (permalink)  
Antiguo 14/05/2005, 14:13
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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
  #6 (permalink)  
Antiguo 16/05/2005, 13:20
 
Fecha de Ingreso: marzo-2004
Mensajes: 13
Antigüedad: 13 años, 8 meses
Puntos: 0
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!
  #7 (permalink)  
Antiguo 16/05/2005, 14:47
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
Hola de nuevo, ¿puedes poner el resto de código o algo visual?

Saludosss
  #8 (permalink)  
Antiguo 17/05/2005, 10:15
 
Fecha de Ingreso: marzo-2004
Mensajes: 13
Antigüedad: 13 años, 8 meses
Puntos: 0
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...
  #9 (permalink)  
Antiguo 17/05/2005, 15:45
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
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
  #10 (permalink)  
Antiguo 18/05/2005, 11:47
 
Fecha de Ingreso: marzo-2004
Mensajes: 13
Antigüedad: 13 años, 8 meses
Puntos: 0
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!
  #11 (permalink)  
Antiguo 18/05/2005, 11:56
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
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
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 11:25.