Posicionamiento de divs con tamaño pantalla

akelare92 · #1 (**permalink**) 16/11/2012, 11:40

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

C2am · #2 (**permalink**) 17/11/2012, 02:15

Por qué no metes todo dentro del div marco?

Código HTML:

Ver original<div id='marco'>
        
        <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>
 
</div>

Y pones la imagen marco como fondo de "marco".

Además tienes un error cuando insertas la imagen:

Código HTML:

Ver original<img src='img/marco.png'> </img>

La etiqueta <img> se cierra sobre sí misma:

Código HTML:

Ver original<img src='img/marco.png' />

Otra cosa, esto de los marcos, e iframe es como aprender a conducir con una carreta tirada por caballos. Ya no se hace así.

Saludos

akelare92 · #3 (**permalink**) 17/11/2012, 17:49

Lo de la etiqueta img un fallo mio, se me escapo D:

Antes de probar lo que comentas del marco, cual seria la alternativa al iframe? teniendo en cuenta que es para algo tan sencillo para cargar unas pequeñas paginas ahi dentro

Googleando, veo que se debe de utilizar el <object type="text/html"> , pero viene a ser lo mismo no?

C2am · #4 (**permalink**) 17/11/2012, 17:59

Hola,
Investiga sobre ajax.
Existen librerias y framework tipo jquery etc, que te hacen más fácil la implementación.

Saludos