Foros del Web » Creando para Internet » Diseño web »

Imagen fija por encima de otras

Estas en el tema de Imagen fija por encima de otras en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/11/2008, 11:58
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
Imagen fija por encima de otras

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...
__________________
elGastronomo
  #2 (permalink)  
Antiguo 21/11/2008, 12:28
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
Respuesta: Imagen fija por encima de otras

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> 
__________________
elGastronomo
  #3 (permalink)  
Antiguo 21/11/2008, 13:28
Avatar de kennysamuerto  
Fecha de Ingreso: mayo-2006
Ubicación: /España/Valencia/index.php
Mensajes: 283
Antigüedad: 11 años, 7 meses
Puntos: 8
Respuesta: Imagen fija por encima de otras

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
  #4 (permalink)  
Antiguo 21/11/2008, 14:33
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
Respuesta: Imagen fija por encima de otras

Cita:
Iniciado por kennysamuerto Ver Mensaje
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...
__________________
elGastronomo
  #5 (permalink)  
Antiguo 21/11/2008, 16:54
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Imagen fija por encima de otras

Mira a ver si este ejemplo te da una idea de cómo hacerlo. Es compatible con IE6 y 7, FF, etc.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 21/11/2008, 20:08
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
Respuesta: Imagen fija por encima de otras

Cita:
Iniciado por Mikmoro Ver Mensaje
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...
__________________
elGastronomo

Última edición por American2010; 22/11/2008 a las 08:13
  #7 (permalink)  
Antiguo 23/11/2008, 14:16
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
Respuesta: Imagen fija por encima de otras

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]--> 
__________________
elGastronomo

Última edición por American2010; 23/11/2008 a las 15:42
  #8 (permalink)  
Antiguo 23/11/2008, 16:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Imagen fija por encima de otras

Cita:
Iniciado por American2010 Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 23/11/2008, 19:48
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
Respuesta: Imagen fija por encima de otras

Cita:
Iniciado por Mikmoro Ver Mensaje
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
__________________
elGastronomo
  #10 (permalink)  
Antiguo 24/11/2008, 03:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Imagen fija por encima de otras

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.
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 24/11/2008, 12:53
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
Respuesta: Imagen fija por encima de otras

Cita:
Iniciado por Mikmoro Ver Mensaje
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
__________________
elGastronomo
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 04:27.