Entrar

Problema ( no me sale como en la imagen

DarkPatriot · · Solicitar retirada
En primer lugar felicitar al creador de la página por el tutorial (y la web también) que es uno de los mejores que he visto en mi vida: todo explicado paso a paso, detalle a detalle y sin dejarse nada por el camino. Lamentablemente yo soy de cabeza dura y poca sesera y he hecho algo mal.
Estoy en la lección 2, en Enlaces con fondos y voy a mirar y no me sale nada como tendría que salirme. ¿Alguien podría decirme en que me equivoco?
Esto es lo que tengo:

En la plantilla:

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

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

<div id="cabecera">Bienvenidos a mi Web</div>

<div id="navegacion">Barra de navegacion</div>

<div id="contenido">
<div id="menu">

<ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
    Esta será la zona principal de la web</div>

    <div id="pie">Este es el pié de página</div>
    </div>


    </body>
    </html>

    Y en estilo-general (en la Hoja de estilos) esto:

    * {margin:0px ; padding:0px ; border: 0px}
    body {text-align: center}
    #cabecera {background-color: pink }
    #navegacion {background-color: gray }
    #contenido {background-color: orange;widht:800;float:left}
    #pie {background-color: brown}
    #global {width:800px ; margin: 4px auto }
    #menu {background-color: yellow; width: 150px ; float:left;text-align:left }
    #menu li { list-style:none;margin: 4px 0px 4px 6px }
    a {color:brown;text-decoration:none;display:block}
    a:link {}
    a:visited {}
    a:hover {color:red;text-decoration:underline;background-color: silver}
    a:activate {}

    ¿Alguien podría resolver mi duda? Sin saberlo no puedo continuar :(
    • pedrocuenca · · Solicitar retirada
    darkpatriot, fijate que despues cuando cierras la lista del menu tienes que poner </div> para cerrar ek div o capa del menú.
    Luego el parrafo no le ha puesto etiqueta o le pones

    texto</p>
    o <h1> texto</h1>
    hasta luego amigo, espero que con esto te vaya bien sino estoy por aquí
    DarkPatriot · · Solicitar retirada
    Muchas gracias por tu ayuda. He puesto </div> que habías dicho al final de la <ul> y ya se parece más a la imagen, pero sigue fallandome algo. En teoría tendría que quedar así: http://www.comocreartuweb.com/html-kit-tutorial/plantilla-10.html

    Si no es mucha molestia podrías copiar esto y intentar solucionarlo?:

    En plantilla.html:

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

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

    <div id="cabecera">Bienvenidos a mi Web</div>

    <div id="navegacion">Barra de navegacion</div>

    <div id="contenido">
    <div id="menu">

    <ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
    </div>
    Esta será la zona principal de la web</div>

    <div id="pie">Este es el pié de página</div>
    </div>


    </body>
    </html>

    Y en hoja de estilo:

    * {margin:0px ; padding:0px ; border: 0px}
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #cabecera {background-color: pink }
    #navegacion {background-color: gray }
    #contenido {background-color: orange; widht:800px;float:left}
    #menu {background-color: yellow; width: 150px ; float:left;text-align:left }
    #pie {background-color: brown}


    #menu li { list-style:none;margin: 4px 0px 4px 6px }
    a {color:brown;text-decoration:none;display:block}
    a:link {}
    a:visited {}
    a:hover {color:red;text-decoration:underline;background-color: silver}
    a:activate {}






    Ah, y probé a quitar lo de widht y float y no pasa nada.


    Muchas gracias por tu ayuda amigo :D
    • pedrocuenca · · Solicitar retirada
    no le has puesto la etiqueta al parrafo

    <h1>está será la zona principal de la web</h1>

    Copia todo esto y ya verás que ahora sí


    En plantilla.html:

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

    <html>
    <head>
    <title>ejemplo cctw</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    </head>
    <body>
    <div id="global">
    <div id="cabecera">Bienvenidos a mi Web</div>
    <div id="navegacion">Barra de navegacion</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></div>
    <div id="pie">Este es el pié de página</div>
    </div>
    </body>
    </html>



    Y en hoja de estilo:

    * {margin:0px ; padding:0px ; border: 0px}
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #cabecera {background-color: pink }
    #navegacion {background-color: gray }
    #contenido {background-color: oranget}
    #menu {background-color: yellow; width: 150px ; float:left;text-align:left }
    #pie {background-color: brown}


    #menu li { list-style:none;margin: 4px 0px 4px 6px }
    a {color:brown;text-decoration:none;display:block}
    a:link {}
    a:visited {}
    a:hover {color:red;text-decoration:underline;background-color: silver}
    a:activate {}
    • pedrocuenca · · Solicitar retirada
    vale ya lo he probado en el programa, como te lo he puesto yo ahora
    te sale perfecto, pero me he equivocado en el color de contenido
    tienes que poner orange,
    y otra cosa te falta que le pongas más texto sino la página se queda corta y no la verás bien, pero sólo es porque te falta escribir más parrafos



    texto</p>, así escribe varias lineas , ya verás como sí
    Di algo
    DarkPatriot · · Solicitar retirada
    Vale, he copiado lo que me has dicho y ya me sale mejor, pero falta una cosa. Me sale así: [contenido no disponible] y tendría que quedarme la parte de naranja igual de larga que la parte de amarillo y la parte roja como las otras dos línias de arriba(como las que pone Barra de navegacion y Bienvenidos a mi web) pero debajo.Es decir así: [contenido no disponible] No se si me habrás entendido. Por cierto delcódigo que me has puesto he quitado lo de h1 porque me salía la letra muy grande y en negrita.

    Gracias, me estás ayudando fenómeno.
    =FeMe= · · Solicitar retirada
    Para que eso se arregle tiene que aplicarle un acncho de 800 pixeles a la capa contenido.
    #contenido {background-color: orange ; width: 800px}

    Saludos
    power · · Solicitar retirada
    es por que no tiene ningun tipo de letra en el contenido con lo cual no puede expandirse
    =FeMe= · · Solicitar retirada
    power escribió:es por que no tiene ningun tipo de letra en el contenido con lo cual no puede expandirse

    Ques es lo que no puede expandirse?
    power · · Solicitar retirada
    la zona principal de la web

    aver si se conecta y lo mira aver si funciona por que si no estamos perdiendo el tiempo
    =FeMe= · · Solicitar retirada
    Pero para que la zona principal de la web(capa contenido) se acople al menu, solo tiene que aplicarle el with: 800px
    DarkPatriot · · Solicitar retirada
    Hola, perdón por no conectarme antes, no tenía mucho tiempo.

    A ver, poniendo letra si que se rellena y expande pero en el tutorial sale sin nad, ninguna letra.

    Y respecto a lo del width no se por que pero no cambia nada cuando lo pongo. Os pongo nuevamente lo que he pusto para ver si he fallado en algo, porque aqui un simple fallito te lo lleva todo al garete.
    plantilla.html:


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

    <html>
    <head>
    <title>ejemplo cctw</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    </head>
    <body>
    <div id="global">
    <div id="cabecera">Bienvenidos a mi Web</div>
    <div id="navegacion">Barra de navegacion</div>
    <div id="contenido">
    <div id="menu">
    <ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3</div>
    Esta será la zona principal de la web</div>
    <div id="pie">Este es el pié de página</div>
    </div>
    </body>
    </html>




    estilos-general.css:


    * {margin:0px ; padding:0px ; border: 0px}
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #cabecera {background-color: pink }
    #navegacion {background-color: gray }
    #contenido {background-color:orange;widht:800px}
    #menu {background-color: yellow; width: 150px ; float:left;text-align:left }
    #pie {background-color: brown}


    #menu li { list-style:none;margin: 4px 0px 4px 6px }
    a {color:brown;text-decoration:none;display:block}
    a:link {}
    a:visited {}
    a:hover {color:red;text-decoration:underline;background-color: silver}
    a:activate {}


    Me tendría que salir así http://www.comocreartuweb.com/html-kit-tutorial/plantilla-10.html, sin embargo me sale como la foto que he puesto anteriormente. Me estoy volviendo loco :cry:
    • power · · Solicitar retirada
    entoces lo puedes con corregir poniendo esto


    en la hoja .CSS

    :arrow: #contenido {height:**px}
    =FeMe= · · Solicitar retirada
    DarkPatriot escribió:Hola, perdón por no conectarme antes, no tenía mucho tiempo.

    A ver, poniendo letra si que se rellena y expande pero en el tutorial sale sin nad, ninguna letra.

    Y respecto a lo del width no se por que pero no cambia nada cuando lo pongo. Os pongo nuevamente lo que he pusto para ver si he fallado en algo, porque aqui un simple fallito te lo lleva todo al garete.
    plantilla.html:


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

    <html>
    <head>
    <title>ejemplo cctw</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    </head>
    <body>
    <div id="global">
    <div id="cabecera">Bienvenidos a mi Web</div>
    <div id="navegacion">Barra de navegacion</div>
    <div id="contenido">
    <div id="menu">
    <ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3</div>
    Esta será la zona principal de la web</div>
    <div id="pie">Este es el pié de página</div>
    </div>
    </body>
    </html>




    estilos-general.css:


    * {margin:0px ; padding:0px ; border: 0px}
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #cabecera {background-color: pink }
    #navegacion {background-color: gray }
    #contenido {background-color:orange;widht:800px}
    #menu {background-color: yellow; width: 150px ; float:left;text-align:left }
    #pie {background-color: brown}


    #menu li { list-style:none;margin: 4px 0px 4px 6px }
    a {color:brown;text-decoration:none;display:block}
    a:link {}
    a:visited {}
    a:hover {color:red;text-decoration:underline;background-color: silver}
    a:activate {}


    Me tendría que salir así http://www.comocreartuweb.com/html-kit-tutorial/plantilla-10.html, sin embargo me sale como la foto que he puesto anteriormente. Me estoy volviendo loco :cry:

    • Corregi eso donde te marque con rojo.
    es Width
    Yaneth · · Solicitar retirada
    Hola

    el error lo tienes aqui

    tu lo tienes asi:

    #contenido {background-color:orange;widht:800px}

    debe ser asi:

    #contenido {background-color:orange;width:800px; float:left}

    y te falta ponerle

    text-indent:0px

    a la linea del *

    saludos
    DarkPatriot · · Solicitar retirada
    Siii, por finn. Efectivamente era que había escrito mal width, vaya fallo más tonto. Muchísimas gracias a todos por vuestra ayuda, pensaba que me quedaría estancado para siempre. Cuando cree mi página tendréis asientos VIP en ella :lol:


    Lo dicho, muchísimas gracias :D