Imagen fija por encima de otras

[American2010]

Me ayudan, porque me doy de palos con css del cual no entiendo mucho, y finalmente cuando logro lo que quiero en Firefox, o sorpresa al abrir en IE no logro lo que quería...

Evidentemente me pasa por no saber...

Lo que quiero es una imagen que este por encima de otras y que quede siempre abajo a la derecha en el navegador...

En Firefox lo veo bien


Eso en la parte inferior del navegador, y la imagen permanece ahí aun cuando uno se mueve...

Pero en IE


Aparece en donde se la llama, y más alla de que sea un png que luego reemplazaré por un gif, como puedo lograr este efecto para que funciones en ambos navegadores....

Yo arme este (leyendo y copiando de ayudas)

Código:

#santa {
   z-index: 5;
   position: fixed;
   width: 102px;
   height: 121px;
   bottom: 0px;
   right: 0px;
   background: url('santa1.png') no-repeat bottom right;
}

¿Me ayudan? Gracias a todos...

[American2010]

Con esto me aproximo más a lo que quiero, pero algo "rompe" es aspecto del IE

Miren como la barra de desplazamiento, se mete mas adentro y le desaparece el iconito inferior

Código:

#superpie{
   position: absolute;
   bottom: 0px;
   right: 27px;
}
@media screen {
   div#superficie {position: fixed; bottom: 0px; right: 0px;}
   * html {overflow-y: hidden;}
   * html body {overflow-y: auto; height: 100%;padding: 0;}
   * html div#superficie {position: absolute;}
}
body > div#superpie{
   position: fixed;
   bottom:0px;
   right:0px;
}

Código HTML:

<div id="superpie">
<img src="santa1.png" class="image" title="xxxx xxxx" alt="xxxx xxx"/>
</div> 

[kennysamuerto]

A ver, te voy a dar una solucion chapuzera, pero que yo la uso (porque a mi me vale) no se si a ti tambien.

Yo por ejemplo suelo colocar una imagen, dentro de una celda, y la coloco como imagen de fondo de la celda.

Luego coloco una imagen, y se me queda superpuesta sobre la otra.

Insisto, muy muy probablemente no sea lo que te sirva. Pero como idea... te lo dejo.

Saludos

[American2010]

Iniciado por kennysamuerto

A ver, te voy a dar una solucion chapuzera, pero que yo la uso (porque a mi me vale) no se si a ti tambien.

Yo por ejemplo suelo colocar una imagen, dentro de una celda, y la coloco como imagen de fondo de la celda.

Luego coloco una imagen, y se me queda superpuesta sobre la otra.

Insisto, muy muy probablemente no sea lo que te sirva. Pero como idea... te lo dejo.

Saludos

Sisi, eso me serviría en un lugar especifico del sitio, definir el fondo de celda, y luego poner una imagen en esa celda...

El único problema, es que ese conjunto se movería al mover la página, yo lo que presiso es que la imagen quede siempre prensente en la esquina inferior derecha del navegador...

Para los que usan facebook, sería algo estático como el menú que siempre está debajo...

[Mikmoro]

Mira a ver si este ejemplo te da una idea de cómo hacerlo. Es compatible con IE6 y 7, FF, etc.

[American2010]

Iniciado por Mikmoro

Mira a ver si este ejemplo te da una idea de cómo hacerlo. Es compatible con IE6 y 7, FF, etc.

Voy a mirarlo, mañana les comento...

Gracias...

Bueno, va perfecto, sólo que ahora debo revisar, porque al parecer cualquier DIV definido como "absolute" se queda fijo en pantalla...

Ya veré como resolverlo, pero en principio va excelente y se logra un muy buen efecto...

Muchas gracias, voy a analizar como decirle que trabaje sólo sobre un DIV específico...

[American2010]

Como no se pero ahora funciona...

http://www.deportales.com.ar

El codigo es este

Código HTML:

<style type="text/css">
#fixme {
  /* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
  position: absolute; right: 0px; bottom: 0px; width: 102px; height: 121px;
}
body > div#fixme {
  /* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
  position: fixed;
}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
  /* IE5.5+/Win - this is more specific than the IE 5.0 version */
  right: auto; bottom: auto;
  left: expression( ( -0 - fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
  top: expression( ( -0 - fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
</style>
<![endif]>
<![endif]--> 

[Mikmoro]

Iniciado por American2010

V
Bueno, va perfecto, sólo que ahora debo revisar, porque al parecer cualquier DIV definido como "absolute" se queda fijo en pantalla...

Esto debería resolverse haciendo que cualquier otro div con posición absoluta esté dentro del contenedor, y no fuera como está el fijo.

El código que pones me parece un poco enrevesado, pero bueno, si te funciona ya está bien.

[American2010]

Iniciado por Mikmoro

Esto debería resolverse haciendo que cualquier otro div con posición absoluta esté dentro del contenedor, y no fuera como está el fijo.

El código que pones me parece un poco enrevesado, pero bueno, si te funciona ya está bien.

Creo que otros que estaban como absolute estaban dentro del contenedor principal pero aún así se quedaba fijos...

En fin, lo probé e incluso en Opera iba bien...

Por ahora lo dejaré así, pero probaré lo que dices de donde se encuentran los DIVs, porque lo que me llamaba la atencion de otros que me daban error fué eso, que fijaban a todos los DIVs declarados como absolutos...

Bueno, quizás no haya quedado con un código muy bonito, pero bueno, es por las fiestas, de seguro después lo saque...

Aunque me gustaría reemplazarlo con algo que sirva para volver de formar rápida a la parte superior de la página :D

[Mikmoro]

Mira, si añades position: relative al contenedor, cuando pongas dentro él una caja con position: absolute, ésta hará scroll con el contenedor, mientras que la otra caja quedará fija como antes.

Prueba a añadir el relative que te digo y ahora añade dentro del contenedor este div:

<div style="background-color: #00f;width: 100px; height: 100px; position: absolute;top: 20px; left: 20px;"></div>

Verás que se mueve con el contenedor y la otra queda fija como antes.

[American2010]

Iniciado por Mikmoro

Mira, si añades position: relative al contenedor, cuando pongas dentro él una caja con position: absolute, ésta hará scroll con el contenedor, mientras que la otra caja quedará fija como antes.

Prueba a añadir el relative que te digo y ahora añade dentro del contenedor este div:

<div style="background-color: #00f;width: 100px; height: 100px; position: absolute;top: 20px; left: 20px;"></div>

Verás que se mueve con el contenedor y la otra queda fija como antes.

Ok, probaré... Incluso ahora "logre" que el .png de fondo transparente se vea bien en IE 5.5 y 6

:D