Crear página centrada sin usar tablas
La actual dirección del desarrollo web, es dejar de usar las tablas para crear la estructura de la página. Las tablas son tediosas, "difíciles" de usar, es complicado dejar cada cosa en su lugar, muy complicado de mantenerlas, se va creando un chorizo de tablas, tablas una de otras dentro de otras y dentro de otras, nos hacen recordar a toda la familia :P... en fin...
Las páginas ahora se maquetan con divs, listas y principalmente con CSS, es más, ya hay proyectos que maquetan todo el sitio solamente con listas y CSS.
Claro que esto lleva a que uno aprenda a programar con hojas de estilo, pero realmente vale la pena hacerlo. Los sitios quedan más claros, fáciles de mantener, se indexan mejor a los buscadores (múy util si queremos posicionarnos en Google).
Para empezar vamos a ver cómo crear una pagina "clásica", o sea, que contenga una cabecera, un menú, el contenido y un pie, y a la vez que quede centrada y sea compatible con IE y Firefox.
Primero debemos crear nuestra estructura html de la siguiente manera:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Prueba</title>
</head>
<body>
<div id="content">
<div id="cabecera"></div>
<div id="menu"></div>
<div id="contenido"></div>
<div id="pie"></div>
</div>
</body>
</html>
Como vemos en el código de arriba, tenemos una capa "content" que va a contener toda la información. Dentro de ella se encuentran otras capas "cabecera", "menu", "contenido, "pie". Cada una de estas capas las iremos posicionando dentro de "content" para lograr nuestra meta. Como dentro "content" está "todo", con solo centrar esta capa, se centrará toda la información de nuestro sitio.
El CSS que logra hacer esto es el siguiente:
<style>
body {
margin:0;
padding:0;
text-align:center;
}
#content {
text-align:left;
margin:auto;
background-color:#ff0;
width:800px;
height:800px;
}
#cabecera {
width: 800px;
height:100px;
background-color:#f00;
}
#menu {
width:150px;
height:650px;
float:left;
background-color:#888;
}
#contenido {
width:650px;
height:650px;
float:left;
background-color:#ccc;
}
#pie {
clear:both;
width:800px;
height:50px;
background-color:#0f0;
}
</style>
Y listo, quedó la estructura de nuestro sitio armada.
|
