Photoshop y Tutoriales

En el video anterior aprendimos a crear un menu horizontal con CSS, 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.

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

Te podria interesar:

1. Como crear un menu de navegacion con CSS
2. Posicionamiento SEO – All in one SEO Pack. 2da parte
3. Explicación del Menú 3D de Photoshop CS4
4. Separacion del HTML del CSS
5. Introduccion al CSS

Tags: css, curso paginas web, diseño de paginas web, Diseño Web, menu, menu css, menu horizontal css, menu navegacion css