Entrar

problemas con situación de las capas. lección 2.

CATUTO · · Solicitar retirada
LECCIÓN 2: En el plantilla.html tengo metido lo siguiente:

<!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="cabecera">Bienvenidos a mi Web</div>
<div id="navegacion">Barra de Navegación</div>
<div id="contenido"><div id= "menu">
<ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
    <ul/>
    </div>Esta será la zona principal de la web</div>
    <div id="pie">Este es el pié de página</div>
    </body>
    </html>

    Y en estilos-generales.css:

    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #cabecera {background-color: pink }
    #navegacion {background-color: gray }
    #contenido {background-color: orange ; width: 800px ; float:left}
    #menu {background-color: yellow; width: 150px ; float:left}
    #menu li { list-style:none }
    #pie {background-color: brown}

    El problema es que al mostrar la vista previa me aperece la capa "pie" a lado derecho de la capa "menu" y debjao de la capa "navegación".

    Soy nuevo en esto.

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

    • Cambia lo que te he puesto en rojo y creo que se abra resuelto
    CATUTO · · Solicitar retirada
    Crane escribió:
    <html>
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    </head>
    <body>
    <div id="cabecera">Bienvenidos a mi Web</div>
    <div id="navegacion">Barra de Navegación</div>
    <div id="contenido"><div id= "menu">
    <ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
    <ul/>
    </div>Esta será la zona principal de la web</div>
    <div id="pie">Este es el pié de página</div>
    </body>
    </html>

    • Cambia lo que te he puesto en rojo y creo que se abra resuelto

    No consigo arreglarlo. Ahora me aparece el texto de "Esta será la zona principal de la web" debajo de la lista de enlances, en la capa "menu".
    Gracias.
    Crane · · Solicitar retirada
    Vamos haber, perdon me habia equivocado :oops:

    En principio veo 1 o 2 fallos en el html de facil arreglo, mira:

    en lugar de poner:

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

    cambia la ultima linea

    </div>(capa menu)
    <h1>Esta será la zona principal de la web</h1>
    </div> (capa contenido)

    Y esa sera la solucción espero pero si no es me lo dices i miro el css
    pero en principio no le veo ningun fallo

    Un saludo Crane
    • Raulyure · · Solicitar retirada
    CATUTO escribió:
    Crane escribió:
    <html>
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    </head>
    <body>
    <div id="cabecera">Bienvenidos a mi Web</div>
    <div id="navegacion">Barra de Navegación</div>
    <div id="contenido"><div id= "menu">
    <ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
    <ul/>
    </div>Esta será la zona principal de la web</div>
    <div id="pie">Este es el pié de página</div>
    </body>
    </html>

    • Cambia lo que te he puesto en rojo y creo que se abra resuelto

    No consigo arreglarlo. Ahora me aparece el texto de "Esta será la zona principal de la web" debajo de la lista de enlances, en la capa "menu".
    Gracias.

    Hola:

    Usted en la hoja de estilo-general le ha dado directivas a una capa llamada global ------ #global{etc. etc.}

    Pero en la página usted no ha creado esa capa global, ya que es la capa que engloba a todas las demás excepto a la body
    Por tanto en su pagina html debiera de poner debajo del body esto

    <body>
    <div id="global">
    <div id="cabecera etc. etc.
    <div id="navegacion"> etc. etc.
    <div id="contenido"> etc. etc.
    <div id="menu"> etc. etc.
    <div id="pie"> etc. etc.

    y después cerrar esa capa global antes de este otro body
    </div>
    </body>
    </html>

    Saludos
    Agradecido de los que aprenden enseñando
    CATUTO · · Solicitar retirada
    Raulyure escribió:
    CATUTO escribió:
    Crane escribió:
    <html>
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    </head>
    <body>
    <div id="cabecera">Bienvenidos a mi Web</div>
    <div id="navegacion">Barra de Navegación</div>
    <div id="contenido"><div id= "menu">
    <ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
    <ul/>
    </div>Esta será la zona principal de la web</div>
    <div id="pie">Este es el pié de página</div>
    </body>
    </html>

    • Cambia lo que te he puesto en rojo y creo que se abra resuelto

    No consigo arreglarlo. Ahora me aparece el texto de "Esta será la zona principal de la web" debajo de la lista de enlances, en la capa "menu".
    Gracias.

    Hola:

    Usted en la hoja de estilo-general le ha dado directivas a una capa llamada global ------ #global{etc. etc.}

    Pero en la página usted no ha creado esa capa global, ya que es la capa que engloba a todas las demás excepto a la body
    Por tanto en su pagina html debiera de poner debajo del body esto

    <body>
    <div id="global">
    <div id="cabecera etc. etc.
    <div id="navegacion"> etc. etc.
    <div id="contenido"> etc. etc.
    <div id="menu"> etc. etc.
    <div id="pie"> etc. etc.

    y después cerrar esa capa global antes de este otro body
    </div>
    </body>
    </html>

    Saludos
    :D

    Muchas :D gracias raulyure lo he solucionado con tu indicación . El problema creo que radica en en que el curso indica la creación del id global pero no explica la capa div global en html.

    Gracias tambien a Crane.