Problemas con iframes

mgm2030 · #1 (**permalink**) 21/01/2016, 14:27

Hola

A ver si me podeis ayudar. Tengo una pagina en la q uso dos iframes. el problema q tengo es q no soy capaz de ajustar los iframes al archivo q se enlaza. Mantiene una posicion fija. Sabriais como puedo solucionarlo? tb he visto por ahi que los iframes estan en desuso. q alternativas hay ahora mismo?

Código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

<style type="text/css">
	
body{
	text-align: center;
	padding: 0px;
	margin: 0 auto;
	width: 100%;
	/*height: 100%;*/
	background: #8A9875;
	

}
html{
	width: 100%;
	/*height: 100%;*/
}
nav{
	
	background-color: #34626B;
	width: 100%;
	height: auto; /*Junto a overflow: hidden; aplicará a nuestro elemento nav el mismo alto que el más alto de sus elementos hijos */ 
            margin: 0 auto; /* Centro el contenedor */
            overflow: hidden;
            text-align: left;
            
	
	
}
ul{
	padding: 0px;
	margin: 0px 0px 8px 0px;
	text-align: center;
	list-style-type: none;
	border-width: 0px;
	border-style: solid;			
	border-color: #CCC;
	
	float: left;
            list-style-type: none;
            padding: 0; 
            /* AÑADIMOS */
            position: relative; 
            left: 50%;
background-color: #34626b; 

	

}
li{
	display: inline;
	text-align: center;
    padding: 4px;
    text-decoration: none;    
    border: 0px;
	text-transform: uppercase;
    font-weight: bold;
    color: #FFFFFF;
    /*width: 90px;*/
 
 float: left;
            /* AÑADIMOS */
            position: relative; 
            right: 50%;  

	
}

ul li a {
	padding: 10px;
	width: 80px;
}
p {

	margin: 0px;
	padding: 5px;
}


/*Base de la pagina*/
#cuerpo{
	/*text-align: center;*/
	width: 65%;
	/*height: 100%;*/
	margin: 0 auto;
	border: 0px;
	background-color: ##8A9875;
	
}

/*Cabecera*/
#cab{
	
	/*height: 20%;*/
	width: 100%;
	background: #366880;
	margin: 0 auto;
	padding-top: 2%;
	border: 0px;
}
#portada{
	margin: 0 auto;
	padding: 0px;
	border: 0px;

}
#imagen{
	width: 90%;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;

}
/*Fin cabecera*/

/*Body*/
#con {

	width: 100%;
	/*height: 60%;*/
	background: #34626B;
	margin: 0 auto;
	padding: 0px;
	border: 0px;


}
/*#contenido{
	width: 100%;
	background: #366880;
	height: 90%;
	text-align: center;
	margin: 0 auto;
	padding: 0px;
	border: 0px;
	padding-top: 5px;

}*/
#contenedor {

	width: 90%;
	height: 95%;		
	background: #6C9CDB;
	margin: 0 auto;
	padding: 0px;	
	border: 0px;
	
	

}
#info_iframe{
	width: 100%;
	/*height: 30%;*/	
	border: 0px;
	padding: 0px;
	border: 0px;
}
#texto{
	width: 100%;
	height: 100%;	
	border: 0px none;
	color: white;
	padding: 0px;
	border: 0px;
}

/*Fin Body*/

/*Footer*/
#pie{
	width: 100%;
	background: #34626B;	
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;	
	padding: 0px;
	margin: 0px auto;
	
	
	/*position: fixed;
	bottom: 0px;*/
	/*left: 0px;*/
	

}
.btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 2;
  -moz-border-radius: 2;
  border-radius: 2px;
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  padding: 3px 20px;
  margin: 0px auto;
  text-decoration: none;
  float: left;
  display: block;

}

.btn:hover {
  background: #34626b;
  background-image: -webkit-linear-gradient(top, #34626b, #3498db);
  background-image: -moz-linear-gradient(top, #34626b, #3498db);
  background-image: -ms-linear-gradient(top, #34626b, #3498db);
  background-image: -o-linear-gradient(top, #34626b, #3498db);
  background-image: linear-gradient(to bottom, #34626b, #3498db);
  text-decoration: none;
}

</style>

<script type="text/javascript">
function loadInfo(num){

			number = num;

			if (number == 1){
				var ruta_icon = "info_icon.html";
				var iframe = document.getElementById("info_iframe");
				iframe.setAttribute("src", ruta_icon);

			}
			if (number == 2){
				var ruta_icon = "info_icon.html";
				var iframe = document.getElementById("info_iframe");
				iframe.setAttribute("src", ruta_icon);


				archivo = "works.html"
				var contenido = document.getElementById("texto");
				contenido.setAttribute("src", archivo)
				contenido.height = "800";
			}
			if (number == 3){
				
				document.getElementById("texto").innerHTML = "";
				var ruta_icon = "contact.php";
				var iframe = document.getElementById("info_iframe");
				iframe.height = "600";
				var contenido = document.getElementById("contenido");
				iframe.setAttribute("src", ruta_icon);

			
			}
		}

	</script>

</head>
<body>

<nav id="menu">
					<ul>
						<li><a class="btn" href="index.html" > Home</a> </li>
						<li><a class="btn" onclick="loadInfo(1)"> Skill</a> </li>
						<li><a class="btn" onclick="loadInfo(2)"> Works</a> </li>
						<li><a class="btn" onclick="loadInfo(3)"> Contact </a> </li>
					</ul>	
				</nav>
<div id="contenedor">
						
					<iframe id="info_iframe" src="info.html"></iframe>			
					
					<iframe id="texto" src="content.html"></iframe>
</div>


	
</body>
</html>