Entrar

el menu del lateral

mar33 · · Solicitar retirada
resulta q komo tenia la oja de estilo general inkompleta e optado por kopiar laq bosotros me poniais en la tercera fase en el apartado mas estilo.y no se komo lo e escho para q el menu lateral me salga diferente.x una parte lo amarrillo seme pasa del espacio naranja al blanko y los enlaces estan muco mas separados. te kopio la oja de estilo y la plantilla aber en q me puedes ayudar.

HOJA DE ESTILO GENERAL:

* {text-indent:0px ; 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}
body {text-align: center }
#global {width:800px ; margin:4px auto }
#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#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 ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; 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 {margin: 5px 10px 0px 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 }
#menu h1 {}
#pie { background-color: white ;
border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
------------------------------------------------------------------------------------



HOJA DE LA PLANTILLA:


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

<html>
<head><link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<title>Page title</title>
</head>
<body>
<div id="global">
<div id="curva-superior"></div>

<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</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>
    <h1>Título de Sección 1</h1>
  • 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>
    ---------------------------------------------------------------------

    a y todabia no e logrado solucionar el problema anterior.( la ancura de la pagina kitando la curba superior, la inferio y las dos capas q emos creado para el logotipo y la publicidad es mayor.)y tambien necesito ayuda para eso gracias.
    • (mar33) un saludo
    Raulyure · · Solicitar retirada
    mar33 escribió:resulta q komo tenia la oja de estilo general inkompleta e optado por kopiar laq bosotros me poniais en la tercera fase en el apartado mas estilo.y no se komo lo e escho para q el menu lateral me salga diferente.x una parte lo amarrillo seme pasa del espacio naranja al blanko y los enlaces estan muco mas separados. te kopio la oja de estilo y la plantilla aber en q me puedes ayudar.

    HOJA DE ESTILO GENERAL:

    * {text-indent:0px ; 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}
    body {text-align: center }
    #global {width:800px ; margin:4px auto }
    #curva-superior { background-image: url(objetos/curva-superior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    #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 ; font-size: 16px }
    #navegacion {background-color: gray ; border: black 1px solid ; 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 {margin: 5px 10px 0px 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 }
    #menu h1 {}
    #pie { background-color: white ;
    border-left: black 1px solid ;
    border-right: black 1px solid;
    border-top: black 1px solid }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    a {color: brown ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color: silver}
    a:active {}
    ------------------------------------------------------------------------------------



    HOJA DE LA PLANTILLA:


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

    <html>
    <head><link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    <title>Page title</title>
    </head>
    <body>
    <div id="global">
    <div id="curva-superior"></div>

    <div id="cabecera">
    <div id="logotipo">[contenido no disponible]</div>
    <div id="publicidad">Bienvenidos a mi Web</div>
    </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>
    <h1>Título de Sección 1</h1>
  • 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>
    ---------------------------------------------------------------------

    a y todabia no e logrado solucionar el problema anterior.( la ancura de la pagina kitando la curba superior, la inferio y las dos capas q emos creado para el logotipo y la publicidad es mayor.)y tambien necesito ayuda para eso gracias.

    • Hola:
    Veo que usted en su página tiene esto:
    <body>
    <div id="global">
    <div id="curva-superior"></div>

    <div id="cabecera">
    <div id="logotipo">[contenido no disponible]</div>
    <div id="publicidad">Bienvenidos a mi Web</div>
    </div>

    </div>

    <div id="navegacion">
    <ul>
    etc. etc. etc.</div>

    Usted abre la capa cabecera, dentro de ella crea la capa logotipo y la cierra con un </div>
    también dentro de la capa cabecera crea la capa publicidad y la cierra con un </div>, luego abajo de la capa publicidad tiene puesto un </div> que es el que cierra la capa cabecera, hasta allí, todo bien, pero abajo de ese </div> que cierra la capa cabecera, usted tiene puesto otro cierre </div>. Yo diría que ese sobra, ya que al poner ese </div> lo que hace es cerrar la capa global, y todo lo que viene después quedaría fuera de la capa global, algo totalmente erróneo.
    Debiera de tenerlo así:
    <body>
    <div id="global">
    <div id="curva-superior"></div>

    <div id="cabecera">
    <div id="logotipo">[contenido no disponible]</div>
    <div id="publicidad">Bienvenidos a mi Web</div>
    </div>
    <div id="navegacion">
    <ul>
    etc. etc. etc.</div>
    Saludos
    Agradecido de los que aprenden enseñando
    mar33 · · Solicitar retirada
    el problema de la anchura ya esta solucionado y aora qda el otro.aber si alguien konsige ayudarme plissssss :cry: :cry:
    (mar33) un saludo
    Raulyure · · Solicitar retirada
    mar33 escribió:el problema de la anchura ya esta solucionado y aora qda el otro.aber si alguien konsige ayudarme plissssss :cry: :cry:
    Hola:
    ¿Que tal si nos dice ahora cuál es el otro problema que tiene? Si pudiese hacerlo un poco mas detallado se lo agradecería así se podría ver mejor como solucionarlo, en todo caso como adelanto, por si aún no lo ha puesto, le sugiero que en su hoja de estilo donde dice #contenido p{margin etc. etc. etc.}, borre la palabra margin y ponga padding
    saludos
    Agradecido de los que aprenden enseñando
    mar33 · · Solicitar retirada
    antetodo primer pedir disculpas por como escribo pero esq soi de guipuzcoa y no seme da mui bien escribir en castellano.

    mi problema es el sigiente: el menu vertical tiene un fondo amarillo el cual se sale por la parte de abajo de su correspondiente espacio y no le encuentro solucion, y el sigiente problema es que en el mismo menu los enlaces entre ellos tienen aproximadamente el doble de espacio etre medio de loq deberian tener.


    he corregido los fallos q me abeis dicho pero sige asi: os buelbo a kopiar las hojas.


    HOJA DE ESTILO GENRAL:

    * {text-indent:0px ; 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}
    body {text-align: center }
    #global {width:800px ; margin:4px auto }
    #curva-superior { background-image: url(objetos/curva-superior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    #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 ; font-size: 16px }
    #navegacion {background-color: gray ; border: black 1px solid ; 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 0px 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 }
    #menu h1 {}
    #pie { background-color: white ;
    border-left: black 1px solid ;
    border-right: black 1px solid;
    border-top: black 1px solid }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    a {color: brown ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color: silver}
    a:active {}
    --------------------------------------------------------------------------------


    HOJA DE LA PLANTILLA:


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

    <html>
    <head><link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    <title>Page title</title>
    </head>
    <body>
    <div id="global">
    <div id="curva-superior"></div>

    <div id="cabecera">
    <div id="logotipo">[contenido no disponible]</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>
    <h1>Título de Sección 1</h1>
  • 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>



    ---------------------------------------------------------------------------------

    [contenido no disponible]
    [contenido no disponible]
    ---------------------------------------------------------------------------

    os he itentado poner una imajgen de mi problema aber si se be algo.

    espero buestra ayuda gracias :D
    • (mar33) un saludo
    SaYaN · · Solicitar retirada
    El problema del doble espacio entre los enlaces es el siguiente, donde pones#menu li{margin:4px 0px 4px 6px} Y es cierto, es exactamente el doble del que quieres, por la sencilla razon de que lo defines así, defines que quieres 4px por arriba y 4px por abajo. te lo pongo de forma un poco mas g´rafica a ver si se ve mejor, xDDD.

    4px{significa lo que defines por la parte de arriba del enlace}
    ENLACE
    4px{significa lo que defines por la parte de abajo del enlace}
    4px{estos pixeles son los que defines por la parte de arriba del siguiente enlace}
    ENLACE
    4px{significa lo que defines por la parte de abajo del enlace}
    4px{estos pixeles son los que defines por la parte de arriba del siguiente enlace}
    ENLACE
    4px{significa lo que defines por la parte de abajo del enlace}

    Me entendiste esta parte, si es así creo que sabrás como solucionarlo, xDDD, no te lo digo porque creo qeu asi no aprendemos nada, jeje, si te doy la solución la copias, y puede que para otras cosas cometas el mismo error, y es importante qeu este apartado te quede claro a la hora de poner imágenes en tu web, xDDD. Creo firmemente que si has llegado a este punto del tutorial eres capaz de corregir el fallo, xDDD. Si prefieres que te lo diga, te lo digo.

    El otro fallo lo reviso ahora.

    EDITO EL MENSAJE_____: No hace falta que lo revise mas, creo que es por culpa de todo lo que buenamente he intentado explikartelo antes, xDD.

    Una vez corrijas esto, creo que se solucionará todo el problema.

    El segundo problema pasa porque tienes mas espacio interior en el menú que exterior, por eso tapa lo de abajo, xDDD.
    mar33 · · Solicitar retirada
    gracias por la esplicacion ya lo e solucionado y boi a segir aciendo el curso paso a paso jeje. si buelbo a tener algun problema ya bolbere jeje.


    graciasssssssssss :P :P
    (mar33) un saludo
    Raulyure · · Solicitar retirada
    SaYaN escribió:El problema del doble espacio entre los enlaces es el siguiente, donde pones#menu li{margin:4px 0px 4px 6px} Y es cierto, es exactamente el doble del que quieres, por la sencilla razon de que lo defines así, defines que quieres 4px por arriba y 4px por abajo. te lo pongo de forma un poco mas g´rafica a ver si se ve mejor, xDDD.

    4px{significa lo que defines por la parte de arriba del enlace}
    ENLACE
    4px{significa lo que defines por la parte de abajo del enlace}
    4px{estos pixeles son los que defines por la parte de arriba del siguiente enlace}
    ENLACE
    4px{significa lo que defines por la parte de abajo del enlace}
    4px{estos pixeles son los que defines por la parte de arriba del siguiente enlace}
    ENLACE
    4px{significa lo que defines por la parte de abajo del enlace}

    Me entendiste esta parte, si es así creo que sabrás como solucionarlo, xDDD, no te lo digo porque creo qeu asi no aprendemos nada, jeje, si te doy la solución la copias, y puede que para otras cosas cometas el mismo error, y es importante qeu este apartado te quede claro a la hora de poner imágenes en tu web, xDDD. Creo firmemente que si has llegado a este punto del tutorial eres capaz de corregir el fallo, xDDD. Si prefieres que te lo diga, te lo digo.

    El otro fallo lo reviso ahora.

    EDITO EL MENSAJE_____: No hace falta que lo revise mas, creo que es por culpa de todo lo que buenamente he intentado explikartelo antes, xDD.

    Una vez corrijas esto, creo que se solucionará todo el problema.

    El segundo problema pasa porque tienes mas espacio interior en el menú que exterior, por eso tapa lo de abajo, xDDD.
    Hola:
    Me parece muy buena la explicación, muchas veces utilizándo un poco la lógica, suelen arreglarse problemas que parecen insolucionables
    Saludos
    Agradecido de los que aprenden enseñando
    SaYaN · · Solicitar retirada
    Gracias raulyure, xDD.

    Algo he aprendido en el curso, no??, jeje. En realidad todas las preguntas que contesto estan muy bien explikadas por jorgens en la página principal.

    Por suerte yo lo he entendido bastante bien todo lo que explika, y solo repruduzco con otras palabras para los que no lo entienden. Por cierto estoy a esperas de las nuevas elcciones, xDD.

    Aunque tal y como está ya es suficiente para crear tu web.

    Saludos.
    Raulyure · · Solicitar retirada
    mar33 escribió:antetodo primer pedir disculpas por como escribo pero esq soi de guipuzcoa y no seme da mui bien escribir en castellano.

    mi problema es el sigiente: el menu vertical tiene un fondo amarillo el cual se sale por la parte de abajo de su correspondiente espacio y no le encuentro solucion, y el sigiente problema es que en el mismo menu los enlaces entre ellos tienen aproximadamente el doble de espacio etre medio de loq deberian tener.


    he corregido los fallos q me abeis dicho pero sige asi: os buelbo a kopiar las hojas.


    HOJA DE ESTILO GENRAL:

    * {text-indent:0px ; 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}
    body {text-align: center }
    #global {width:800px ; margin:4px auto }
    #curva-superior { background-image: url(objetos/curva-superior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    #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 ; font-size: 16px }
    #navegacion {background-color: gray ; border: black 1px solid ; 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 0px 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 }
    #menu h1 {}
    #pie { background-color: white ;
    border-left: black 1px solid ;
    border-right: black 1px solid;
    border-top: black 1px solid }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    a {color: brown ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color: silver}
    a:active {}
    --------------------------------------------------------------------------------


    HOJA DE LA PLANTILLA:


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

    <html>
    <head><link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    <title>Page title</title>
    </head>
    <body>
    <div id="global">
    <div id="curva-superior"></div>

    <div id="cabecera">
    <div id="logotipo">[contenido no disponible]</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>
    <h1>Título de Sección 1</h1>
  • 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>



    ---------------------------------------------------------------------------------

    [contenido no disponible]
    [contenido no disponible]
    ---------------------------------------------------------------------------

    os he itentado poner una imajgen de mi problema aber si se be algo.

    espero buestra ayuda gracias :D
    • Hola:
    Quisiera aclararle que usted no tiene que pedir disculpas del como escribe, ya que habemos mucha variedad de personas en este foro, y de muchas nacionalidades que utilizan diferentes maneras de expresarse, o diferentes palabras para el mismo concepto o idea, aunque lógicamente tratamos de usar una lengua común que sería el español o castellano, pero que a muchos les cuesta ya que suelen tener una lengua nativa, mi hijo estudia en la ikastola y suele mezclar algunas palabras y letras, y eso yo lo considero muy normal, y lo mas importante, es que él lo considera aún mas normal, y no está disculpándose por escribir o hablar de tal y tal manera, así que usted no se preocupe que siempre habrá alguien que entienda lo que dice, y si no lo entiende, le dirá que si puede explicarse mejor
    Saludos