Entrar

el menu lateral

mar33 · · Solicitar retirada
ola pues buelbo a tener el mismo problema anterior y no puedo arreglarlo porque los px estan al minimo. te kopio las hojas y te pongo una imajen de mi problema.

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 {padding: 5px 10px 0px 10px ; text-indent: 15px}
#menu {background-color: yellow ; width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 3px ;background-image: url(objetos/menu-parte-inferior.gif) ;background-position: bottom ;padding-bottom:5px }
#menu li {list-style:none ; margin: 0px 0px 0px 0px }
#menu h1 {text-decoration:none ; font-size:12px ; background-image: url(objetos/menu-parte-superior.gif) }

#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
  • Enlace 4

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


    Y aora ba la imagen del problema:

    [contenido no disponible]
    [contenido no disponible]


    aber si me ayudais porfavor y gracias!!!
    • (mar33) un saludo
    SaYaN · · Solicitar retirada
    Creo que entre todos debemos poner orden en el foro, asike vamos a empezar, este problema lo podias postear en el tema que has creado ya, y es muy sencillo el problema que pasa.

    El menú lateral ocupa mas espaio que lo que tienes en el div que has pintado de naranja. por esto se sale por abajo.

    Si borras un enlace, o simplemente escribes un párrafo mas en el div que has pintado de naranja se soluciona.
    Raulyure · · Solicitar retirada
    mar33 escribió:ola pues buelbo a tener el mismo problema anterior y no puedo arreglarlo porque los px estan al minimo. te kopio las hojas y te pongo una imajen de mi problema.

    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 {padding: 5px 10px 0px 10px ; text-indent: 15px}
    #menu {background-color: yellow ; width: 150px ; float:left ;
    text-align:left ; margin: 3px 10px 3px 3px ;background-image: url(objetos/menu-parte-inferior.gif) ;background-position: bottom ;padding-bottom:5px }
    #menu li {list-style:none ; margin: 0px 0px 0px 0px }
    #menu h1 {text-decoration:none ; font-size:12px ; background-image: url(objetos/menu-parte-superior.gif) }

    #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
  • Enlace 4

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


    Y aora ba la imagen del problema:

    [contenido no disponible]
    [contenido no disponible]


    aber si me ayudais porfavor y gracias!!!
    • Hola:
    Puede que si usted pone la lista del menu en una sola línea y no una debajo de otra se le solucione algo, como por ejemplo resumiendo
    <div id ="menu"><ul>
  • etc.
  • etc.
  • etc</div>
    • Agradecido de los que aprenden enseñando
    Starbuck82 · · Solicitar retirada
    Hola

    Bueno, despues del desastroso intento anterior de conseguir algo decente, decidí borrarlo todo y empezar otra vez de cero, para no liarme todavia más!!

    Hasta el momento iba todo sobre ruedas, estaba poniendo los enlaces del pie de pagina, pero me he dado cuenta de que algo pasa con el menu lateral, me queda parecido al de mar33 pero los bordes se ven como desencajados!! una cosa rara, los bordes laterales no encajan con el superior e inferior y se ve en los laterales como unos cachos como si hubiese pegados a los lados otros cuadros de menu. Bueno, no se si me he explicado bien espero que me entendais.
    Seguiré revisando todo pero por si acaso os copio aqui mis codigos, a ver si me pondeis ayudar, supongo que el error estará en la hoja de estilos, no en la plantilla, pero os pongo los 2 por si acaso:

    Codigos estilo-general.css:

    * {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: lorange ; width: 150px ; float:left ;
    text-align:left ; margin: 3px 10px 3px 3px ;
    background-image: url(objetos/menu-parte-inferior.gif);
    background-position: bottom ;
    padding-bottom:5px }
    #menu li { list-style:none ; margin: 4px 8px 4px 6px}
    #menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;
    background-image: url(objetos/menu-parte-superior.gif) }
    #pie { background-color: white ;
    border-left: black 1px solid ;
    border-right: black 1px solid;
    border-top: black 1px solid ;
    height: 65px}
    #pieuno {float:left ; width:150px ;
    border-right: black 1px solid }
    #pie li {list-style: none ; font-size: 12px }
    #piedos {float:left ; width:498px }
    #pietres {float:left ; width:150px ;
    border-left: 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 {}
    p {text-align: justify}


    Codigos plantilla.html:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Pagina Principal del Ejemplo CCTW</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">[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">
    <h1>Título de Sección 1</h1>
    <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">
    <div id="pieuno">
    <ul>
  • Foro Ejemplo
  • Contactos
  • Nos Enlazan

    </div>
    <div id="piedos">pie dos</div>
    <div id="pietres">
    <ul>
  • Directorio
  • TopSite
  • Mapa de la Web

    </div>
    </div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>

    He utilizado esta imagen de mar33 porque no se como hacer una captura de mi vista previa, en la mia se ven los bordes laterales del recuadro del menu desencajados!!

    [contenido no disponible]

    Muchas gracias por vuestra ayuda, me estas sacando de muchos lios

    Saludos

    Starbuck
    • Raulyure · · Solicitar retirada
    Starbuck82 escribió:Hola

    Bueno, despues del desastroso intento anterior de conseguir algo decente, decidí borrarlo todo y empezar otra vez de cero, para no liarme todavia más!!

    Hasta el momento iba todo sobre ruedas, estaba poniendo los enlaces del pie de pagina, pero me he dado cuenta de que algo pasa con el menu lateral, me queda parecido al de mar33 pero los bordes se ven como desencajados!! una cosa rara, los bordes laterales no encajan con el superior e inferior y se ve en los laterales como unos cachos como si hubiese pegados a los lados otros cuadros de menu. Bueno, no se si me he explicado bien espero que me entendais.
    Seguiré revisando todo pero por si acaso os copio aqui mis codigos, a ver si me pondeis ayudar, supongo que el error estará en la hoja de estilos, no en la plantilla, pero os pongo los 2 por si acaso:

    Codigos estilo-general.css:

    * {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: lorange ; width: 150px ; float:left ;
    text-align:left ; margin: 3px 10px 3px 3px ;
    background-image: url(objetos/menu-parte-inferior.gif);
    background-position: bottom ;
    padding-bottom:5px }
    #menu li { list-style:none ; margin: 4px 8px 4px 6px}
    #menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;
    background-image: url(objetos/menu-parte-superior.gif) }
    #pie { background-color: white ;
    border-left: black 1px solid ;
    border-right: black 1px solid;
    border-top: black 1px solid ;
    height: 65px}
    #pieuno {float:left ; width:150px ;
    border-right: black 1px solid }
    #pie li {list-style: none ; font-size: 12px }
    #piedos {float:left ; width:498px }
    #pietres {float:left ; width:150px ;
    border-left: 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 {}
    p {text-align: justify}


    Codigos plantilla.html:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Pagina Principal del Ejemplo CCTW</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">[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">
    <h1>Título de Sección 1</h1>
    <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">
    <div id="pieuno">
    <ul>
  • Foro Ejemplo
  • Contactos
  • Nos Enlazan

    </div>
    <div id="piedos">pie dos</div>
    <div id="pietres">
    <ul>
  • Directorio
  • TopSite
  • Mapa de la Web

    </div>
    </div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>

    He utilizado esta imagen de mar33 porque no se como hacer una captura de mi vista previa, en la mia se ven los bordes laterales del recuadro del menu desencajados!!

    [contenido no disponible]

    Muchas gracias por vuestra ayuda, me estas sacando de muchos lios

    Saludos

    Starbuck
    • Hola:
    Se lo voy a decir así muy rápido porque me tengo que ir a trabajar, revise un poco el curso en lo que tiene que ver con la capa contenido, en alguna parte dice que hay que ponerle a la capa contenido una anchura por mientras para poder fijarla, ponerle un width: 800px, después de eso hay que arreglar alguna cosa y ya se le podrá quitar ese 800 y ponerle a al width un width:auto;, es que a veces hay que hacer una cosa en una parte para que se arregle otra, mas tarde veré mejor sus códigos, se podría decir que mas o menos es la misma situación de mars33.
    Saludos
    Agradecido de los que aprenden enseñando
    Starbuck82 · · Solicitar retirada
    Consegui arreglar mis problemas con el menu lateral y ahora se ve perfecto, muchas gracias por vuestra ayuda