Problema 2 div flash

[djaevi]

Hola a todos les escribo porque tengo el siguiente problema con 2 divs.
Resulta que los tengo superpuestos con transparencias con z index, en el div de abajo tengo un flash con algunos botones y en el de arriba imagen etc. lo que sucede es que al tener el div de abajo tapado por este otro los botones del flash que tengo en el div que esta abajo no responden como si el div de arriba bloqueara el contenido de lo que esta debajo, existe alguna forma de que el div que esta arriba no bloquee el contenido de lo que esta por debajo?

desde ya gracias por leer mi consulta

Salu2

[Ruben_JD]

Hola djaevi, coloca en el div de fondo la instruccion css position: absolute y en el div sobre position: relative, o absolute los dos o relative igual en los dos, a ver como te va.

[djaevi]

Hola Ruben ante todo gracias por responder en efecto la solucion no resulto :S dejo una imagen aver si les aclaro mas mi situacion, se puede ver que el div marcado en azul es el que va por debajo y el que va marcado de rojo esta por encima, y es en la parte donde se cruzan que los botones del flash que esta abajo no funcionan, aclaro que ya le puse al flash el metodo wmode transparent asi q no creo q sea eso, aqui la imagen:



Salu2 y gracias

[PrendekZ]

Iniciado por djaevi

Hola Ruben ante todo gracias por responder en efecto la solucion no resulto :S dejo una imagen aver si les aclaro mas mi situacion, se puede ver que el div marcado en azul es el que va por debajo y el que va marcado de rojo esta por encima, y es en la parte donde se cruzan que los botones del flash que esta abajo no funcionan, aclaro que ya le puse al flash el metodo wmode transparent asi q no creo q sea eso, aqui la imagen:



Salu2 y gracias

En realidad mucho texto pero no dices nada, podrías mostrar una imagen como lo quieres y también otra imagen del problema que sale?

a la hora de realizar preguntas también tenga presente: Colocar código HTML y CSS para saber que problema tiene, ya que no somos adivinos.

Saludos!

[djaevi]

Creo que la imagen es clara y en si la pregunta es bastante concisa y no necesito una solucion precisa para mi caso, necesito saber basicamente como poner 2 divs superpuestos y que al superponerlos el div de arriba no me bloquee el contenido del de abajo, como muestro en la imagen mi problema es que el div marcado en rojo (z-index:2) no deja presionar los links del de abajo en la parte donde estan superpuestos con el div marcado en azul (z-index:1), si sigue sin entenderse mi pregunta avisenme q trato d ver q puedo hacer, gracias x tomarte el tiempo en leer mi duda y responder.

Salu2

[PrendekZ]

@djaevi2 creo que eso lo haz hecho con CSS y HTML, no? Agradecería si colocarás el código para poderte ayudar, ya que me parece extraño que no funcione!

[djaevi]

Bueno aqui va el codigo en efecto lo hice con html y css.

Código HTML:

<div id="body">
 
CODIGO DE LA PELICULA FLASH (es muy largo y no creo q sea necesario ponerlo es el que viene por defecto con el dreamweaver, recuerd0 que coloque el parametro wmode transparent para que el flash se transparente bien).
 
</div>
 
<div id="foot">
 
<img id="footImg" src="../img/bullets/bottom-center.png"/>
 
</div>
 

Estilos:

Código CSS:

#body {
position:relative;
top:-11px;
width:100%;
display:block;
background-color:#B9D8FD;
z-index:2;
height:auto;
text-align:center;
}
 
#foot {
text-align:left;
position:relative;
top:-11px;
width:100%;
background-image:url(../img/bullets/bottom-left.png);
background-repeat:x-repeat;
height:200px;
text-align:right;
width:100%;
z-index:3;
}
 

Como veras el div body es el que en la imagen tiene el flash y el div foot es el de los arboles, el div foot tiene 200px de alto y overflow:visible, ya q la imagen del arbolito es un png de 283px, tambien he probado usar la imagen del div como fondo en lugar de poner el tag img pero no ha resultado, gracias por tu paciencia jeje.

Salu2

[Ruben_JD]

Dificil verlo en una simple imagen, porque no mejor cargas la imagen de fondo en el:

Código CSS:

body{background: url(tuimagen) no-repeat fixed bottom;}
 

asi tendrias un solo div el del swf con fondo transparente y podrias utilizar los botones, colocandolo donde quieras utlizando:

Código CSS:

#swf{
position:absolute;
top=50%; /* una medida para centrarlo o valor px*/
left=50%; /* una medida para centrarlo */
width ...
height: ..
}
 

[PrendekZ]

Ruben eso le eh dicho, es dificil verlo así, además mejoro su código:

#swf{
position:absolute;
top:50%;
left:50%;
width:400px; /* cualquier valor, el que necesites */
height:200px; /* cualquier valor, el que necesites */
margin-top:-100px; /* Este valor es negativo y es la mitad de height */
margin-left:-200px; /* Este valor es negativo y es la mitad de width*/
}

Creo que igual este código no funcionaria creo yo!

[Ruben_JD]

Si no sube el codigo completo, o nos muestra un ejemplo en un sitio web, asi no podre ayudarle mejor.
PrendekZ si ese era el codigo que no recordaba.
djaevi porque no pruebas primero solamente con el codigo css dandole un color, tamaño y posicion a cada div, el contenido de los div quitalos un momento, una vez ubicados correctamente los div sobrepuestos o no coloca el contenido de los div, te daras cuenta en donde o porque se sobrepone el uno del otro.
ojo el div del swf tiene que estar sobre el div del fondo para poder utilizar sus botones, y no al reves.

[djaevi]

Gracias por responder chicos miren les dejo un ejemplo mucho mas basico de lo que necesito el codigo entero es este sencillo html donde puse 2 divs de 500 de ancho x 300 de alto que se superponen, el de abajo llamado caja 1 tiene un link que esta en la parte superpuesta con el div caja 2, para que se entienda yo necesito trabajar transparencias y lograr que los botones y cosas interactivas que van en el fondo sigan andando. digamos que lo que necesitaria lograr en este ejemplo es lograr que el link funcione.

aca el codigo...

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo</title>
<style>
    #caja1 {
        width:500px;
        height:300px;
        position:relative;
        display:block;
        background-color:#FF6600;
    }
    #caja2 {
        width:500px;
        height:300px;
        position:relative;
        top:-200px;
        display:block;
        background-color:#3366FF;
        opacity:0.5;
    }
</style>
</head>
 
<body>
    <div id="caja1">
        <BR /><BR /><BR /><BR /><BR /><BR />
        <a href="#"> Mi Link </a>
    </div>
    <div id="caja2">
    </div>
</body>
</html>
 

gracias x intentar ayudarme espero haber sido mas claro se que les demanda tiempo hacerlo.

Salu2

[Ruben_JD]

lo que deseas no se puede, es como si quisieras cojer un reloj que esta en una vitrina de vidrio, que te lo impide es el vidrio.

[djaevi]

Ok muchas gracias igualmente por su ayuda a los 2 y x tomarse el tiempo en contestar, lo solucione re acomodando las imagenes y los estilos.

Saludos

[sanxuan]

Puede que te funcione si lo que tienes encima no te tapa los controles del flash.
Me explico. No se trata de si la capa superior es o no transparente y deja ver lo que hay detrás.
El problema es que no solape los botones.
Se trataría de crear lo que va arriba en capas del tamaño que necesiten pero que no oculten los controles. Estas capas las posicionarias por ejemplo con top y left despues de darles la propiedad position:absolute.
De todas formas no te puedo asegurar que vaya a funcionar. Nunca he probado a hacerlo.