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>