Vamos a comenzar a trabajar en el modelo de caja que se utiliza a día de hoy.

Plantilla

La plantilla que debe utilizarse comenzará a lucir esta forma.

Ejm 2.25

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<div id="agrupar">

<header id="cabecera">
<h1>Este es el título principal del sitio web</h1>
</header>

<nav id="menu">
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>

<section id="seccion">
<article>
<header>
<hgroup>
<h1>Título del mensaje uno</h1>
<h2>Subtítulo del mensaje uno</h2>
</hgroup>
<time datetime="2011-12-10" pubdate>publicado 10-12-2011
</time>
</header>
Este es el texto de mi primer mensaje
<figure>
<img src="http://minkbooks.com/content/myimage.jpg">
<figcaption>
Esta es la imagen del primer mensaje
</figcaption>
</figure>
<footer>
<p>comentarios (0)</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Título del mensaje dos</h1>
<h2>Subtítulo del mensaje dos</h2>
</hgroup>
<time datetime="2011-12-15" pubdate>publicado 15-12-2011
</time>
</header>
Este es el texto de mi segundo mensaje
<footer>
<p>comentarios (0)</p>
</footer>
</article>
</section>

<aside id="columna">
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>

<footer id="pie">
Derechos Reservados &copy; 2010-2011
</footer>

</div>
</body>
</html>

El ejm 2.25 provee una nueva plantilla lista para recibir los estilos CSS. Dos cambios importantes pueden distinguirse. El primero es que ahora varias etiquetas fueron identificadas con los atributos id y class. Esto significa que podemos referenciar un elemento específico desde las reglas CSS con el valor de su atributo id o podemos modificar varios elementos al mismo tiempo usando el valor de su atributo class.

El segundo cambio realizado a la vieja plantilla es la adición del elemento <div> mencionado anteriormente. Este <div> fue identificado con el atributo y el valor id=”agrupar”, y es cerrado al final del cuerpo con la etiqueta de cierre </div>. Este elemento se encarga de agrupar todos los demás elementos permitiéndonos aplicar el modelo de caja al cuerpo y designar su posición horizontal, como veremos más adelante.

Con el documento HTML finalizado es tiempo de trabajar en nuestro archivo de estilos.

Selector universal *

Comencemos con algunas reglas básicas que nos ayudarán a proveer consistencia al diseño.

Ejm 2.26

* {
margin: 0px;
padding: 0px;
}

Normalmente, para la mayoría de los elementos, necesitamos personalizar los márgenes o simplemente mantenerlos al mínimo. Algunos elementos por defecto tienen márgenes que son diferentes de cero y en la mayoría de los casos demasiado amplios. A medida que avanzamos en la creación de nuestro diseño encontraremos que la mayoría de los elementos utilizados deben tener un margen de 0 pixeles. Para evitar el tener que repetir estilos constantemente, podemos utilizar el selector universal.

La primera regla en nuestro archivo CSS, presentada en el ejm 2.26, nos asegura que todo elemento tendrá un margen interno y externo de 0 pixeles. De ahora en más solo necesitaremos modificar los márgenes de los elementos que queremos que sean mayores que cero.

 

Importante

Recuerda que en HTML cada elemento es considerado como una caja. El margen (margin) es en realidad el espacio alrededor del elemento, el que se encuentra por fuera del borde de esa caja (el estilo padding, por otro
lado, es el espacio alrededor del contenido del elemento pero dentro de sus bordes, como el espacio entre el título y el borde de la caja virtual formada por el elemento <h1> que contiene ese título). El tamaño del margen puede ser definido por lados específicos del elemento o todos sus lados a la vez. El estilo margin: 0px en nuestro ejemplo establece un margen 0 o nulo para cada elemento de la caja. Si el tamaño hubiese sido especificado en 5 pixeles, por ejemplo, la caja tendría un espacio de 5 pixeles de ancho en todo su contorno. Esto significa que la caja estaría separada de sus vecinas por 5 pixeles.

Nueva jerarquía para cabeceras

