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
Articulos Relacionados:
Quieres saber ¿cómo crear un menu con css?, en esta lección aprenderemos com ...
¿Cómo crear un menú desplegable en Dreamweaver?, para el curso de paginas we ...
Curso gratis de diseño de páginas web El curso para la creación de páginas ...
En este video aprenderemos a insertar una tabla dentro de una celda de otra ...
En esta leccion veremos como insertar imagenes en HTML, ademas como hacer un ...
Información Bitacoras.com…
Valora en Bitacoras.com: En el video anterior aprendimos a crear un menu de navegacion horizontal con CSS, creamos una lista y a los elementos les quitamos sus propiedades de lista (uno debajo del otro) para ubicarlos de manera horizontal, además le……
Seria bueno tener el ejemplo en "versión para descargar".
Gracias por los tips.
Saludos.
My recent post La tira del día
Gracias por la sugerencia, ya lo puedes descargar el enlace esta debajo de \”Actualizacion\”. Saludos
Buenaso hombre, gracias por compartirlo.
Saludos.
Gracias a ti por comentar
imgine hacer eso, pero solo poniendo el "class" al ultimo ya veo k solo tenia la idea mas no la solucion xD grax walter
De nada, para mi es un placer poder ayudar.
Excelente el tuto me aclaro muchas dudas, y como se aria para crear submenu.
Gracias