subscripción
BLOG - 3wstudio.com.ar
Crear una página centrada sin usar tablas
Junio 29th, 2006 - [Enlace local]
Bueno, 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, muuuy 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 mas claros, fáciles de mantener, se indexan mejor a los buscadores (múy util si queremos posicionarnos en google).
Para empezar vamos a ver como crear una pagina "clasica", o sea, que contenga una cabecera, un menu, el contenido y un pie y a al 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" esta "todo" con solo centrar esta capa, se centrara toda la información de nuestro sitio.
El CSS que logra hace 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, quedo la estructura de nuestro sitio armada.
En un próximo posteo hablare de como crear un menú usando hojas de estilo en vez de tablas.
» Leer más, comentarios, etc...