Foros Programación Cliente

Div inferior swf al 100% y superior centrado

4 4 Respuestas Miércoles 20 de mayo, 2009
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!!
Registrado desde 06/09/07
Número de posts: 61
  • Avatar de AS AS Registrado desde 06/09/07 / Número de posts: 61
    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>
    Publicado hace 3 años
  • Avatar de P. P. Registrado desde 19/03/09 / Número de posts: 17
    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;
    }

    P.

    website: www.onelittleweb.com
    contacto: email
    Publicado hace 3 años
  • Avatar de P. P. Registrado desde 19/03/09 / Número de posts: 17
    Sobra un table-cell :)

    P.

    website: www.onelittleweb.com
    contacto: email
    Publicado hace 3 años
  • Avatar de AS AS Registrado desde 06/09/07 / Número de posts: 61
    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>




    Publicado hace 3 años