Foros del Web » Creando para Internet » CSS »

Como darle fixed a una IMG en un CSS con Overflow

Estas en el tema de Como darle fixed a una IMG en un CSS con Overflow en el foro de CSS en Foros del Web. Hola!!! antes que nada, je miren la cuestion es que tengo esto: #todo{ width: 590px; height:350px; overflow:auto; float:right; background-color:#FFFFFF; background: transparent url(imagenes/logo_SJF.jpg) no-repeat top right; ...
  #1 (permalink)  
Antiguo 23/08/2007, 16:51
 
Fecha de Ingreso: agosto-2007
Mensajes: 19
Antigüedad: 10 años, 3 meses
Puntos: 0
Pregunta Como darle fixed a una IMG en un CSS con Overflow

Hola!!! antes que nada, je

miren la cuestion es que tengo esto:

#todo{ width: 590px; height:350px; overflow:auto; float:right; background-color:#FFFFFF; background: transparent url(imagenes/logo_SJF.jpg) no-repeat top right;
}

hasta aqui todo esta bien, me hace la caja con Scroll y puedo navegar por todo el contenido (mucho texto), pero en esta caja yo le puse una imagen de fondo, misma que si aparece donde quiero, pero cuando me desplazo por el contenido de la caja, tambien la imagen se desplaza.

Quiero hacer lo mismo que se hace en el fondo del Body cuando le pones la propiedad "Fixed, pero cuando le doy esta propiedad a esta caja, no solo no hace lo que quiero sino que la imagen no aparece. Intente ponerlo asi: background-attachment: fixed; o en su forma abreviada nomas " fixed; " pero no funciona

Alguien sabe que puedo hacer???
  #2 (permalink)  
Antiguo 27/08/2007, 11:17
Avatar de marcelomdsc  
Fecha de Ingreso: junio-2007
Ubicación: Windsor, California.
Mensajes: 706
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: Como darle fixed a una IMG en un CSS con Overflow

Hola!
Primero que nada lo mejor seria que nos dieras un link a un ejemplo para poder verlo.
Tambien tendrias que saber que el atributo 'fixed' no es soportado por ie6, aunque si hay un hack para solucionarlo.
En que explorador estas probando tu pagina?
__________________
ginkgo.com.uy
  #3 (permalink)  
Antiguo 27/08/2007, 13:35
 
Fecha de Ingreso: agosto-2007
Mensajes: 19
Antigüedad: 10 años, 3 meses
Puntos: 0
Re: Como darle fixed a una IMG en un CSS con Overflow

mta mano, que chafa el IE6, pero bueno pruebo mis adelantos en el IE7 y en Firefox. El fixed esta bien para el Body, pero no para mi caja de texto con overflow, como ven en mi mensaje anterior, en mi cajita que se llama "#todo {}" sin el fixed esta perfectamente bien se alinea al lugar onde ponga la imagen, pero como tiene overflow, cuando desplazo el scroll pos se pierde porque la imagen se desplaza con la info, quisiera que se quedara congelada, pero pongo el fixed y puff desaparece mi imagen.
  #4 (permalink)  
Antiguo 27/08/2007, 14:30
Avatar de demiurgo_daemon  
Fecha de Ingreso: diciembre-2006
Ubicación: Querétaro
Mensajes: 184
Antigüedad: 11 años
Puntos: 2
Re: Como darle fixed a una IMG en un CSS con Overflow

Hola,

¿puedes poner tu código completo de cuando agregas fixed? Alguna vez me pasó algo parecido y resultó ser un error de código.

saludos
  #5 (permalink)  
Antiguo 27/08/2007, 14:55
 
Fecha de Ingreso: agosto-2007
Mensajes: 19
Antigüedad: 10 años, 3 meses
Puntos: 0
Re: Como darle fixed a una IMG en un CSS con Overflow

ok. Mira tengo un archivo .css donde guardo todos mis estilos, entre ellos este:

#cuerpo{
width: 590px; height:345px; overflow:auto; padding: 3px 3px 3px 3px; margin-top:7px; float:right; text-align:justify; line-height:17px; background-color:#FFFFFF; background: transparent url(imagenes/logo_SJF.jpg) no-repeat right; background-attachment:fixed;
}

y en el archivo html, donde mande llamar a "#cuerpo":

<div id="cuerpo"> aqui va mi texto, mucho texto, pa que sirva de algo el overflow</div>

Ahora un detalle importantisimo, acabo de probar mis avances con IE6 donde funciona a la perfeccion el fixed, esta tal como lo quiero. Lo cual me alivia porque muchos se han quedado en esa versión por cuestiones de validación de software. Despues de todo no es tan chafa como lo dije antes, je

Despues lo probe en IE7 y Oh sorpresa en IE7 no funciona, en IE7 aparece mocha la imagen, es decir aparece alineada en el lugar donde la quiero, pero si mi imagen mide 200px de ancho, solo se mira una porcion, digamos unos 50 o 70px.

Tambien lo probe en Firefox Ver.2 y tampoco aparece la imagen.
  #6 (permalink)  
Antiguo 27/08/2007, 18:43
Avatar de marcelomdsc  
Fecha de Ingreso: junio-2007
Ubicación: Windsor, California.
Mensajes: 706
Antigüedad: 10 años, 6 meses
Puntos: 8
Re: Como darle fixed a una IMG en un CSS con Overflow

honestamente nose, ni siquiera estoy seguro de saber cual es el problema que estas teniendo.
En general en este tipo de foros, uno da un link a un ejemplo de lo que hace cuando el problema no es algo muy 'normal'. Como si quisieras preguntar algo como "como alinear un div a la derecha", te diria que le des la propiedad de float:right y listo.
Pero en este caso no creo poder ayudarte sin VER el problema.
__________________
ginkgo.com.uy
  #7 (permalink)  
Antiguo 28/08/2007, 15:40
Avatar de demiurgo_daemon  
Fecha de Ingreso: diciembre-2006
Ubicación: Querétaro
Mensajes: 184
Antigüedad: 11 años
Puntos: 2
Re: Como darle fixed a una IMG en un CSS con Overflow

Hola,

disculpa, pero marcelomdsc tiene razón; lo que describes es poco común y, si pudieras mostrar un ejemplo de tu problema, sería lo mejor. Utilicé el código que pones, y funciona como debe: se muestra una imagen que no se desplaza al desplazar texto. Lo probé exitosamente en Firefox 2, Opera 9.2, Explorer 7 y Explorer 6. Así que, a menos que estemos entendiendo mal tu problema, lo que haces es correcto.

Sin embargo, mientras escribía esta respuesta, encontré un detalle interesante: cuando tienes una imagen grande (que se desborde del div) no hay problema; sin embargo, si la imagen es pequeña (como tal vez es tu caso), no aparece. El problema es la siguiente línea:

Código:
background: transparent url(imagenes/logo_SJF.jpg) no-repeat right;
que debe decir, por ejemplo
Código:
background: transparent url(imagenes/logo_SJF.jpg) no-repeat top right;
En pocas palabras, debes definir el atributo vertical de la posición del fondo. Si lo dejas como está (sin definir), Firefox 2 no muestra nada, Explorer 7 y Opera 9.2 ponen el fondo abajo a la derecha y Explorer 6 lo pone centrado a la derecha. Mi hipótesis es que tiene que ver con los valores por defecto de background-position.

saludos
  #8 (permalink)  
Antiguo 28/08/2007, 16:13
 
Fecha de Ingreso: agosto-2007
Mensajes: 19
Antigüedad: 10 años, 3 meses
Puntos: 0
Re: Como darle fixed a una IMG en un CSS con Overflow

si tienen razon, pero es que no queria dar el link porque tovia no termino, creo que sera lo mejor: http://paginasprodigy.com/lldmlabaja/lldm_mxl.html
sin embargo alli no podran ver el CSS porque esta en un archivo CSS q mando llamar.
Hice lo que me dijiste, ya le inclui el atributo TOP para la posicion de fondo, asi quedo:
#cuerpo{
width: 590px; height:345px; overflow:auto; padding: 3px 3px 3px 3px; margin-top:7px; float:right; text-align:justify; line-height:17px; background-color:#FFFFFF; background: transparent url(imagenes/logo_SJF.jpg) no-repeat top right; background-attachment:fixed;
}

Ahora por favor, ay me dicen si pueden ver la imagen de fondo en los diferentes navegadores. Adjunto esta imagen, asi es como deberia de verse en todos los navegadores... ah y de paso ay me dicen que otros errores se dejan ver en la pagina en los diferentes navegadores por favor. Gracias
  #9 (permalink)  
Antiguo 28/08/2007, 17:10
Avatar de demiurgo_daemon  
Fecha de Ingreso: diciembre-2006
Ubicación: Querétaro
Mensajes: 184
Antigüedad: 11 años
Puntos: 2
Re: Como darle fixed a una IMG en un CSS con Overflow

Hola,

