Problemas con capas div

diego1311 · #1 (**permalink**) 10/12/2010, 22:35

Hola a todos, en un proyecto tengo un problema con las capas div similar al ejemplo que les muestro.

En el siguiente ejemplo, se supone que devería aparecer una franja negra delante de la pagina de google pero no sucede asi, solo se ve la franja cuando quito el <iframe> al parecer este objeto estropea las capas.

Código HTML:

Ver original<!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=utf-8" />
<title>Documento sin título</title>
</head>
<body style="margin:0px; overflow:hidden;">
 
<div style="position:absolute; width:60%; left:20%; height:60%; top:20%; background-color:#CCC;">
    <div style="position:absolute; z-index:0; width:100%; height:100%; background-color:#FF0">
        <iframe src="http://www.google.com" width="100%" height="100%"/>
    </div>
    <div style="position:absolute; width:100%; background-color:#000000;  z-index:1; height:100px;" id="div_problema"/>
</div>
 
</body>
</html>

Cómo puedo hacer que el <iframe> no genere el conflicto con el div de color negro?

Gracias, espero que me puedan ayudar

carlospc · #2 (**permalink**) 11/12/2010, 07:48

Prueb alternando la capa que contiene el iframe y la capa franja... ¿?

Suerte..

alwaysdavis · #3 (**permalink**) 11/12/2010, 07:49

Hola diego1311

Lo que pasa es que el iframe te corta el <div> porque hay que cerrarlo así:

Código HTML:

Ver original<!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=utf-8" />
<title>Documento sin título</title>
</head>
<body style="margin:0px; overflow:hidden;">
 
<div style="position:absolute; width:60%; left:20%; height:60%; top:20%; background-color:#CCC;">
    <div style="position:absolute; z-index:0; width:100%; height:100%; background-color:#FF0">
        <iframe src="http://www.google.com" width="100%" height="100%"></iframe>
    </div>
    <div style="position:absolute; width:100%; background-color:#000000;  z-index:1; height:100px;" id="div_problema"/>
</div>
 
</body>
</html>

Por lo demás perfecto.

Espero que te sirva de ayuda. Saludos

diego1311 · #4 (**permalink**) 11/12/2010, 11:05

Si gracias, ya cerre bien el ifame

Portgaz · #5 (**permalink**) 11/12/2010, 11:19

Cita:

Iniciado por diego1311

Si gracias, ya cerre bien el ifame

Y ya se solucionó tu problema??

diego1311 · #6 (**permalink**) 11/12/2010, 23:09

Claro eso fue lo que quise decir, el problema ya se solucionó