Maquetación de páginas web: crear un menu horizontal con CSS

También te podría gustar...

Sobre este artículo

Licencia: Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

URL: LaWebera.es :: Diseño Web

Diseñador web y gráfico afincado en Uruguay. Ha trabajado como freelance para empresas de toda Latinoamérica y España. Apasionado del diseño y autodidacta por naturaleza, gran parte de lo que sabe lo ha aprendido de sitios como este.

13 Respuestas

  1. Uno

    Bueno.. me respondo yo mismo. he encontrado como centralizar el menu cuando se usa float.
    http://www.cristalab.com/tutoriales/centrar-menu-de-ancho-variable-con-css-c104838l/

    un saludo

  2. Uno

    Este tutorial me ha resuelto una duda pero me he encontrado con otra. Como se puede centralizar el menu? si os fijais en el link del ejemplo no lo esta.

    Un saludo

  3. David

    Como hago para agregar sumbenús, así como en un SpryBar pero manteniedo el diseño.

  4. Jacko

    mi pregunta es como puedo añadir imagenes al menu

  5. fran

    aja y si quiero que la ul sea mas ancho que el Li ¿? tengo que meterlo en un DIV aparte??

  6. Luis Serrano

    Excelente artículo, justo lo que necesito para mi primer proyecto web. A partir de ahora me hago seguidor de esta web. Magnífico, felicidades!

  7. laucaroso

    me ayudó muchisimo muchas gracias

  8. cali

    Hola. Necesito hacer un menu similar…solo que al pasar por encima se desplieue una foto como fondo…pero esta foto es de 80px….y cuando la veo en el menu solo sale cortada como el alto del menu…ya probé poniendo line-heitght:80px…tambien height:80px…agregué display: block, inline e inline-block…también puse position relative pero aún sigue mostrando la imagen de fondo cortada….
    Espero se entienda mi pregunta y desde ya agradezco por anticipado cualquier ayuda. saludos, gracias

  9. Danny

    Hola, acabo de ver el tutorial, por que tengo un problema en una web, que no puedo resolver, soy nuevo en esto, y probé el link de ejemplo del menú horizontal con css, tiene el mismo defecto que el que tiene mi sitio, la lista se cae hacia la derecha, (cuando lo ves en IE 7, en chrome, ni en firefox) tienen idea como solucionar ese problema?
    Espero puedan ayudarme, ahí dejé mi mail, desde ya muchas gracias, y saludos.

    • Andrés Fernández

      Hola Danny:
      En primer lugar, convengamos en que el código es correcto, y que el problema es que Internet Explorer 7, a pesar de presentar avances respecto de Internet Explorer 6, aún no interpreta correctamente las reglas CSS.
      Este problema de Internet Explorer 7 es frecuente, y tiene una solución sencilla. En primer lugar, debes crear un archivo CSS específico para este navegador, al cual puedes denominar, por ejemplo, ie7.css. Luego, en el HTML debes crear el enlace que solo sea leído por los navegadores de Microsoft, colocándolo como comentario en el head y con condicionales, de forma que solo el navegador IE7 lo lea.

      <!--[if IE 7]><link rel="stylesheet" href="archivos/ie7.css" type="text/css" /><![endif]-->
      

      En este archivo, deberías colocar la siguiente línea de código:

      #fondomenu ul li  { display: inline; }
      

      De esta forma, los elementos flotantes se sustituyen por elementos en línea, pero manteniendo el resto del formato que está dado por el archivo CSS principal.
      Espero que te sea de utilidad. Saludos

  10. Verónica Milán

    Carlos, totalmente de acuerdo. Le acabo de hacer llega a Andrés tu mensaje para que corrija el tema.

    Gracias por el aporte.

    Saludos.

  11. Carlos

    Buenos días,

    Si me permites hacerte una recomendación y ya que estos artículos los lee mucha gente para aprender a hacer bien las cosas, recomendaría que en el ejemplo el menú lo estructurases como una lista en lugar de emplear un DIV para cada botón. De este modo se aumenta la carga semántica del menú de navegación.

    Saludos

    • Andrés Fernández

      Hola Carlos:
      En primer lugar, quiero agradecerte el comentario, que es absolutamente atinado. Ya he hecho las modificaciones que corresponden, generando el menú con elementos de lista.

Deja un comentario

El email no se publica. Todos los campos obligatorios.