HTML y CSS: Ejemplos de layouts
(1 votos, promedio: 5,00 de 5)
Cargando...Maquetación de una página web a dos columnas con ancho fijo.
Establecer los elementos dentro de un diseño web (maquetación) empleando CSS correctamente, puede ser algo bastante complicado para los novatos. Y esto sucede porque no siempre se comprende en forma correcta. Por esta razón es que hoy comenzamos una serie de artículos relacionados con la creación de layouts, en todas las formas posibles de hacerlo.
Por supuesto que lo más sencillo y más empleado es la creación de layouts fijos, que es con lo que comenzaremos en este artículo. Para comprender mejor el desarrollo en cada paso, hemos optado por darle colores brillantes a las diferentes capas, con la finalidad de que puedan ver como se comportan los elementos.
Para todos los casos, utilizaremos la distribución clásica, colocando un “header”, una capa central donde van los contenidos divididos en columnas y un pie de página.
Lo único que variaremos serán las capas que se encuentran en la capa central. De esta forma, podemos ya establecer la primera distribución de capas y el encabezado de la página de ejemplo, que tiene el siguiente código HTML:
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Layout fijo</title> <link href="css/estilo.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- Contenedor para toda la página --> <div id="contenedor"> <!-- Capa destinada al header --> <div id="cabecera"> </div> <!-- Capa de contenidos, columnas, etc. --> <div id="principal"> </div> <!-- Capa para el pie de página --> <div id="pie"> </div> <!-- Cierre del contenedor de toda la página --> </div> </body> </html>
Dado que se trata de una página de ancho fijo, debemos en primer lugar, establecer el ancho de toda la página, además de los márgenes automáticos para que la misma quede centrada. Es por ello que hemos establecido una capa contenedora (div id=”contenedor”). También es posible hacerlo en cada una de las capas hijas (“header”, “principal” y “pie”), pero resulta más sencillo y lleva menos líneas de código de esta forma.
body {
margin: 0;
padding: 0;
background: #777;
font-family: arial, helvetica, sans-serif;
}
#contenedor {
width: 900px;
margin: 0 auto;
}
#cabecera {
background: #f60;
}
#principal {
background: #fff;
display: table;
}
#pie {
background: #f60;
}
Para que las capas sean visibles, será necesario que tengan algo de contenido, por lo que de momento no podrán visualizar nada en el navegador, a pesar de que hemos dado el color de fondo a todas las capas para que posteriormente sean claramente diferenciables.
Ahora agregaremos el título de la página dentro de las etiquetas <h1> y </h1> dentro de la capa “header”, y algo de contenido en el pie de página, que es todo lo que llevarán en este ejemplo. Para darle algo de formato a estos elementos, agregaremos las siguientes líneas al archivo CSS:
#cabecera h1 {
margin: 0;
line-height: 90px;
text-align: center;
}
#pie p {
margin: 0;
text-align: center;
line-height: 40px;
}
Como puede apreciarse, ambas capas tienen su tamaño determinado por el elemento contenedor, a través de la propiedad “line-height”. Se han colocado los márgenes a cero para evitar que la capa contenedora se “mueva” con los márgenes que los elementos <h1> y <p> tienen por defecto.
Estructura a dos columnas
Hay muchas formas de conseguir la misma distribución, pero para este ejemplo hemos elegido la siguiente forma de hacerlo. Primero determinamos las capas, empleando dos divs con identificador “izquierda” y “central” y le agregamos algo de contenido de ejemplo para que adquieran algo de volumen para ver el ejemplo. Luego le agregamos las siguientes líneas al archivo CSS:
#izquierda {
width: 200px;
padding: 10px;
display: table-cell;
background: #fff;
}
#central {
padding: 10px;
background: #0f6;
display: table-cell;
width: 660px;
}
Determinamos el ancho de las capas de forma tal que sumadas ocupen todo el ancho de la capa contenedora, teniendo en cuenta que los márgenes y rellenos (padding) que les demos a cada una de ellas también deben ser sumados. En el caso del presente ejemplo, el ancho de la capa contenedora es 900px, y las dimensiones de las capas “izquierda” y “central” son:
Capa “izquierda”: 200px (width) + 10px (padding-left) + 10px (padding-right) = 220px
Capa “central”: 660px (width) + 20px (padding derecho e izquierdo) = 680px
220px + 680px = 900px
Importante: Esta forma de tomar las dimensiones es válida para los navegadores modernos. Para Internet Explorer 6 o anterior, los rellenos no deben ser sumados, por lo que las capas deberán ser de 220px y 680px de ancho respectivamente. Para ello, deberán crear otro archivo CSS para este navegador y crear el link condicional al mismo en forma de comentario.
Para que ambas capas se coloquen una al lado de la otra, hemos optado por darle el valor “table-cell” a la propiedad “display”, aunque pueden hacerse con ambas capas flotantes, o con una capa flotante dentro de la otra. Como dijimos antes, hay varias formas de hacerlo, pero hemos optado por este ejemplo por resultar más sencillo.
Luego, simplemente agregamos algo de contenido a ambas capas, como en el ejemplo, y tendremos el layout de ancho fijo a dos columnas. Pasar a un diseño a tres columnas es muy sencillo y se puede ver en el siguiente artículo:
Maquetar una web a 3 columnas con CSS
40 estructuras CSS listas para descargar. Layout Gala
Recojo aquí una página que a pesar de llevar un tiempo en Internet es realmente útil para todo diseñador web. Se trata de Layout Gala, que ofrece un archivo descargable con nada menos que 40 estructuras de páginas (layouts), con código CSS y HTML validado listas para adaptarlas a nuestros diseños.
En la página aseguran haberlas probado con:
- Internet Explorer 5.0, 5.5, 6 y la beta 2 de IE 7.
- Opera 8.5.
- Firefox 1.5.
- Safari 2.
Lo cual no está nada mal. Son estructuras tanto fijas como líquidas, sin duda puede ser un recurso muy útil a la hora de hacer una web.
Enlace a la página: Layout Gala
Enlace al archivo descargable: layouts en zip
- Responsable: Verónica Milán Gómez
- Finalidad: gestionar los comentarios que realizas en esta web.
- Legitimación: Consentimiento del interesado.
- Destinatarios: Hosting: Cyberneticos Hosting, S.L. Con domicilio en UE. Mi hosting es 100% español y 100% seguro
- Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en admin@lawebera.es así como el derecho a presentar una reclamación ante una autoridad de control.
- Información adicional: En la política de privacidad de LaWebera.es encontrarás información adicional sobre la recopilación y el uso de su información personal por parte de Verónica Milán Gómez, incluida información sobre acceso, conservación, rectificación, eliminación, seguridad y otros temas.
- Los comentarios de esta web no tienen caracter legal ni oficial. Hacemos lo mejor por el usuario y por dar información fidedigna, pero no somos infalibles. Si decides seguir los consejos vertidos en esta web, es bajo tu única responsabilidad.