En nuestra plantilla usamos elementos <h1> y <h2> para declarar títulos y subtítulos de diferentes secciones del documento. Los estilos por defecto de estos elementos se encuentran siempre muy lejos de lo que queremos y además, en HTML5 podemos reconstruir la jerarquía H varias veces en cada sección como ya vimos con anterioridad. El elemento <h1>, por ejemplo, será usado varias veces en el documento, no solo para el título principal de la página web como pasaba anteriormente sino también para secciones internas, por lo que tenemos que otorgarle los estilos apropiados.

Ejm 2.27

h1 {
font: bold 20px verdana, sans-serif;
}
h2 {
font: bold 14px verdana, sans-serif;
}

La propiedad font, asignada a los elementos <h1> y <h2> en el ejm 2.27 permite declarar todos los estilos para el texto en una sola línea. Las propiedades que pueden ser declaradas usando font son: font-style, font-variant, font-weight, font-size/line-height, y font-family en este orden. Con estas reglas estamos
cambiando el grosor, tamaño y tipo de letra del texto dentro de los elementos <h1> y <h2> a los valores que deseamos.

Declarando nuevos elementos HTML5

Otra regla básica que debemos declarar desde el comienzo es la definición por defecto de elementos estructurales de HTML5. Algunos navegadores aún no reconocen estos elementos o los tratan como elementos inline (en línea). Necesitamos declarar los nuevos elementos HTML5 como elementos block para asegurarnos de que serán tratados como regularmente se hace con elementos <div> y de este modo construir nuestro modelo de caja.

Ejm 2.28

header, section, footer, aside, nav, article, figure, figcaption, hgroup {
display: block;
}

A partir de ahora, los elementos afectados por la regla del ejm 2.28 serán posicionados uno sobre otro a menos que especifiquemos algo diferente.

Centrando el cuerpo

El primer elemento que es parte del modelo de caja es siempre <body>. Normalmente, por diferentes razones de diseño, el contenido de este elemento debe ser posicionado horizontalmente. Siempre deberemos especificar el tamaño de este contenido, o un tamaño máximo, para obtener un diseño consistente a través de diferentes configuraciones de pantalla.

Ejm 2.29

body {
text-align: center;
}

Por defecto, la etiqueta <body> (como cualquier otro elemento block) tiene un valor de ancho establecido en 100%. Esto significa que el cuerpo ocupará el ancho completo de la ventana del navegador. Por lo tanto, para centrar la página en la pantalla necesitamos centrar el contenido dentro del cuerpo. Con la regla agregada en el ejm 2.29, todo lo que se encuentra dentro de <body> será centrado en la ventana, centrando de este modo toda la página web.

Creando la caja principal

Siguiendo con el diseño de nuestra plantilla, debemos especificar una tamaño o tamaño máximo para el contenido del cuerpo. En el ejm 2.25 agregamos un elemento <div> a la plantilla para agrupar todas las cajas dentro del cuerpo. Este <div> será considerado la caja principal para la construcción de nuestro modelo de caja (este es el propósito por el que lo agregamos). De este modo, modificando el tamaño de este elemento lo hacemos al mismo tiempo para todos los demás.

Ejm 2.30

#agrupar {
width: 960px;
margin: 15px auto;
text-align: left;
}

La regla en el ejm 2.30 está referenciando por primera vez un elemento a través del valor de su atributo id. El carácter # le está diciendo al navegador que el elemento afectado por este conjunto de estilos tiene el atributo id con el valor agrupar.

Esta regla provee tres estilos para la caja principal. El primer estilo establece un valor fijo de 960 pixeles. Esta caja tendrá siempre un ancho de 960 pixeles, lo que representa un valor común para un sitio web estos días (los valores se encuentran entre 960 y 980 pixeles de ancho, sin embargo estos parámetros cambian  constantemente a través del tiempo).

El segundo estilo es parte de lo que llamamos el Modelo de Caja Tradicional. En la regla anterior (ejm 2.29), especificamos que el contenido del cuerpo sería centrado horizontalmente con el estilo text-align: center. Pero esto solo afecta contenido inline, como textos o imágenes. Para elementos block, como un <div>, necesitamos establecer un valor específico para sus márgenes que los adapta automáticamente al tamaño de su elemento padre. La propiedad margin usada para este propósito puede tener cuatro valores: superior, derecho, inferior, izquierdo, en este orden. Esto significa que el primer valor declarado en el estilo representa el margen de la parte superior del elemento, el segundo es el margen de la derecha, y así sucesivamente. Sin embargo, si solo escribimos los primeros dos parámetros, el resto tomará los mismos valores. En nuestro ejemplo estamos usando esta técnica.

En el ejm 2.30, el estilo margin: 15px auto asigna 15 pixeles al margen superior e inferior del elemento <div> que está afectando y declara como automático el tamaño de los márgenes de izquierda y derecha (los dos valores declarados son usados para definir los cuatro márgenes). De esta manera, habremos generado un espacio de 15 pixeles en la parte superior e inferior del cuerpo y los espacios a los laterales (margen izquierdo y derecho) serán calculados automáticamente de acuerdo al tamaño del cuerpo del documento y el elemento <div>, efectivamente centrando el contenido en pantalla.

La página web ya está centrada y tiene un tamaño fijo de 960 pixeles. Lo próximo que necesitamos hacer es prevenir un problema que ocurre en algunos navegadores. La propiedad text-align es hereditaria. Esto significa que todos los elementos dentro del cuerpo y su contenido serán centrados, no solo la caja principal. El estilo asignado a <body> en el ejm 2.29 será asignado a cada uno de sus hijos. Debemos retornar este estilo a su valor por defecto para el resto del documento. El tercer y último estilo incorporado en la regla del ejm 2.30 (text-align: left) logra este propósito. El resultado final es que el contenido del cuerpo es centrado pero el contenido de la caja principal (el <div> identificado como agrupar) es alineado nuevamente hacia la izquierda, por lo tanto todo el resto del código HTML dentro de esta caja hereda este estilo.

La cabecera

Siguiendo la etiqueta de apertura del <div> principal se encuentra el primer elemento estructural de HTML5, <header>. Este elemento contiene el título principal de nuestra página web y estará ubicado en la parte superior de la pantalla. En nuestra plantilla, <header> fue identificado con el atributo id y el valor cabecera.

Como ya mencionamos, cada elemento block, así como el cuerpo, por defecto tiene un valor de ancho del 100%. Esto significa que el elemento ocupará todo el espacio horizontal disponible. En el caso del cuerpo, ese espacio es el ancho total de la pantalla visible (la ventana del navegador), pero en el resto de los elementos el espacio máximo disponible estará determinado por el ancho de su elemento padre. En nuestro ejemplo, el espacio máximo disponible para los elementos dentro de la caja principal será de 960 pixeles, porque su padre es la caja principal la cual fue previamente configurada con este tamaño.

Ejm 2.31

#cabecera {
background: #FFFBB9;
border: 1px solid #999999;
padding: 20px;
}

Debido a que <header> ocupará todo el espacio horizontal disponible en la caja principal y será tratado como un elemento block (y por esto posicionada en la parte superior de la página), lo único que resta por hacer es asignar estilos que nos permitirán reconocer el elemento cuando es presentado en pantalla. En la regla mostrada en el ejm 2.31 le otorgamos a <header> un fondo amarillo, un borde sólido de 1 pixel y un
margen interior de 20 pixeles usando la propiedad padding.

Barra de navegación

Siguiendo al elemento <header> se encuentra el elemento <nav>, el cual tiene el propósito de proporcionar ayuda para la navegación. Los enlaces agrupados dentro de este elemento representarán el menú de nuestro sitio web. Este menú será una simple barra ubicada debajo de la cabecera. Por este motivo, del mismo modo que el elemento <header>, la mayoría de los estilos que necesitamos para posicionar el elemento <nav> ya fueron asignados, <nav> es un elemento block por lo que será ubicado debajo del elemento previo, su ancho por defecto será 100% por lo que será tan ancho como su padre (el <div> principal), y (también por defecto) será tan alto como su contenido y los márgenes predeterminados. Por lo tanto, lo único que nos queda por hacer es mejorar su aspecto en pantalla. Esto último lo logramos agregando un fondo gris y un pequeño
margen interno para separar las opciones del menú del borde del elemento:

