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.
Usuarios que han visto este tema también han visto...
- Insertar una imagen de fondo en un TEXTAREA
- Textscroll en CSS
- Filtro de imagenes mediante CSS (invertir imagenes).
- Evitar que una página se imprima en CSS
- Cómo utilizar el Opacity con CSS
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.