Duda sobre el menú... Estructura usando Divs

Hola, tengo una pequeña duda sobre los menús de la página, en el curso de la página te enseña a hacer un menú lateral y por tanto cada sección aparece una debajo de la otra, yo tengo pensado hacer en mi página un menú justo bajo del banner el problema esta en que para que quede bien tendría que ir cada sección una a lado de la otra, o sea en horizontal y no en vertical, no sé si se me entederá a lo que me refiero, por si acaso os dejo un dibujo de la extructura...

[contenido no disponible]

Y gracias por adelantado :D
Para que tu menú sea horizontal y no vertical, solo tienes que ponerle un ancho igual que al banner.

Creas un div llamado por ejemplo navegacion con un ancho (width) igual que al del banner. le pones un margen superior de 10 por ejemplo para que no quede justo pegado al banner y ya está.

css

#navegacion { width:500px; margin:10px 0 0 0; }


html.

<div id=banner>imagen de tu banner</div>
<div id=navegacion> contenido </div>
Para los que no se deciden a usar aún los DIVs.... je je.

Esto es solo un esquema, puedes variar las características con SOLO modificar la hoja de estilos. Está hecho en dos minutos y medio. He tardado más en escribir el email que en pensar cómo hacerlo. Los colors están puestos mas que nada para ver donde empieza y donde termina cada DIV. Te recomiendo mantenerlos casi hasta el final para saber bien donde está cada uno e identificarlos rápidamente.

Página index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Enore</title>
<LINK rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head><body>
<div id="global">
<div id="banner">Aqui iria el banner</div>
<div id="menu-horizontal">Este es el menu al que me refiero</div>
<div id="noticias">
<div id="menu-izquierda">
<div id="menu-secundario">Aqui tengo pensado poner un menu secundario</div>
<div id="no-se-que-poner">Aqui todavia no se que poner</div>
</div>
Aqui pondria las noticias y los contenidos de la web, pero en el mismo div.
</div>
</div></body></html>
Hoja estilos.css:
* {margin: 0px ; padding: 0px ; border:0px }
body {text-align:center}
#global {background-color: gray ; width: 800px ; margin: 10px auto ; padding: 0px}
#banner {background-color: pink ; width: 800px}
#menu-horizontal {background-color: yellow ; width: 800px}
#menu-izquierda {background-color: orange ; width: 150px ; float: left}
#menu-secundario {background-color: red ; width: 146px ; }
#no-se-que-poner {background-color: green ; width: 146px}
#noticias {background-color: blue ; width:auto}

No dudes en decirnos qué quieres cambiar y te ayudamos! :wink: Ah, y dinos tu opinión, oki?

Mira el ejemplo propuesto, aqui:
http://www.comocreartuweb.com/ejemplos-del-foro/index3.html

Basicamente es la estructura de CCTW :wink:
Vaya con divs :? , bueno entonces a llegado el momento de aprender que eso los divs, estos... :wink: :) . Muchas gracias a los dos :D
En ese ejemplo se ve un poco raro, pero es la base. Una vez que vas colocando cosas en cada parte se ve mejor. ADemás con esos colores... tu me diras, je je je.

Más tarde vas colocando imagens de fondo a cada parte, bordes, fondos, etc y queda como CCTW, un churro, je je je, pero las hay peores, no? je je je. Todo depende del estilo que tengas para escoger colores e imagenes de fondo. Como ves a mi no me ha ido muy bien con CCTW, pero si tienes un poco de gusto la mejorarás seguro,

No dudes en preguntar lo que necesites, cualquier cosa antes de desvaratar demasiado el ejemplo que te he propuesto. Ah,y en el apartado de DIVs del foro mejor.

Nos leemos! :wink:
Ahora que me he leido un poco lo de los divs, me he dado cuenta de que me explicado mal y no me habeís entendido :oops: , en realidad yo no me refería al menú en si mismo, si no a los links que hay que poner en él, que quiero que salgan unos tras otros...

Mirad lo que quiero es como el menú de esta página:

http://www.disfrutaloscorrs.com/
Donde pone, por ej. en esta pagina "El Club", "The Corrs", "Andrea Corr", "Multimedia" o "Videos", a mi en vez de salir todo seguido me salía uno debajo del otro...
El texto es siempre en horizontal si tu no le indicas lo contrario y dependiendo del ancho que tenga el div. Si tu te metes en el div "menu-horizontal" y escribes, verás que se te coloca el texto uno al lado del otro sin ponerle párrafos ya que te los colocará uno debajo del otro.

Si quieres que el texto sea rosa y centrado, entonces debes de especificarselo.

Por ejemplo, en tu hoja de estilos le das atributos a los vinculos:

#menu-horizontal {text-align:center; bla bla bla}
#menu-horizontal a:link { color:pink; }
#menu-horizontal a:hover {color:orange; }