Ejm 2.32

#menu {
background: #CCCCCC;
padding: 5px 15px;
}
#menu li {
display: inline-block;
list-style: none;
padding: 5px;
font: bold 14px verdana, sans-serif;
}

En el ejm 2.32, la primera regla referencia al elemento <nav> por su atributo id, cambia su color de fondo y agrega márgenes internos de 5px y 15px con la propiedad padding.

La propiedad padding trabaja exactamente como margin. Cuatro valores pueden ser especificados: superior, derecho, inferior, izquierdo, en este orden. Si solo declaramos un valor, el mismo será asignado para todos los
espacios alrededor del contenido del elemento. Si en cambio especificamos dos valores, entonces el primero será asignado como margen interno de la parte superior e inferior del contenido y el segundo valor será asignado al margen interno de los lados, izquierdo y derecho.

Dentro de la barra de navegación hay una lista creada con las etiquetas <ul> y <li>. Por defecto, los ítems de una lista son posicionados unos sobre otros. Para cambiar este comportamiento y colocar cada opción del menú una al lado de la otra, referenciamos los elementos <li> dentro de este elemento <nav> en particular usando el selector #menu li, y luego asignamos a todos ellos el estilo display: inline-block para convertirlos en lo que se llama cajas inline. A diferencia de los elementos block, los elementos afectados por el parámetro inline-block estandarizado en CSS3 no generan ningún salto de línea pero nos permiten tratarlos como elementos block y así declarar un valor de ancho determinado. Este parámetro también ajusta el tamaño del elemento de acuerdo con su contenido cuando el valor del ancho no fue especificado.

En esta última regla también eliminamos el pequeño gráfico generado por defecto por los navegadores delante de cada opción del listado utilizando la propiedad list-style.

section y aside

Los siguientes elementos estructurales en nuestro código son dos cajas ordenadas horizontalmente. El Modelo de Caja Tradicional es construido sobre estilos CSS que nos permiten especificar la posición de cada caja. Usando la propiedad float podemos posicionar estas cajas del lado izquierdo o derecho de acuerdo a nuestras necesidades. Los elementos que utilizamos en nuestra plantilla HTML para crear estas cajas son <section>
y <aside>, cada uno identificado con el atributo id y los valores seccion y columna respectivamente.

Ejm 2.33

#seccion {
float: left;
width: 660px;
margin: 20px;
}
#columna {
float: left;
width: 220px;
margin: 20px 0px;
padding: 20px;
background: #CCCCCC;
}

La propiedad de CSS float es una de las propiedades más ampliamente utilizadas para aplicar el Modelo de Caja Tradicional. Hace que el elemento flote hacia un lado o al otro en el espacio disponible. Los elementos afectados por float actúan como elementos block (con la diferencia de que son ubicados de acuerdo al valor de esta propiedad y no el flujo normal del documento). Los elementos son movidos a izquierda o derecha en el área disponible, tanto como sea posible, respondiendo al valor de float.

Con las reglas del ejm 2.33 declaramos la posición de ambas cajas y sus respectivos tamaños, generando así las columnas visibles en la pantalla. La propiedad float mueve la caja al espacio disponible del lado especificado por su valor, width asigna un tamaño horizontal y margin, por supuesto, declara el margen del elemento.

Afectado por estos valores, el contenido del elemento <section> estará situado a la izquierda de la pantalla con un tamaño de 660 pixeles, más 40 pixeles de margen, ocupando un espacio total de 700 pixeles de ancho.

