enlaces en menu horizontal

Hola foro!

Cuando coloco los enlaces al menu horizontal, es decir, al pasar desde:

<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="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</a>
</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
  • Sección 1
  • Sección 2
  • Sección 3
  • Sección 4

    </div>

  • <div id="contenido">
    <div id="menu">
    <ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
    </div>
    <h1>Esta será la zona principal de la web</h1>


    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>
    <h2>Y este es el tercer párrafo.</h2>

    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="pie">Este es el pié de página</div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>

    Hasta:


    <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="curva-superior"></div>
    <div id="cabecera">
    <div id="logotipo">
    <a href="index.html">
    [contenido no disponible]
    </a>
    </div>
    <div id="publicidad">Bienvenidos a mi Web</div>
    </div>
    <div id="navegacion">
    <ul>
  • Sección 1
  • Sección 2
  • Sección 3
  • Sección 4

    </div>

  • <div id="contenido">
    <div id="menu">
    <ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
    </div>
    <h1>Esta será la zona principal de la web</h1>


    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>
    <h2>Y este es el tercer párrafo.</h2>

    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="pie">Este es el pié de página</div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>


    Me encuentro que el espacio del menu horizontal crece por el lado derecho y en anchura tambien
    Las secciones del menu: 1, 2, 3... se colocan en posicion vertical
    Los enlaces responden correctamente tanto en la adopcion del color rojo, como en el subrallado y el cambio de color de fondo al seleccionarlos...

    Donde esta tanto fallo?
  • Un abrazo muy fuerte!
    HOLA:

    ANTES NO ME HA DEJADO CONTESTAR ME HA FRACASADO LA PAGINA VEAMOS AHORA SI PUEDO CONTESTARTE A TI

    En primer lugar nos has mostrado parcialmente tu OBRA, ya que para ver bien deberias haber puesto la HOJA DE ESTILOS CSS, como veo que no eres novto o al menos no lo pareces por el numero de mensajes aqui te dejo algo parecido a lo que debes poner en la HOJA DE ESTILO.CSS

    #navegacion {background-color: #CCFF66 ; border: 1px solid black; height:20px; }
    #navegacion li {float:left; list-style:none ; margin: 0 12px 0 16px ;}
    #navegacion ul { margin-left: 80px }

    Este trabajo debe de ir paralelo al de tu PLANTILLA O EL INDEX

    ESPERO HABERTE SIDO DE AYUDA

    UN SALUDO: SARUMAN
    Es ESENCIAL en este mundo, para no crear vagos ENSEÑAR
    Hola foro!!

    Creo que lo de los enlaces se debe a que pregunto mucho y abanzo poco...

    Hace tanto tiempo que no abro la carpeta de estilos.css que: radiela! Si apenas hay nada!!!

    Esta es mi hoja de estilos.css:

    body {background-color: #E6E6FA; background-image: url(objetos/fondo.png); background-position: center center; background-repeat: no-repeat; height: 100%}
    img {border-style: none}
    .centrado {text-align: center}


    El tema es que ni me di cuenta que en la leccion me pidiera modificarla...

    Por otro lado, esta carpeta modifoca la pagina "index.html" y lo que yo quiero es solucionar el tema del tamaño y la horizontalidad de "plantilla.html". Es decir, no entiendo porque es importante el cambio propuesto...

    En todo caso agradezco el apoyo!!!
    Un abrazo muy fuerte!
    Perdon foro...

    Ya veo que te referias a la de estilo-general.css

    Si ves que soy novato del todo?

    De momento tengo la hoja de estilos de este modo:



    * {margin:0px ; padding:0px ; border: 0px}
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}
    #logotipo {width:280px ; float:left }
    #publicidad {width:518px ; float:right ; margin-top:25px}
    #navegacion {background-color: gray ; border: 1px solid black ; height:20px}
    #navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
    #navegacion ul { margin-left: 180px }
    #contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid }
    #contenido p {padding: 5px 10px 5px 10px; text-indent: 15px }
    #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left; margin:3px 10px 3px 3px }
    #menu li {list-style:none ; margin: 4px 0px 4px 6px}
    a {color: brown ; font-size: 1.3em; text-decoration: none; display: block; height: 1em }
    a:link {}
    a:visited {}
    a:hover {color: red ;text-decoration: underline; background-color: silver }
    a:active {}
    #pie { background-color: white ; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid }
    p {text-align: justify}
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
    #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 }


    En #navegacion ul {margin-left: 80 px} me centra mejor el menu horizontal que cambiando a #navegacion ul {margin-left: 180px } que me propones y que me desplaza el menu horizontal hacia la izquierda...

    En todo caso el problema es el que te expuse en el primer mensaje...
    Un abrazo muy fuerte!
    HOLA:
    Tal vez yo me he explicado mal o alopeor no me has entendido
    vamos a ver si ahora nos entendemos:
    para hacer la pagina debes haber creado varios documentos

    UNO es el INDEX.HTML. (LO QUE QUIERES QUE SE VEA)

    otro es: ESTILOS.CSS (INSTRUCCIONES GENERICAS)

    OTRO: ESTILO GENERAL.CSS ( quitar instrucciones y carga de tu plantilla o del index), en esta es la que debesde tener ls instrucciones que hemos hablado antes)

    UNA CARPETA DE OBJETOS (para meter tus dibujos o tus fotos e imagenes)

    No se si ahora me he explicado o si tendra que comenzar a seguir las instrucciones del curso PASO A PASO

    UN SALUDO: SARUMAN



    ESTO ES LO BASICO digamos
    Es ESENCIAL en este mundo, para no crear vagos ENSEÑAR
    HOLA DE NUEVO
    parece que mientras escribia yo yu has mandado el otro mensaje bien pues haz esta prueba:



    #navegacion ul { margin-left: 180px } rebaja el 180 a 120 o a 100,

    espero que asi se te arregle

    UN SALUDO: SARUMAN
    Es ESENCIAL en este mundo, para no crear vagos ENSEÑAR
    Hola foro!!!

    he llegado provando hasta:

    # navegacion ul { margin-left: 20px }

    Lo unico que sucede (ya en 20px) es que el menu horizontal se desplaza, un poquito apenas, mas al centro de la barra de menu horizontal.

    Pero el menu se mantiene en posicion vertical...

    No se como te puedo ayudar mejor a que veas el problema. Puedes indicarme como darte mas pistas?
    Un abrazo muy fuerte!
    isalavedra escribió:Hola foro!!!

    he llegado provando hasta:

    # navegacion ul { margin-left: 20px }

    Lo unico que sucede (ya en 20px) es que el menu horizontal se desplaza, un poquito apenas, mas al centro de la barra de menu horizontal.

    Pero el menu se mantiene en posicion vertical...

    No se como te puedo ayudar mejor a que veas el problema. Puedes indicarme como darte mas pistas?

    HOLA:

    Creo que te falta algo en las definiciones osea en la hoja general de estilos:
    * [text-ident:opx ] {margin:0px ; padding:0px ; border: 0px}
    p {text-align: justify}
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
    text-align: center}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
    text-align: center}
    REPASA ESTO QUE TE FALTA AQUI
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    AQUI LA CURVA SUPERIOR:

    #curva-superior { background-image: url(objetos/curva-superior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    CREO QUE LO DEMAS ESTA BIEN
    #cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}
    #logotipo {width:280px ; float:left }
    #publicidad {width:518px ; float:right ; margin-top:25px}
    #navegacion {background-color: gray ; border: 1px solid black ; height:20px}
    #navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
    #navegacion ul { margin-left: 180px }
    #contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid }
    #contenido p {padding: 5px 10px 5px 10px; text-indent: 15px }
    #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left; margin:3px 10px 3px 3px }
    #menu li {list-style:none ; margin: 4px 0px 4px 6px}
    a {color: brown ; font-size: 1.3em; text-decoration: none; display: block; height: 1em }
    a:link {}
    a:visited {}
    a:hover {color: red ;text-decoration: underline; background-color: silver }
    a:active {}
    #pie { background-color: white ; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid }
    COMO VES HAY UN POCO DE DESOREN COLOCALO POR EJEMPLO SEGUN:

    http://www.comocreartuweb.com/html-kit-tutorial/tutorial-html-kit-l…

    p {text-align: justify}
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
    #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

    CREO QUE ESTA BIEN PERO CON UN ORDEN MUY SUIGENERIS
    ESPERO QUE UNA VEZ QUE L HAYAS COLOCADO EN ORDEN TE FUNCIONE TODO

    ESPERO HABERTE SDO DE UTILIDAD

    UN SALUDO: SAUMAN
    Es ESENCIAL en este mundo, para no crear vagos ENSEÑAR
    Hola foro...

    la leche Saruman, ya tenia ganas de abandonar!

    Ya creo que lo tengo correcto...

    De:
    a { color: brown ; font-size: 1.3em ; text-decoration: none ; display: block ; height: 1em }

    He borrado
    "font-size: 1.3em" y "font-size: 1.3em"

    De:
    #contenido p {padding: 5px 10px 5px 10px; text-indent: 15px }

    He pasado a
    #contenido p {padding: 5px 10px 0px 10px; text-indent: 15px }

    Y de:
    #menu li {list-style:none ; margin: 4px 0px 4px 6px}

    He pasado a:
    #menu li {list-style:none ; margin: 4px 8px 4px 6px}

    Y he añadido:
    background-image: url(objetos/menu-parte-inferior.gif); background-position: bottom ; padding-bottom:5px
    A la linea #menu
    Y he añadido:
    #menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ; background-image: url(objetos/menu-parte-superior.gif) }

    A la hoja de estilos...
    Como lo he hecho siguiendo los codigos del enlace del final de la tercera leccion que me ofreciste, no se si ya me tocaba añadirlo o no, pero tampoco afectan al resultado de la pagina...

    Y sintiendo la extension, de tanto leer me he encontrado con incoherencias entre los codigos del final de la tercera leccion y el ejemplo del resultado de la plantilla que presenta, pero como ya es otro tema te lo presento en otro lugar y yo, de mientras, sigo con las lecciones!!!

    Graciaaaas!!!!