Buenas, les presento un problema que tengo con un par de divs, ya que he estado buscando por el foro y no encuentro nada parecido que pueda dar la respuesta.
Veamos, tengo un fondo, sobre el cual le pongo dos divs, uno de ellos hace como un marco, mientras que en el otro cargo un iframe, donde se ve el esto de mi pagina
El marco lo tengo mas o menos centrado y como es lógico, el iframe se carga dentro de este marco.
También tengo otro dos divs, uno que hace de botón home y otro de barra de hora. Estos dos se cargan encima del iframe y de momento no me dan muchos problemas
Para que vean a que me refiero, aquí les dejo una imagen de como queda:
http://imageshack.us/photo/my-images/15/bieniu.png
Y dirán, donde está el problema? Bien, cuando abro esta misma página en una pantalla mas grande, se va todo al garete, miren:
http://imageshack.us/photo/my-images/585/malp.png
Aquí les dejo el CSS de los divs y el poco html que tiene index.html
Código HTML:
<style type="text/css">
#iframe {
width:0%;
height:0%;
position:relative;
top:13%;
left:20%;
}
#marco {
width:0%;
height:0%;
position:relative;
top:2.20%;
left:14.38%;
}
#cajaReloj {
background-color:black;
width:726px;
height:35px;
position:absolute;
top:15%
}
#botonHome {
width:0%;
height:0%;
position:relative;
left:70%;
top:13.35%;
}
body{
background: url(img/fondo.png) repeat;
}
</style>
</head>
<body onload='actualizaReloj()'>
<div id='marco'>
<img src='img/marco.png'> </img>
</div>
<div id='iframe'>
<div id='cajaReloj'>
<table cellpadding='0' cellspacing='8'>
<tr>
<td id="Fecha_Reloj"> </td>
</tr>
</table>
</div>
<iframe src="menu.html" name="menu" height='455' width='724' scrolling='no'> </iframe>
</div>
<div id='botonHome'>
<a href='index.html'> <img src='img/home.png'> </a>
</div>
</body>
</html> Supongo que el problema vendrá por la resolución de pantalla...pero al estar hecho por porcentajes, supuse que no debería dar problemas...no?
Gracias