La propiedad float del elemento <aside> también tiene el valor left (izquierda). Esto significa que la caja generada será movida al espacio disponible a su izquierda. Debido a que la caja previa creada por el elemento <section> fue también movida a la izquierda de la pantalla, ahora el espacio disponible será solo el que esta caja dejó libre. La nueva caja quedará ubicada en la misma línea que la primera pero a su derecha, ocupando el espacio restante en la línea, creando la segunda columna de nuestro diseño.

El tamaño declarado para esta segunda caja fue de 220 pixeles. También agregamos un fondo gris y configuramos un margen interno de 20 pixeles. Como resultado final, el ancho de esta caja será de 220 pixeles más 40 pixeles agregados por la propiedad padding (los márgenes de los lados fueron declarados a 0px).

 

Conceptos básicos

El tamaño de un elemento y sus márgenes son agregados para obtener el valor real ocupado en pantalla. Si tenemos un elemento de 200 pixeles de ancho y un margen de 10 pixeles a cada lado, el área real ocupada por el elemento será de 220 pixeles. El total de 20 pixeles del margen es agregado a los 200 pixeles del elemento y el valor final es representado en la pantalla. Lo mismo pasa con las propiedades padding y border. Cada vez que agregamos un borde a un elemento o creamos un espacio entre el contenido y el borde usando padding esos valores serán agregados al ancho del elemento para obtener el valor real cuando el elemento es mostrado en pantalla. Este valor real es calculado con la fórmula: tamaño + márgenes + márgenes internos + bordes.

footer

Para finalizar la aplicación del Modelo de Caja Tradicional, otra propiedad CSS tiene que ser aplicada al elemento <footer>. Esta propiedad devuelve al documento su flujo normal y nos permite posicionar <footer> debajo del último elemento en lugar de a su lado.

Ejm 2.34

#pie {
clear: both;
text-align: center;
padding: 20px;
border-top: 2px solid #999999;
}

La regla del ejm 2.34 declara un borde de 2 pixeles en la parte superior de <footer>, un margen interno (padding) de 20 pixeles, y centra el texto dentro del elemento. A sí mismo, restaura el normal flujo del documento con la propiedad clear. Esta propiedad simplemente restaura las condiciones normales del área ocupada por el elemento, no permitiéndole posicionarse adyacente a una caja flotante. El valor usualmente utilizado es both, el cual significa que ambos lados del elemento serán restaurados y el elemento seguirá el flujo normal (este elemento ya no es flotante como los anteriores). Esto, para un elemento block, quiere decir que será posicionado debajo del último elemento, en una nueva línea.

La propiedad clear también empuja los elementos verticalmente, haciendo que las cajas flotantes ocupen un área real en la pantalla. Sin esta propiedad, el navegador presenta el documento en pantalla como si los elementos flotantes no existieran y las cajas se superponen.

Modelo de caja tradicional

Modelo de caja tradicional

Cuando tenemos cajas posicionadas una al lado de la otra en el Modelo de Caja Tradicional siempre necesitamos crear un elemento con el estilo clear: both para poder seguir agregando otras cajas debajo de un modo natural. La figura de arriba muestra una representación visual de este modelo con los estilos básicos para lograr la correcta disposición en pantalla.

Los valores left (izquierda) y right (derecha) de la propiedad float no significan que las cajas deben estar necesariamente posicionadas del lado izquierdo o derecho de la ventana. Lo que los valores hacen es volver flotante ese lado del elemento, rompiendo el flujo normal del documento. Si el valor es left, por ejemplo, el navegador tratará de posicionar el elemento del lado izquierdo en el espacio disponible. Si hay espacio disponible luego de otro elemento, este nuevo elemento será situado a su derecha, porque su lado izquierdo fue configurado como flotante. El elemento flota hacia la izquierda hasta que encuentra algo que lo bloquea, como otro elemento o el borde de su elemento padre. Esto es importante cuando queremos crear varias columnas en la pantalla. En este caso cada columna tendrá el valor left en la propiedad float para asegurar que cada columna estará continua a la otra en el orden correcto. De este modo, cada columna flotará hacia la izquierda hasta que es bloqueada por otra columna o el borde del elemento padre.

