+ Responder Tema
Resultados 1 al 13 de 13

Tema: Cómo hacer el menú horizontal

  1. #1
    Esto empieza a ser un vicio... Habitante hq Está en el buen camino
    Fecha de Ingreso
    27 jul, 06
    Ubicación
    Madrid
    Mensajes
    544
    Poder de Reputación
    11

    Cómo hacer el menú horizontal

    Buenas, como alguno me habéis preguntado sobre el tema y también sugerido os voy a contar cómo podemos hacer que nuestro menú sea horizontal. ¡Soemla, va por tí!

    Es muy sencillo, ya veréis. Empezaremos por ver cómo es nuestro código HTML. un ejemplo, podría ser el siguiente (con DIVs):

    Código:
    <div id="menu">
        <ul>[*]Inicio[*]Ultimas Noticias[*]Apartado I[*]Apartado II[/list]</div>
    Si alguien prefiere hacerlo con tablas, sólo tendrá que cambiar el "div" por el "td" correspondiente

    Bien, ahora sólo nos queda darle forma, así es que nos vamos al CSS.

    Primero voy a quitarle el estilo a la lista para que no me salgan esos puntitos, que no me molan nada:

    Código:
    #menu ul { list-style: none ; }
    Si lo habéis hecho con tablas y clases, sería (por ejemplo):

    Código:
    td.menu ul { list-style: none ; }
    Ahora es cuando llega la magia, cambiamos para que se vea el menú en horizontal:

    Código:
    #menu ul li { float: left ; }
    Y, por último sólo nos queda hacer que no se pegue una opción con otra, así es que añadimos:

    Código:
    #menu ul li { float: left ; margin: 0px 0px 0px 10px ;}
    Y ahora os explico algunas cosas:

    1.- En CSS se pueden utilizar selectores anidados, o sea, que si tengo un div (#menu) que tiene una lista (ul) y quiero que lo que ponga sólo afecte a la lista del div #menu, simplemente pongo

    Código:
    #menu ul { ... ; }
    Y las características que ponga sólo afectaran a esas listas.

    2.- "float: left ;", creo que se explica por sí sólo, pero vamos, se traduce por "que flote a la izquierda".

    3.- El margin es el toque final y cada uno tendrá que adaptarlo a sus necesidades.

    Espero que os sirva, amigos!!!!

  2. #2
    Me va gustando esto... Habitante SOEMLA Está en el buen camino
    Fecha de Ingreso
    23 nov, 06
    Ubicación
    Cartagena-Colombia
    Mensajes
    74
    Poder de Reputación
    9
    ¡Tan lindo mi amigo hq!. Gracias, muchisimas gracias
    Ya me había puesto a leer algo por ahi en la red.Con esto complemento y si hay dudas nos leemos.
    Todos ud(s) son increibles.
    saludos

    SOEMLA

  3. #3
    Me va gustando esto... Habitante ariviti Está en el buen camino
    Fecha de Ingreso
    22 may, 07
    Ubicación
    CATALUNYA
    Mensajes
    145
    Poder de Reputación
    8
    hola!

    genial estos códigos

    he conseguido realizar el menú horizontal y sin los puntitos famosos...

    ahora la pregunta es, dependiendo del tamaño de la ventana del navegador el menu se me pone en dos líneas en lugar de una sola.

    hay alguna manera de evitar esto!?

    gracias

  4. #4
    Me va gustando esto... Habitante SOEMLA Está en el buen camino
    Fecha de Ingreso
    23 nov, 06
    Ubicación
    Cartagena-Colombia
    Mensajes
    74
    Poder de Reputación
    9
    Hola ariviti:

    El menu horizontal lo has hecho con tablas o con divs?

    SOEMLA

  5. #5
    Me va gustando esto... Habitante SOEMLA Está en el buen camino
    Fecha de Ingreso
    23 nov, 06
    Ubicación
    Cartagena-Colombia
    Mensajes
    74
    Poder de Reputación
    9
    Parece q has solucionado lo del menu horizontal.

    saludos soemla

  6. #6
    Me va gustando esto... Habitante ariviti Está en el buen camino
    Fecha de Ingreso
    22 may, 07
    Ubicación
    CATALUNYA
    Mensajes
    145
    Poder de Reputación
    8
    ei q estado un poco desconectada.

    no he conseguido arreglar lo del menu horizontal

    lo he hecho con tablas, es mi primera web i aun no me he metido con los divs i eso

  7. #7
    Esto empieza a ser un vicio... Habitante hq Está en el buen camino
    Fecha de Ingreso
    27 jul, 06
    Ubicación
    Madrid
    Mensajes
    544
    Poder de Reputación
    11
    Para lo del menu horizontal tienes 2 opciones:

    1.- Especificar el ancho necesario. Lo bueno es que siempre se verá en 1 línea, pero lo malo es que si la pantalla es más pequeña que el menú, aparecerá el scroll horizontal.

    2.- Dejar que el navegador se adapte al contenido. Lo bueno es que no te saldrá el scroll horizontal, pero lo malo es que te puede pasar lo del menú en varias líneas.

    Solución: También puedes hacerlo con DIVs en vez de tablas y ponerle el Scroll sólo al menú (aunque queda un poco feillo).

    Tu decides!!

  8. #8
    Me va gustando esto... Habitante ariviti Está en el buen camino
    Fecha de Ingreso
    22 may, 07
    Ubicación
    CATALUNYA
    Mensajes
    145
    Poder de Reputación
    8
    ok gracias!!!

    de momento he dejado que se ajuste a la pantalla de cada ordenador

    muchas gracias por el consejo!

  9. #9
    Me va gustando esto... Habitante SOEMLA Está en el buen camino
    Fecha de Ingreso
    23 nov, 06
    Ubicación
    Cartagena-Colombia
    Mensajes
    74
    Poder de Reputación
    9
    Hola hq:

    Me he seguido por el tutorial y la estructura de mi pagina web la hecho con tablas.Puedo hacer solo el menu horizontal con Div aunque el resto de la estructura de la pagina este con tablas?

    saludos
    soemla

  10. #10
    Esto empieza a ser un vicio... Habitante hq Está en el buen camino
    Fecha de Ingreso
    27 jul, 06
    Ubicación
    Madrid
    Mensajes
    544
    Poder de Reputación
    11
    Claro, incluso puedes hacer el menú en una celda de las tablas, sólo tiener que cambiar donde pone <div> por el <td> que corresponda a la celda del menú.

  11. #11
    Me va gustando esto... Habitante SOEMLA Está en el buen camino
    Fecha de Ingreso
    23 nov, 06
    Ubicación
    Cartagena-Colombia
    Mensajes
    74
    Poder de Reputación
    9

    menu horizontal con div

    El curso paso a paso con tablas asigna la celda a1 y a2 para logotipo y banner respectivamente.
    Inserte el div q necesito para el menu horizontal debajo de estas celdas. En vista diseño D.8 me visualiza el div fuera del ancho de las tablas (yo les asigne width:90% a las tablas q componen mi pagina web). Igual le di ésta medida al div del menu (width:90%).
    Pero cuando doy vista previa con IE 7.0 y Opera me visualiza el div perfectamente(osea no se sale del ancho de las tablas).
    Es normal q se visualize fuera del ancho de las tablas en vista diseño con D.8.0?
    saludos soemla

  12. #12
    Esto empieza a ser un vicio... Habitante hq Está en el buen camino
    Fecha de Ingreso
    27 jul, 06
    Ubicación
    Madrid
    Mensajes
    544
    Poder de Reputación
    11
    Cuando trabajas con Dreamweaver, la vista previa no es tan ancha como tu pantalla (hay menús laterales, bordes del programa y eso, por eso se ve iferente, pero no te preocupes. Si lo ves bien en la vista previa, es que está bien.

  13. #13
    Me va gustando esto... Habitante SOEMLA Está en el buen camino
    Fecha de Ingreso
    23 nov, 06
    Ubicación
    Cartagena-Colombia
    Mensajes
    74
    Poder de Reputación
    9
    Gracias hq.

+ Responder Tema

Temas Similares

  1. Como centrar el menu horizontal
    Por JUNNIOR_77 en el foro Todo sobre Estilos CSS
    Respuestas: 0
    Último Mensaje: 22/07/2008, 17:04
  2. Como hacer un menu horizontal?
    Por galahad379 en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 1
    Último Mensaje: 12/06/2008, 21:23

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes