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

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando…

También te podría gustar...

Sobre este artículo

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando…

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.

11 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. Jacko

    mi pregunta es como puedo añadir imagenes al menu

  4. fran

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

  5. 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!

  6. laucaroso

    me ayudó muchisimo muchas gracias

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

    • 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

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

    Gracias por el aporte.

    Saludos.

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

Deja un comentario

El email no se publica. Todos los campos obligatorios, salvo Web.

Usamos cookies propias y de terceros para mejorar nuestros servicios, realizar el análisis de la navegación de los usuarios y mostrar publicidad según tus preferencias y hábitos de navegación. Si continúas navegando, las aceptas. Puede cambiar la configuración u obtener más información aquí

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar