Todos sabemos que trabajar con tablas está obsoleto por muchos motivos; accesibilidad, carga de contenido, estándar, etc.
Ahora lo común es usar XHTML strict con CSS. Esto trae muchas ventajas, por la potencia de CSS, pero también nos da muchos dolores de cabeza, y uno de ellos es la posición de los elementos.
Bueno he estado practicando y probando esta técnica por bastante tiempo, y lo bueno es que pasa las pruebas de W3C y accesibilidad, se ve igual en la mayoría de los navegadores (IE 6-7, FF 1-2, Opera, Safari, entre otros) y es muy fácil de aprender a usarla.
La técnica:
Esto no es algo nuevo ni una revolución pero quiero divulgarla por si alguien no la conoce. En mi caso yo la descubrí iterando con los valores de la propiedad position.
El código:
Es muy simple de implementar, debemos usar un div que contenga todo, aplicarle position:relative y darle el ancho del diseño de la página, y a cada div interior position:abolute.
Y si quieren que el contenido se vea centrado sólo deben usar el modo que explico en mi anterior post de centrado.
Que fácil no?!
Si usas Dreamweaver es mucho mas fácil trabajar ya que en modo de diseño sólo arrastras las capas.
Descarga el ejemplo
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>relative absolute</title>
<style type="text/css">
#contenedor {
position:relative;
width: 940px;
margin-right: auto;
margin-left: auto;
}
#cabecera {
position:absolute;
top:0px;
width: 940px;
height: 76px;
left:0px;
color: #FFFFFF;
background-color: #003366;
}
#menuIz {
position:absolute;
top:79px;
left:1px;
width: 117px;
height: 163px;
background-color: #CCCCCC;
}
#contenido {
position:absolute;
top:79px;
left:125px;
width: 816px;
height: 163px;
background-color: #99CC99;
color: #333333;
}
#pie {
position:absolute;
top:246px;
left:1px;
width: 940px;
height: 77px;
background-color: #666666;
color: #FFFFCC;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<h1 align="center">Cabezcera</h1>
</div>
<div id="menuIz">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<div id="contenido">Contenido del documento...</div>
<div id="pie">
<div align="center">
<h3>Pie de página</h3>
</div>
</div>
</div>
</body>
</html>
2 comments:
Está muy bien, pero existe un problema con los absolute.
El pie de página es fijo. Si el texto crece el pie no aumenta, con lo que perdemos dinamismo.
Very nice blog yyou have here
Post a Comment