Últimos toques

Lo único que nos queda por hacer es trabajar en el diseño del contenido. Para esto, solo necesitamos configurar los pocos elementos HTML5 restantes.

Ejm 2.35

article {
background: #FFFBCC;
border: 1px solid #999999;
padding: 20px;
margin-bottom: 15px;
}
article footer {
text-align: right;
}
time {
color: #999999;
}
figcaption {
font: italic 14px verdana, sans-serif;
}

La primera regla del ejm 2.35 referencia todos los elementos <article> y les otorga algunos estilos básicos (color de fondo, un borde sólido de 1 pixel, margen interno y margen inferior). El margen inferior de 15 pixeles tiene el propósito de separar un elemento <article> del siguiente verticalmente.

Cada elemento <article> cuenta también con un elemento <footer> que muestra el número de comentarios recibidos. Para referenciar un elemento <footer> dentro de un elemento <article>, usamos el selector article footer que significa “cada <footer> dentro de un <article> será afectado por los siguientes estilos”. Esta técnica de referencia fue aplicada aquí para alinear a la derecha el texto dentro de los elementos <footer> de cada <article>.

Al final del código en el ejm 2.35 cambiamos el color de cada elemento <time> y diferenciamos la descripción de la imagen (insertada con el elemento <figcaption>) del resto del texto usando una tipo de letra diferente.

box-sizing

Existe una propiedad adicional incorporada en CSS3 relacionada con la estructura y el Modelo de Caja Tradicional. La propiedad box-sizing nos permite cambiar cómo el espacio total ocupado por un elemento en pantalla será calculado forzando a los navegadores a incluir en el ancho original los valores de las propiedades padding y border.

Como explicamos anteriormente, cada vez que el área total ocupada por un elemento es calculada, el navegador obtiene el valor final por medio de la siguiente fórmula: tamaño + márgenes + márgenes internos + bordes.

Por este motivo, si declaramos la propiedad width igual a 100 pixeles, margin en 20 pixeles, padding en 10 pixeles y border en 1 pixel, el área horizontal total ocupada por el elemento será: 100+40+20+2= 162 pixeles (observa que tuvimos que duplicar los valores de margin, padding y border en la fórmula porque consideramos que los mismos fueron asignados tanto para el lado derecho como el izquierdo).

Esto significa que cada vez que declare el ancho de un elemento con la propiedad width, deberás recordar que el área real para ubicar el elemento en pantalla será seguramente más grande.

Dependiendo de sus costumbres, a veces podría resultar útil forzar al navegador a incluir los valores de padding y border en el tamaño del elemento. En este caso la nueva fórmula sería simplemente: tamaño + márgenes.

Ejm 2.36

div {
width: 100px;
margin: 20px;
padding: 10px;
border: 1px solid #000000;

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

La propiedad box-sizing puede tomar dos valores. Por defecto es configurada como content-box, lo que significa que los navegadores agregarán los valores de padding y border al tamaño especificado por width y height. Usando el valor border-box en su lugar, este comportamiento es cambiado de modo que padding y border son incluidos dentro del elemento.

El ejm 2.36 muestra la aplicación de esta propiedad en un elemento <div>. Este es solo un ejemplo y no vamos a usarlo en nuestra plantilla, pero puede ser útil para algunos diseñadores dependiendo de qué tan familiarizados se encuentran con los métodos tradicionales propuestos por versiones previas de CSS.

En este momento, la propiedad box-sizing, al igual que otras importantes propiedades CSS3 se encuentra en estado experimental en algunos navegadores. Para aplicarla efectivamente a tus documentos, debes declararla con los correspondientes prefijos, como hicimos en el ejm 2.36. Los prefijos para los navegadores más comunes son los siguientes:

  • -moz- para Firefox.
  • -webkit- para Safari y Chrome.
  • -o- para Opera.
  • -khtml- para Konqueror.
  • -ms- para Internet Explorer.
  • -chrome- específico para Google Chrome.