Creación de Menús: Uso de las listas en Html

Uno de los elementos que suelen dar más dolores de cabeza a la hora de maquetar, son los menús, o botoneras. Siempre se desplazan, se achican , agrandan, se desordenan o nos desordenan alguna parte de nuestra página.

En este artículo te doy la solución a este problema, y te explico detalladamente que elementos del HTML debes utilizar para construir tus menús de forma correcta y compatible con cualquier navegador.

La construcción de los menús suele encararse mal, ya que la mayoría de las personas, utilizan imágenes sueltas o tablas. Pues esto es un grave error.

La forma correcta de construir un menú es utilizando las listas de HTML.
Las listas se utilizan para mostrar una serie de datos de forma ordenada o desordenada, usándose  los elementos/etiquetas  de lista  <ul>,  y los elementos <li> de cada ítem del menú o lista.

** REPORTE GRATUITO:
Cómo convertir un PSD en HTML en 5 pasos.

Haz Click AQUI para Descargarlo AHORA.

Las listas ordenadas son aquellas en donde sus elementos siguen un orden establecido, como por ejemplo una numeración ascendente:

1.       Item
2.       Item
3.       Item

Y las listas desordenadas son las que sus elementos no siguen un orden establecido.  Estas son las que usaremos para nuestros menús:

Item 1
Item 2
Item 3

Entonces por medio del CSS podemos aplicarle varias propiedades o atributos.
Uno de ellos es el atributo “list-style-type”, el cual define que tipo de bullet irá delante de cada ítem de la lista. Puede adoptar el valor:  none, circle, disc y square.

Entonces para definir una lista o menú, colocamos el siguiente código en el lugar correspondiente de nuestro html, donde vayamos a insertar la lista o menu:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Con <ul> y </ul> definimos donde empieza y termina la lista.
Y con <li> y </li> donde empieza y termina cada ítem de la lista.

Luego, en nuestro CSS podemos aplicarle los atributos que querramos a cada etiqueta de ítem, o a la etiqueta de lista entera.
En este caso le aplique el atributo “list-style-type: none;” para que no inserte los bullets en cada ítem.

li {

list-style-type: none;

}

Por defecto, los elementos <li> de las listas, se posicionan uno debajo del otro, pero si quieres que se posicionen uno al lado del otro, solo tienes que agregar el atributo “float: left;” a la etiqueta <li> en tu archivo CSS. Por Ej:

li {

list-style-type: none;
float: left;

}

Esta es la correcta y mejor  forma de construir menús cuando pasamos de Psd a Html.
A cada etiqueta <ul> y <li> , podemos también aplicarle otros atributos como medidas de márgenes, separación, fondo de imagen, color, etc , etc, igual que con cualquier elemento de nuestro documento Html.

Espero les haya servido y los invito a probar diferentes tipos de menús y listas, modificado las propiedades del CSS.

Anuncios

18 pensamientos en “Creación de Menús: Uso de las listas en Html

  1. Enrique

    Cristian, hay alguna forma de contactarme contigo? Tengo unas consultas que creo que son muy específicas y creo que requieren más de 1 respuesta y mi intencion no es llenarte de comentarios tus post. Además tienen que ver con un proyecto en el cual estoy trabajando. Será posible contactarme contigo de manera personal? Mi correo electrónico ya está en este mensaje, asi que siempre y cuando sea posible, espero me puedas contactar.

    Un abrazo.

    Responder
  2. beel

    Me da gusto haber encontrado tu blog es genial, explicas muy bien, de una manera que cualquier persona puede entender y sobre todo que compartes tus conocimientos con los demas ya que este tema, como lo has comentado no todo el mundo lo revela.
    Eso te hace ser una gran persona.
    Muchas gracias =)

    Responder
  3. Jonatan

    Muy buena web, hoy apenas la encontre y ya me eh leido todos los articulos que me parecieron exelentes y me ayudaron en muchisimas dudas que tenia y no entendia.
    Como dijieron, que enseñes esto habla muy bien de vos como persona y que sos un Capo Total ;).

    Saludos.

    PD: De mas esta aclarar que me suscribi 😛 y esperando mas articulos :).

    Responder
  4. beel

    Hola disculpa estoy haciendo una pagina para un proyecto escolar y mi problema es que cuando la subo al servidor no se ve al parte de arriba no (el header) no me muestra la imagen de fondo ni el lgotipo todo lo demas de la pagina se ve muy bien la verdad no se que sea en mi pc se ve toda la pagina bien tanto en firefox, IE y chrome pero no ya estando en el servidor no se ve bien
    en mis Css pongo esto
    #top{
    background-image:url(imagenes/bartop1.png);
    height:190px;
    background-repeat:repeat-x;
    margin-top:0px;

    }

    gracias espero me puedas ayudar no ecnuentro la forma de solucionar el problema

    Responder
  5. beel

    perdon arriba te puese no (el header) pero si es el header nadamas que lo nombre como top a otra cosa si en ves del brackgroun-imagen le pongo de fondo si se ve solo el background-imagen no =(
    gracias
    saludos

    Responder
    1. Psd a Html Autor de la entrada

      A ver si comprendo:
      Tu dices que si la misma imagen la pones de fondo del HTML, o sea, en la etiqueta body……si se ve, pero si la pones como fondo del DIV #top, no se ve??

      Responder
  6. beel

    Muchas gracias or responder
    mira subi una imagen de como se ve en local

    en local se ve bien en cualquier navegador
    pero cuando lo subo al servidor la parte que puse encerrada en un circulo rojo no se ve
    lo que hice es que la parte de verde es un div llamado top y le asigne de pattern una imagen png.
    #top{
    background-image:url(imagenes/bartop1.png);
    height:190px;
    background-repeat:repeat-x;
    margin-top:0px;

    }
    pero no en el servidor no me muestra nada de la parte encerrada en rojo ni el fondo ni tampoco la imagen del logotipo

    Responder
    1. Psd a Html Autor de la entrada

      Pues aparentemente se ve bien.
      Si en local lo ves bien, se supone que el codigo esta bien. Siempre y cuando estes usando los paths de las imagenes con direcciones relativas. Es decir, sin incluirles la URL completa del sitio.
      Por lo q veo en el CSS, estas usando direccion relativas, asi que seberia funcionar.

      Lo unico que se me ocurre, es que en el servidor no exista la imagn PNG, o no este dentro de la carpeta IMAGENES.
      Chequea eso.

      PAra ser mas preciso, necesitaria ver el codigo HTML.
      Avisame

      Responder
  7. Danny

    Hola Cristian, hoy encontré tu blog, estoy empezándome a dedicar a diseño web, y tengo algunos problemas con mis pruebas en IE, voy a tomar tú blog como un curso y lo voy a hacer clase a clase, gracias.

    Responder

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s