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:

menu {

background: #CCCCCC;

padding: 5px 15px;

}

menu li {

display: inline-block;

list-style: none;

padding: 5px;

font: bold 14px verdana, sans-serif;

}

Listado 2-32. Agregando estilos para . En el Listado 2-32, la primera regla referencia al elemento por su atributo id, cambia su color de fondo y agrega márgenes internos de 5px y 15px con la propiedad padding. Conceptos básicos: 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 y . 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 dentro de este elemento 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.

◄