div encima de gif animado

berthus · #1 (**permalink**) 12/02/2008, 09:23

Hola
Tengo una div encima de un gif animado, el problema es que en internet explorer, cuando el gif cambia la imagen, sitiua el gif en primer plano.
Si hago la prueba y no pongo un gif estatico todo funciona bien, he probado de poner la imagen como tal o como fondo de capa y tampoco funciona

El codigo es:

.div1 {z-index:2}
.div2 {background-color:#FFFFFF; filter:alpha(opacity=86); opacity:.86; border:1px solid; position:relative; margin-top:-100px; z-index:10}

<div class="div1">
<img src="la ruta del gif" alt="mi imagen" />
</div>
<div class="div2">
Texto
</div>

Alguna idea

dark_fuhrer · #2 (**permalink**) 12/02/2008, 15:02

hola amigo... estaria bueno que subieras ese .gif a un servidor...para poder ayudarte mejor..osea que pongas una imagen.
para poder citarte ejemplos. y asi puedan ayudarte

nos vemos

berthus · #3 (**permalink**) 13/02/2008, 09:49

No lo tengo online, pero un ejemplo seria esto, la imagen la he forzado para que sea del mismo tamaño de la que tengo

gracias

<style>
.div1 {z-index:2}
.div2 {background-color:#FFFFFF; border:1px solid; position:relative; margin-top:20px; z-index:10; text-align:left; margin-top:-100px}
.div2 div{ background-color:#004190; color:#FFFFFF; text-align:left; font-size:12px; padding:5px; z-index:10;}
</style>
<body>

<div class="div1">
<img src="http://img485.imageshack.us/img485/6055/ggwe1.gif" alt="" width="403" height="229" /></div>
<div class="div2">
<div >Texto en castellano </div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eget odio. Proin blandit nonummy mauris. Fusce venenatis, purus ac porttitor mollis, lorem lectus elementum est, at vulputate urna sapien a ante. Morbi vestibulum. Maecenas massa. Suspendisse potenti. Pellentesque accumsan convallis est. Quisque euismod libero ut quam. Suspendisse sit amet lectus eu leo lacinia fringilla. Vestibulum ante lacus, fringilla quis, congue vitae, adipiscing in, massa. Nunc urna justo, pretium ac, fringilla id, imperdiet eget, leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec mattis ullamcorper magna. Suspendisse potenti. Ut sed nibh.
</div>

pitufoweb · #4 (**permalink**) 13/02/2008, 12:51

haber si esto te sirve de ayuda

Código HTML:

.div1 { background-image:url(http://img485.imageshack.us/img485/6055/ggwe1.gif);
width: 403px; height: 229px;}

<div class="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque eget odio.
Proin blandit nonummy mauris. Fusce venenatis, purus ac porttitor mollis, 
lorem lectus elementum est, at vulputate urna sapien a ante. Morbi vestibulum.
</div>

berthus · #5 (**permalink**) 13/02/2008, 13:09

Gracias,
pero no, necesito que este en una capa independiente de la imagen,

Trypat · #6 (**permalink**) 14/02/2008, 11:57

¿has probado con Z-index?

aqui tienes una dirección que muestra lo que tu quieres, solo que el gif no es animado
http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex2

berthus · #7 (**permalink**) 15/02/2008, 02:40

muchas gracias, me funciona!!!