Hojas de estilo con 3 columnas, mas Encabezado y Pie de Pagina
Hoy les voy a contar como hacer una pagina con tres columnas, a la cual le agregamos un encabezado y un pie de pagina o footer
Para ello necesitamos 2 archivos, uno que sera nuestra hoja de estilos (abc.css) y el otro donde usaremos los estilos (index.htm)
EL codigo del abc.css es asi:
//Hoja de estilo para presentacion en tres columnas
//Realizado pro Veperu.com
#container {width:800px; }
#head{ width:800px; background-color:#666666; }
#izq{ width:200px; background-color:#999999; float:left; }
#centro{ width:400px; background-color:#FFFFFF; float:left; }
#der{ width:200px; background-color:#999999; float:left; }
#foot{ width:800px; background-color:#666666; clear:both; }
Mientras que el archivo index.htm, tendra este codigo, todo lo explicare mas abajo.
<style type="text/css">
<!–
@import url("abc.css");
–>
</style>
</head><body>
<div id="head"><h1>ENCABEZADO</h1></div>
<div id="container">
<div id="izq"><h2>Izquierda</h2>
<p> </p>
</div>
<div id="centro"><h2>Centro</h2>
<p> </p>
</div>
<div id="der"><h2>Derecha</h2>
<p> </p>
</div>
</div>
<div id="foot"><h1>Pie de Pagina</h1></div>
Primero voy a explicar las propiedades del abc.css
width: esta propiedad nos da el ancho de la capa o columna
background-color: nos da el color de fondo de nuestra capa.
Float: Alinea las capas. Esta propiedad lo que hace es que el navegador trate de alinear todo hacia el sentido dado en la misma linea
Clear Both: lo que hace es asegurarse que comenzara a escribir esta capa por debajo de la ultima linea utilizada.
Ahora si, vamos a ver lo importante, vamos a explicar el archivo index.htm. Basicamente lo que estoy haciendo es una capa contenedora (que se puede obviar, pero es mejor dejarla) la cual tendra en su interior a las capas Izquierda, Centro y derecha. Tanto el header (encabezado) como el Footer (el pie de pagina) iran por fuera del contenedor. En el caso del header, se puede insertar en la capa contenedora si asi lo desea. Esto es lo que estamos haciendo.
Ahora bien, lo primero que debemos hacer es llamar al archivo abc.css, para ello usamos las 5 primeras lineas, es decir todo lo que esta dentro de las etiquetas <Style></style> Esto se debe colocar antes de la etiqueta <body>
Lo siguiente es comenzar a llamar a las diferentes capas que se encuentran en nuestra hoja de estilo, para ello usamos las etiquetas <div> con el atributo id="nombre_de_la_capa"
Por cada capa o columna que deseamos poner, debemos utilizar una etiqueta con su respectivo cierre. En este caso abrimos la capa "head", escribimos el texto deseasdo (o agregamos imagenes o lo que se desea colocar) y la cerramos. A continuacion, abrimos la capa container, la cual se mantendra abierta hasta antes de colocar el footer. Si se fijan en el codigo, luego de la columna "derecha" veran dos </div> juntos. El primero cierra la capa derecha y el segundo, cierra el container.
Por ultimo agregamos el footer y listo. Grabamos y probamos. Si hicimos todo bien nos deberia salir algo asi:
Consideraciones finales:
- El ancho de las 3 columnas sumadas, deben ser igual o menor al ancho del container
- Si deseamos poner el encabezado dentro del container, debemos hacerlo asi <div id="container><div id="head">ENCABEZADO</div>y continuamos con el resto de las capas.
- SI no deseamos usar color de fondo en las capas, eliminamos la propiedad background-color en el archivo abc.css
- Podemos aplicar este mismo estilo a una pagina dinamica (PHP por ejemplo) y en lugar de escribir todo el encabezado una y otra vez, simplemente creamos el archivo head.php y lo incluimos dentros de los <dv></div>
- Recuerden hacer el ancho total del container como maximo de 800px, esto es para aquellas personas que usan la resolucion de 800×600 en sus monitores.
Creo que es todo, si les queda alguna duda, escriban que con gusto la respondere.
Salu2
Fecha: 26 / 06 / 07
Muy bueno el articulo, lo agregue a mis bookmarks de del.icio.us para futura referencia, aunque yo lo hubiera hecho en 960px como maximo…
en general en mis sitios, el porcentaje de usuarios en 800×600 es tan bajo que no vale la pena limitar a la mayor parte de los usuarios (1024*768).
saludos y gracias por el articulo, buenisimo.
Gracias Gonzlo por tus comentarios.
En mis diseños siempre uso los 800 px de ancho, se que no hay muchos usuarios que tienen esta resolucion en sus monitores, pero creo que siempre se debe pensar en el bien de todos los que nos visitan, pero por supuesto que tambien es valido hacerlo del ancho que mejor nos convenga, eso depende de cada uno.
SI lo deseas tambien puedes utilizar los porcentajes, que “leen” la resolucion del monitor y aplican el diseño para que encaje bien. Igual esto ultimo no es lo mas recomendado, pero he visto gente que lo usa.
Salu2
CSS a 3 columnas…
EN esta noticia se explica en detalle la forma de poder diseñar un sitio web con 3 columnas, un encabezado y un pie de pagina. Todo ello usando hojas de estilo (CSS) en lugar de las famosas tablas. Vale la pena la lectura para poder probarlo y hacerle…
Hola!
Muy bueno el artÃculo. Estoy empezando con esto de las capas.
¿Cómo se puede hacer para que la capa siempre tenga un ancho fijo? Es decir, que cuando meta contenido en vez de crecer en horizontal lo haga en vertical.
Muchas gracias!
Para ello utilizas la etiqueta
width:250px;
Donde le puedes dar el valor que quieras, le puse 240 por darte un ejemplo.
O tambien puedes usar porcentajes, para ello harias algo asi.
width:30%;
DOnde le dara un ancho del 30 % de la pagina. Le puedaes dar el valor que desees.
Cualquiera de las dos formas las debes colocar en el archivo CSS
Salu2