Te explico, en el div menu-horizontal, ademas de ponerle el ancho, bordes, etc, le das una alineacion centrada para que de esta forma , todo el texto que introduzcas sea centrado.

a:link, son los vinculos
a:hover, es el viinculo cuando le pasas el raton.

Si te fijas, a los vinculos les he vuelto a poner el div "menu-horizontal" para que de esta forma todos los vinculos que hayan dentro de este div tengan estas caracteristicas, pudiendo establecerle otro tipo de vínculos a todo el documento.

osea que si hubieras puesto solo el a:link, sin el "menu-horizontal" le hubireras aplicado estilos a todos los vinculos del documento y de esta forma solo son validos dentro del div.

No sé si me he explicado muy bien :oops:
Pues lo he puesto tal y como me lo has dicho y me sigue saliendo igual, mira:

[contenido no disponible]
Intentalo así
* {margin: 0px ; padding: 0px ; border:0px }
body {text-align:center}
#global {background-color: gray ; width: 800px ; margin: 10px auto ; padding: 0px}
#banner {background-color: pink }
#menu-horizontal {background-color: green ; width: auto}
#cuerpo {background-color: blue ; }
#textos {background-color: yellow ; float: left ; width: 800px ; text-align: justify ; }
#menu-izq-1 {background-color: cyan ; float: left ; width: 150px ; }
#menu-izq-1 li {list-style: none }
#menu-izq-2 {background-color: red ; float: left ; width: 150px ; clear: left }
#espacio-inferior {background-color: pink ; clear: both}

y......

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Titulo</title>
<LINK rel="stylesheet" href="estilos4.css" type="text/css" media="all">
</head><body><div id="global">

