comparte el articulo 

HTML y CSS: Ejemplos de layouts

Actualizado el 05/10/2013 < > 0 Comentarios

Resumen: 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

Publicado el 16/03/2011, última actualización 05/10/2013.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras