Continuamos con el diseño de la web, esta vez vamos a dar forma al menú de navegación que tendrá nuestra web, daremos estilo al menú.
Recordamos los pasos realizados desde el inicio de la web
- Colocar imagenes en donde estan los divs de fotografias, dejamos el espacio para ellas
- Dar estilo al menú
- Reemplazar texto por imagenes en el encabezado
- Colocar un background en el pie de pagina
- Remplazar los cuadros grises por las imágenes
2. Dar estilo al menú
Lo primero que debemos hacer es colocar enlaces dentro del menu, es decir el html no esta completo pues no tiene esos enlaces, los completaremos y como direccion momentanea colocaremos un # que no hace practicamente nada pero nos permitira formatear el html de los enlaces con css de forma correcta. Modificamos el código dentro del div#menu, y queda asi:
<div id="menu"> <h3>Menu</h3> <ul> <li><a href="#">Home</a></li> <li><a href="#">Paisajes</a></li> <li><a href="#">Animales</a></li> <li><a href="#">Gente</a></li> <li><a href="#">Contacto</a></li> </ul> </div>
Recordar que antes de este código teníamos el menú así:
- Home
- Paisajes
- Animales
- Gente
- Contacto
Despues de colocar el código anterior tendremos en menú:
La idea es que quede el menu tal como la imagen de abajo, para lograr el efecto que deseo, las caracteristicas de los li pertenecientes al menu seran las siguientes:
– Un borde izquierdo de color naranja (usaremos exactamente el color #e93700) con un ancho de 4px.
– Ademas con margenes externos (propiedad margin del css) de solo 6px en la parte superior y 0 a la derecha, izquierda y debajo.
– Margenes internos (Propiedad padding de css) de arriba y abajo 2px y de la izquierda 4px y de la derecha 0px
– Por ultimo le indicaremos que no coloque ninguna viñeta con la propiedad list-style: none
Todo esto seria lo que le colocamos a los elementos li que se encuentran encapsulados en un elemento ul dentro del div #menu, por lo que el código css a agregar seria:
div#menu ul li{border-left: 4px solid #e93700; margin-top: 6px; padding: 2px 0 2px 4px; list-style:none; }
Ademas nos faltaría arreglar el margen del ul que contiene a los li con los enlaces adentro, le colocaremos cero (0) de margen y 80px de padding izquierdo por motivos de diseño!
#menu ul{ margin:0; padding-left:80px; }
Por otra parte nos queda la tarea de insertarle tamaño y color a los textos de los enlaces, lo que haremos sera colocarles un tamaño de letra de 12px, color #464545 (es una tonalidad de gris) y le quitamos el subrayado con text-decoration: none; y ademas utilizando la instancia :hover que nos provee el css para algunos elementos (lo explico mejor mas adelante) le cambiamosel color de cuando pasa el mouse por encima a #e93700
#menu ul li a{ font-size: 12px; color: #464545; text-decoration: none;}
#menu ul li a:hover{ color: #e93700 }
Por ultimo, para terminar la parte del menu, falta estilizar el h3 que contiene la palabra «menu», lo haremos con un padding izquierdo de 80px (para que quede igual de parejo que el ul), con un tamaño de texto de 18px, con el color #e93700 (el color naranja del menu cuando le pasamos el mouse por encima) y utilizaremos font-weight: normal; para que no se tome como negrita, porque esa tipografia no queda muy bien en ese tamaño con letra en negrita.
#menu h3 {color: #e93700; font-size: 18px; font-weight: normal; padding-left: 80px;}
Aplicando todos los cambios al menu el codigo css que tendremos que añadir a la hoja de estilos sería:
#menu ul li{border-left: 4px solid #e93700; margin-top: 6px; padding: 2px 0 2px 4px; list-style:none; }
#menu ul li a{ font-size: 12px; color: #464545; text-decoration: none;}
#menu ul li a:hover{ color: #e93700 }
#menu ul{ margin:0; padding-left:80px; }
#menu h3 {color: #e93700; font-size: 18px; font-weight: normal; padding-left: 80px;}
Con esto ya hemos terminado la parte relativa al menú de nuestra página web
Resumiendo hasta aquí:
Antes de esta explicación tenemos: 06-creando-web.html
Después de la explicación tenemos: 07-creando-web.html
Hemos dado foma al menú de navegación de nuestra web.
