Pues bien, no se como lograr la redimension de una pagina html de capas (div), he conseguido hacerlo con una imagen de fondo, pero no con lo que se me pide.
Se me pide lo siguiente:
Cita: Tomando como base el fichero ejemplo05.html incluido en el material proporcionado ,utilizarlas propiedades de posicionamiento y dimensionamiento para crear una hoja de estilo que permita redimensionar la página HTML en función del ancho de ventana.
No puedo utilizar javascript, sino estaría solucionando, la solución debe ser en html.
Este es el código html:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<!--METADATOS-->
<meta name="Author" content=""/>
<meta name="title" content=""/>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
<meta name="robots" content="all,index,follow,archive"/>
<meta name="revisit" content="5 days"/>
<meta name="revisit-after" content="5 days"/>
<meta name="resource-type" content="Homepage"/>
<meta name="Distribution" content="Global"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="description" content=""/>
<meta http-equiv="title" content=""/>
<meta name="DC.title" content=""/>
<meta name="DC.Description" content=""/>
<meta name="DC.Keywords" content=""/>
<meta name="DC.Creator" content=""/>
<!--FIN DE METADATOS-->
<!--CARGA CSS-->
<link rel="stylesheet" href="./style/ejemplo05.css" type="text/css"/>
<!--FIN CARGA CSS-->
<link type="image/x-icon" rel="shortcut icon" href="" />
<title>Ejemplo 5</title>
</head>
<body>
<div id="wrapper">
<!--HEADER-->
<div id="header">
<h1>HEADER O CABECERA</h1>
</div>
<!--FIN HEADER-->
<!--CONTENT-->
<div id="content">
<h1>CONTENIDO PRINCIPAL</h1>
<div class="col_izq">
<p>Div flotante izq</p>
</div>
<div class="col_izq">
<p>Div flotante izq 2</p>
</div>
<div class="col_izq">
<p>Div flotante izq 3</p>
</div>
<div class="col_der">
<p>Div flotante derecha</p>
</div>
</div>
<!--FIN CONTENT-->
<!--FOOTER-->
<div id="footer">
<h1>FOOTER O PIE DE PÁGINA</h1>
</div>
<!--FIN FOOTER-->
</div>
</body>
</html>
Y el código de la css:
Código:
h1{
text-decoration:underline;
}
#wrapper {
height:760px;
width:850px;
margin:auto;
border:3px solid black;
}
#header{
height:160px;
width:100%;
background:#A6A6A6;
margin-top:5px;
margin-bottom:5px;
overflow:hidden;
color:white;
text-align:center;
}
#content{
height:470px;
width:100%;
background:#99C2FF;
margin-top:5px;
margin-bottom:5px;
overflow:hidden;
color:blue;
text-align:center;
}
#footer{
height:110px;
width:100%;
background:#FFFF99;
margin-top:5px;
margin-bottom:5px;
overflow:hidden;
color:black;
text-align:center;
}
.col_izq{
float:left;
margin-left:5px;
margin-top:5px;
width:300px;
height:100px;
border:3px solid black;
}
.col_der{
float:right;
margin-right:5px;
margin-top:5px;
width:300px;
height:100px;
border:3px solid black;
}
/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }
.align-center { text-align: center; }
He intentado hacerlo con frame, con tablas y nada, estoy desesperado si alguien me puede echar una manilla, gracias de antemano.