tutorial css

Menu de navegacion CSS. 2da parte

En el video anterior aprendimos a crear un horizontal con , creamos una lista <UL> y a los elementos <li> les quitamos sus propiedades de lista (uno debajo del otro) para ubicarlos de manera horizontal, además le gregamos una imagen de fondo para que funcionara como separador entre todos los elementos, que ubicaba a la derecha de cada <li>, esto ayudó a que nuestro menu horizontal se viera mejor.

El problema: Se agrega la imagen a cada <li> incluyendo el ultimo elemento.

Solución: Aplicar las mismas propiedades a los <li> definiéndolos en Clases (.class).

¿Como se hace?

Este es el codigo resultante de la leccion 21 del curso gratis de diseño de páginas web, en ella definimos las instrucciones CSS necesarias para convertir una lista en un Menu Horizontal.

instrucciones css iniciales

Lo primero que debemos hacer es agregar la etiqueta class y darle un nombre como valor, en el caso de este tutorial para crear un menu con css, llamé fondo a las clases que afectarán a los primeros 4 elementos de la lista y al último elemento le agrego una clase llamada similar.

En el CSS del archivo debes hacer las siguientes modificaciones:

Como se aprecia en la imagen superior, los cambios son minimos y unicamente agregamos .fondo despues de la etiqueta <a>, con esto ya tenemos las instrucciones CSS de la clase fondo.

Luego, haz una copia de estas dos clases y pégalas inmediatamente debajo, a esta copias les cambias el nombre de “fondo” a “similar” y eliminas las lineas 3,4 y 5 de la instruccion (que hacen referencia a la imagen de fondo), con esto ya tienes listo el menu horizontal con la imagen de fondo como separador y con el ultimo <li> sin imagen de fondo.

La idea de este tutorial y de la leccion 21 (Crear un menu horizontal con CSS) es que tenga el siguiente orden: <texto> <imagen><texto> <imagen><texto> <imagen><texto> <imagen><texto>

Espero que este tutorial de te sea de utilidad y lo utilices como complemento de la leccion 21 del curso de páginas web.

¿Comentarios?, me encantaría conocer tu opinión del tutorial y del curso gratis de diseño de páginas web.

Actualizacion

Puedes descargar el ejemplo del tutorial para crear menu con css desde mediafire

11 comments on “Menu de navegacion CSS. 2da parte

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>