<div id="banner">Aqui iria el bannerr</div>
<div id="menu-horizontal"><a>opcion1</a> | <a>opcion2</a> | <a>opcion3</a> | <a>opcion4</a></div>
<div id="cuerpo">
<div id="textos">
<div id="menu-izq-1">menu secundario<ul>
  • a
  • a</div>
    <div id="menu-izq-2">Aqui aun no se que poner.</div>


    Aqui pondría las noticias.</p>

    Aqui irian los contenidos de la web</p></div>
    </div>
    <div id="espacio-inferior">curva inferior</div>

    </div></body></html>

  • Jorgens, te falta solo ponerle las imagenes de arriba, ja ja ja ja

    Bsks!
    Siiiii, por fin!!!! Muchisimas gracias :D , lo que me teneís que aguantar con lo pesada que soy :oops: :roll:
    Igual te cuesta un poco adaptarlo a tu gusto, es decir, meterle todas tus imagenes y eso. No dudes en pedirnos ayuda!
    Sólo un apunte.

    Para que tu menú sea horizontal, en vez de vertical, da igual que sea con DIV o con Tablas (aunque la estructura de una web con DIV es mucho más flexible y profesional, pero esa es otra guerra).

    Lo importante son las siguientes ideas.

    Generalmente (por no decir siempre), los menús se hacen con listas, o sea que tendrás:

    <ul>
      [*]<a href="#">Elemento
      [*]<a href="#">Elemento
      [*]<a href="#">Elemento
    [/list]


    Bueno, pues sólo hay que hacer que la lista sea horizontal. Vamos a suponer que está en un DIV llamado menú, con lo que el CSS quedaría así:

    #menu li { float: left ; }

    Eso es suficiente para que sea una lista horizontal.
    Pero claro, ahora querrás que no salga el puntito, bueno pues pon esto:

    #menu ul { list-style: none ; }

    Si quieres que salga otra cosa, pues cambias el "none" por lo que sea, incluso una imagen poniendo: url("especial.gif") si mal no recuerdo.
    Es posible también que se te peguen mucho los elementos unos a otros, pues ponles un margen a la derecha:

    #menu li { float: left; margin: 0px 7px 0px 0px ; }

    Total, que sin cambiar tu HTML, hemos añadido lo siguiente al CSS:

    #menu ul { list-style: none ;}
    #menu li { float: left; margin: 0px 7px 0px 0px ; }
    Y ya está :wink:
    Fijate, es justo lo que estaba poniendo ahora en una de mis lecciones con el Html-Kit, je je je. Salvo lo de poner la lista en modo horizontal, que voy a incluirlo en ellas ahora mismo, no había caido en eso.

    La verdad es que es lo mejor, los menus con listas, que para eso están.

    Un saludo y gracias Hq! :wink:
    Hola otra vez :D yo tambien quiero hacer la pagina web con divs y nuestro amigo enole tiene la estructura perfecta para mi web de "TodoWolfenstein" pero he estado intentando colocar los divs como en esa imagen y no soy capaz :( :( :( entonces, no se si alguien me podra dar la estructura ya hecha jeje? :D


    Bueno un slaudo y gracias que me estais ayudando mucho :wink:
    ahhh no respondais ya jaja que tonto soy no mire el ejemplo de divs de jorgens :D , ya ta todo areglado :P
    Que bien que lo pudiste arreglar

    solo es cuestión de investigar un poco

    saludos
    Te lo iba a decir ahora. Jorgens pone un ejemplo en su primera respuesta jejeje.

    Si no te sale, puedes abrir un nuevo tema preguntando las dudas que tengas.
    He intentado de la manera que dice Hq pero encuentro una pega que no se como solucionar y es que al volver la lista en modo horizontal se borra el fondo que tenia definido para el div del menu, es decir se borra el color de fondo y tampoco funcionan las imagenes de fondo de ese div.

    Gracias de antemano y Saludos
    Hola

    para ayudarte mejor, copia y pega aqui tus codigos, para ver si falla algo

    pero no olvides activar la casilla de abajo que dice: deshabilitar HTML en este mensaje

    saludos
    Html
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Page title</title>
    <link rel= "stylesheet" href= "estilo-general.css" type= "text/css" media= "all">
    </head>
    <body>
    <div id= "global">
    <div id= "banner-principal"></div>
    <div id= "curva-superior"></div>
    <div id= "cabecera">bienvenidos a mi web</div>
    <div id= "navegacion"><ul>
  • Inicio
  • Grupo
  • Mestre
  • Clases
  • Galeria
  • contactanos</div>
    <div id= "cuerpo-superior"></div>
    <div id= "contenido">
    <div id= "menu">
    <ul>
  • enlace 1
  • enlace 2
  • enlace 3
    </div>


    Esta sera la zona principal de la web</p>

    Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>



    Y este es el tercer párrafo. En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>



    Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p></div>
    <div id= "cuerpo-inferior"></div>
    <div id= "pie">este es el pie de pagina</div>
    <div id= "curva-inferior"></div>
    </div>
    </body>
    </html>

  • Css
    body{background-image: url(objetos/fondo-azul.jpg) ; text-align: center}
    #cabecera{background-color: white ; border-left: black 1px solid ; border-right: black 1px solid}
    #navegacion{background-color: gray ; border-right: black 1px solid ; border-left: black1px solid ; border-bottom: black 1px solid}
    #contenido{background-image: url(objetos/cuerpo-central.jpg) ; background-repeat: y ; width: auto}
    #pie{background-color: white ; border-top: black 1px solid ; border-left: black 1px solid ; border-right: black 1px solid}
    #global{width: 800px ; margin: 4px auto}
    #menu{background-color: yellow ; width: 150px ; float: left ; text-align: left ; margin: 5px 10px 3px 10px}
    #menu li{list-style: none ; margin: 0px 0px 0px 5px}
    *{margin: 0px ; padding: 0px ; border: 0px}
    a{color: blue ; text-decoration: none}
    a:link{}
    a:visited{}
    a:hover{color: red ; text-decoration: underline ; background-color: silver}
    a:active{}
    p{text-align: justify}
    #contenido p{padding: 5px 20px 5px 20px ; text-indent: 15px}
    #curva-superior{background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width: 800px ; height: 12px ; overflow: hidden}
    #curva-inferior{background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width: 800px ; height: 12px ; overflow: hidden}
    #cuerpo-superior{background-image: url(objetos/cuerpo-superior.jpg) ; width: 800px ; height: 30px}
    #cuerpo-inferior{background-image: url(objetos/cuerpo-inferior.jpg) ; width: 800px ; height: 30px}
    #banner-principal{background-image: url(objetos/banner-principal.jpg) ; width: 800px ; height: 150px}
    #navegacion li{float: left ; margin: 0px 10px 0px 0px ; display: block ; background-color: gray}
    #navegacion ul{list-style: none}

    Screen
    [contenido no disponible]
    Aún tengo que mirar el codigo mejor, pero por el momento te puedo decir que...

    1.- Cierra la lista del menu navegacion. Te falta cerrarlo con :
    <div id= "navegacion"><ul>
  • Inicio
  • Grupo
  • Mestre
  • Clases
  • Galeria
  • contactanos</div>


  • 2.- La linea
    *{margin: 0px ; padding: 0px ; border: 0px}
    tienes que ponerla la primera de la hoja de estilo, pues si no, estarás anulando los margenes y bordes de todas las capas que hay escritas en la hoja antes que esa linea.. Ponla la primera de la hoja de estilos.

    3.- Separa esto por si acaso:
    #navegacion{background-color: gray ; border-right: black 1px solid ; border-left: black1px solid ; border-bottom: black 1px solid}
    es decir, deja un espacio en blanco entre black y 1px.

    Que tal asi?