no me preguntes por qué, pero parece que background-attachment se toma a partir del cuerpo completo, no del div al que te refieres. Al parecer, esto es un problema recurrente, cuya solución sería dejar background-attachment: scroll y, con comentarios condicionales, redefinir background-attachment: fixed para Explorer 6.

saludos
  #10 (permalink)  
Antiguo 29/08/2007, 12:55
 
Fecha de Ingreso: agosto-2007
Mensajes: 19
Antigüedad: 10 años, 3 meses
Puntos: 0
Re: Como darle fixed a una IMG en un CSS con Overflow

oye pero no me dijiste que resultados tuviste en los diferentes navegadores con mi pagina? ya revise el link que me diste para el background:
---------------------------------------------------
#fondo{background: url(imagen.gif) no-repeat left bottom;}

siempre se vera al pie del contenido. y para IE declaras:

<!--[if IE]>
<style>
#fondo{background-attachment:fixed;}
</style>
<![endif]-->
--------------------------------------------
pero no me quedo claro esto, donde lo pongo?, y esos comentarios condicionales que dices son lo que se ven alli de <!--[if IE]> ???, estos me imagino que van asi concretamente en mi CSS:
-------------------------
#cuerpo{ width: 590px; height:345px; overflow:auto; background: transparent url(imagenes/logo_SJF.jpg) no-repeat top right; }
<!--[if IE]>
<style>
#cuerpo{ background-attachment:fixed; }
</style>
<![endif]-->
------------------------------------
aunque no se a que se deba q este ultimo codigo del IF esta mal en algo, porque el fixed en FireFox si lo hace pero en IE no
  #11 (permalink)  
Antiguo 30/08/2007, 15:35
Avatar de demiurgo_daemon  
Fecha de Ingreso: diciembre-2006
Ubicación: Querétaro
Mensajes: 184
Antigüedad: 11 años
Puntos: 2
Re: Como darle fixed a una IMG en un CSS con Overflow

Ok, una disculpa; no me di a entender.

Tanto en Firefox 2, como en Explorer 7 y Opera 9, vi que el fondo que quieres poner no se posiciona de acuerdo al <div> que estás definiendo, sino conforme al cuerpo de toda la ventana. En otras palabras, si maximizas la ventana vas a tener el efecto que buscas, pero si no, el fondo se va a ver cortado o inclusive, si la ventana es muy pequeña, no ves el fondo en absoluto.

La parte que va entre comentarios se llama comentario condicional. Microsoft, entre que admite que sus productos son medio estocásticos y que quiere dar una supuesta flexibilidad, permite detectar si tienes Explorer y la versión a partir de estas construcciones que pones en el HTML (sin necesidad de Javascript), no en CSS. Entonces, tus archivos quedarían así:

CSS:
Código:
#cuerpo{ width: 590px; height:345px; overflow:auto; background: transparent url(imagenes/logo_SJF.jpg) no-repeat top right; }
HTML:
Código HTML:
<!--[if lt IE 7]>
<style>
#cuerpo{ background-attachment:fixed; }
</style>
<![endif]--> 
Toma en cuenta que cambié el <!--[if IE]> por <!--[if lt IE 7]>, ya que Explorer 7 sí se comporta como los demás.

saludos
  #12 (permalink)  
Antiguo 30/08/2007, 16:41
 
Fecha de Ingreso: agosto-2007
Mensajes: 19
Antigüedad: 10 años, 3 meses
Puntos: 0
Re: Como darle fixed a una IMG en un CSS con Overflow

sabes que, me enfada que IE se comporte asi, cuando no tengo errores en la versión 6 es en la 7. Porque no puede respetar los estandares?
Lo siento, puse tu codigo de "IF" en mi archivo de HTML, al rededor del <div id="x">, haciendo pruebas, primero arriba, despues abajo, despues dentro, y nada, incluso hice esas mismas pruebas quitandole el "IE 7" y dejandole solo el "IE" en el "IF". Pero seguia comportandose mal. Este es mi resultado:

Con el codigo que me diste, pude darle fixed a la imagen, pero con 2 errores: el primero que la imagen no aparece completa pone un pedazo nomas (aunque maximize la ventana) y segundo que en la pagina aparecia este texto: <!--[if lt IE 7]> <![endif]-->, el lugar donde me aparecia dependia de donde lo declarara en mi archivo html.

Vaya, ojala y pronto pueda resolver este embrollo. Pero por lo pronto, pondre esta leyenda "WEB diseñada para Firefox" o algo similiar y un enlace para descargarlo, jaja pa que se le quite al IE
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 09:18.