Div inferior swf al 100% y superior centrado
Hola a todos,
a ver si alguien se ha encontrado con este problema, que va de divs y flash.
La situación es la siguiente: tengo q mostrar
1. en una capa inferior una animación al 100% (div1 = .swf)
2. encima colocar una trama (div2 = .gif)
3. y en la capa superior, otro flash centrado (div3 = .swf)
La peculiaridad de éste último es q las dimensiones pueden ser mayores al espacio disponible del navegador.
Los 2 primeros divs están resueltos. Pero, el 3º no logro solucionarlo.
Alguien se ha encontrado con un problema como éste? Permitidme recordad q la peculiaridad del 3er div es q el swf allí albergado puede ser mayor q el navegador.
Con lo cual éste último tendría q funcionar "como una máscara", sin aparecer el scroll!
Alguien se ha encontrado con este problema o conoce alguna pág q lo haga?
Gracias!!
as_11
Gracias P. Um ... aunque el código no me ha funcionado.
Copio aquí el q sí me funciona, por si alguien se encuentra con este problema en un futuro:
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#back {
height: 100%;
width:100%;
float:left;
position:absolute;
background:#FF3366;
}
#malla {
background-image: url(bg_malla.gif);
width:100%;
height:100%;
position:absolute;
}
#middle {
height: 100%;
position:relative;
}
</style>
pelayo
Sobra un table-cell :)
pelayo
Prueba con esto, Al menos en el IE7 que tengo a mano me funciona:
#middle {
height: 100%;
width: 100%;
position:absolute;
left:0px;
top: 50%;
display: table-cell;
vertical-align: middle;
display: table-cell;
z-index: 10;
}
as_11
Hola domestikos,
vuelvo a retomar este hilo. No logro solucionar este problema de las divs, q os comentaba en el anterior post.
Os resumo el problema. Tengo 3 capas apiladas, una encima de otra:
1. una inferior donde aparecerá una animación al 100% (div1 = #back)
2. encima colocamos una trama (div2 = #malla)
3. y en la capa superior, aparecerá un flash centrado vertical y horizontalmente a tamaño real (div3 = #middle)
El problema lo tengo con la 3a capa, q hace un salto de línea y se coloca a continuación del resto. Concretamente con Explorer!!!!!
Espero q alguien pueda echarme un cable, plis!!
Aquí tenéis el código, pq quizás encontréis enseguida el problema!!
Ojalá podáis ayudarme!!!
Gracias por adelantado!
Aquí el código:
<html><head>
<title>tests divs</title>
<style type="text/css">
html {
height: 100%;
}
body {
text-align:center !important;
height: 100%;
margin: 0;
padding: 0;
background-color:#7DBA00;
color: #ccc;
}
#back {
height: 100%;
width:100%;
float:left;
position:absolute;
top:0;
left:0;
z-index: -1; /* CLAVE PARA Q FUNCIONE CORRECTAMENTE EL ZINDEX EN IEXPLORER*/
}
#malla {
/* ELIMINADO PROVISIONALMENTE background-image: url(bg_malla.gif); */
height: 100%;
width: 100%;
position: fixed;
z-index: 2;
}
#middle {
height: 100%;
position:relative;
z-index: 10;
}
</style>
</head>
<body>
<div id="back">back</div>
<div id="malla">malla</div>
<div id="middle">MIDDLE Esta capa es la q tiene problemas</div>
</body>
</html>