Como darle fixed a una IMG en un CSS con Overflow

ElAless · #1 (**permalink**) 23/08/2007, 15:51

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???

marcelomdsc · #2 (**permalink**) 27/08/2007, 10:17

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?

ElAless · #3 (**permalink**) 27/08/2007, 12:35

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.

demiurgo_daemon · #4 (**permalink**) 27/08/2007, 13:30

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

ElAless · #5 (**permalink**) 27/08/2007, 13:55

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.

marcelomdsc · #6 (**permalink**) 27/08/2007, 17:43

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.

demiurgo_daemon · #7 (**permalink**) 28/08/2007, 14:40

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

ElAless · #8 (**permalink**) 28/08/2007, 15:13

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

demiurgo_daemon · #9 (**permalink**) 28/08/2007, 16:10

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

ElAless · #10 (**permalink**) 29/08/2007, 11:55

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:


--------------------------------------------
pero no me quedo claro esto, donde lo pongo?, y esos comentarios condicionales que dices son lo que se ven alli de 
------------------------------------
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

demiurgo_daemon · #11 (**permalink**) 30/08/2007, 14:35

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

ElAless · #12 (**permalink**) 30/08/2007, 15:41

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: , 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