Entrar

Leccion tercera.- Insertar logotipo

ERRE · · Solicitar retirada
Bien, he seguido todos los pasos y me encuentro con que no me sale lo que debiera, me sale esto

[contenido no disponible]

este es el código que tengo en estilos:

* {margin:0px ; padding:0px ; border:0px }
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 {background-color: brown ; width:280px ; float:left }
#publicidad {background-color: pink ; width:518px ; float:right ; margin-top:25px}
#navegacion {background-color: gray ; border:black 1px solid }
#contenido {background-color: orange ; border-left:black 1px solid ; border-right:black 1px solid }
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow: hidden }

#pie {background-color: white ; border-left:black 1px solid ; border-right:black 1px solid ; border-top:black 1px solid }
#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 ; text-decoration:none ; display:block}
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color:silver}
a:active {}
h1 {font-size: 1.2em ; color:blue ; font-weight:bold ; text-decoration:underline ; text-align:center}
h2 {font-size:1.1em ; color:blue ; font-weigt:bold ; text-align:center}

y en el HTML

<!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="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo"></div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="logotipo">
[contenido no disponible]
</div>

<div id="navegacion"> Barra de Navegación </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 pie de página </div>
    <div id="curva-inferior"></div>

    </div>


    </body>
    </html>


    Me estoy volviendo un poco loco, no se si será a causa del firefox, aunque no creo, seguro que algo de por ahi está mal y no consigo encontrarlo. Gracias por vuestra ayuda :D
    • En la vida se pueden hacer muchas cosas. ¡Después ya no!
    Yaneth · · Solicitar retirada
    HOLA

    mira en el css

    en cabecera debes tener altura (heigth) lo mismo o un poco mas de lo que mide de altura tu logotipo

    ahora en el html tienes esto

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

    ves???? has duplicado el div logotipo, la imagen que metiste en verde, debe estar dentro de lo rojo

    saludos
    ERRE · · Solicitar retirada
    Muchas gracias, así da gusto, ¡vaya descubrimiento de página y de foro!
    En la vida se pueden hacer muchas cosas. ¡Después ya no!
    ERRE · · Solicitar retirada
    Mi gozo en un pozo, he puesto 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 id="navegacion"> Barra de Navegación </div>

    y todo continua igual, al menos aparentemente :cry:
    En la vida se pueden hacer muchas cosas. ¡Después ya no!
    Yaneth · · Solicitar retirada
    ajustaste a altura de la cabecera????

    en cada pregunta debes anexar los codigos corregidos de html y css
    para poder observar los cambios

    saludos
    ERRE · · Solicitar retirada
    ok, aqui van los últimos códigos que tengo

    en la hoja de estilo

    * {margin:0px ; padding:0px ; border:0px }
    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 {background-color: brown ; width:280px ; float:left }
    #publicidad {background-color: pink ; width:518px ; float:right ; margin-top:25px}
    #navegacion {background-color: gray ; border:black 1px solid }
    #contenido {background-color: orange ; border-left:black 1px solid ; border-right:black 1px solid ; text-align: left }
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow: hidden }

    #pie {background-color: white ; border-left:black 1px solid ; border-right:black 1px solid ; border-top:black 1px solid }
    #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 ; text-decoration:none ; display:block}
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color:silver}
    a:active {}
    h1 {font-size: 1.2em ; color:blue ; font-weight:bold ; text-decoration:underline ; text-align:center}
    h2 {font-size:1.1em ; color:blue ; font-weigt:bold ; text-align:center}

    y en el HTML


    <!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="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"> Barra de Navegación </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 pie de página </div>
    <div id="curva-inferior"></div>

    </div>


    </body>
    </html>
    • En la vida se pueden hacer muchas cosas. ¡Después ya no!
    Yaneth · · Solicitar retirada
    pero... que es lo que ves mal?????

    yo solo veo las lineas café

    quita esto

    #logotipo {background-color: brown ; width:280px ; float:left }

    saludos
    ERRE · · Solicitar retirada
    Muy buenas, feliz año. Ahora me pasa algo más divertido jeje, en teoría solo tendría que salir en enlace a la página principal cuando pasamos el cursos por encima del logo. Pues no, me lo hace en cualquier punto de la capa de navegacion o cabecera por el que lo pase. Como veis empiezo el año dando por saco, igual que acabé el anterior :?

    Aqui va el HTML:

    <!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="global">
    <div id="curva-superior"></div>
    <div id="cabecera">
    <div id="logotipo">
    <a href="index.html">
    [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>
  • 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 pie de página </div>
    <div id="curva-inferior"></div>

    </div>


    </body>
    </html>


    y aqui la hoja de estilos:

    * {margin:0px ; padding:0px ; border:0px }
    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}
    #navegacion {background-color: gray ; border: black 1px solid ; height:20px}
    #navegacion ul { margin-left: 50px }
    #navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px}
    #contenido {background-color: orange ; border-left:black 1px solid ; border-right:black 1px solid ; text-align: left }
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow: hidden }

    #pie {background-color: white ; border-left:black 1px solid ; border-right:black 1px solid ; border-top:black 1px solid }
    #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 ; text-decoration:none ; display:block}
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color:silver}
    a:active {}
    h1 {font-size: 1.2em ; color:blue ; font-weight:bold ; text-decoration:underline ; text-align:center}
    h2 {font-size:1.1em ; color:blue ; font-weigt:bold ; text-align:center}

    Gracias por vuestra ayuda :wink:
    • En la vida se pueden hacer muchas cosas. ¡Después ya no!
    Gus · · Solicitar retirada
    ola, llevo aqui poco mas q tu, asi q tb soy novato y me paso lo mismo q a ti.

    no se si esto sera la solucion a tu problema pero te falta un cierre (</div>), te lo pongo en negrita...prueba a ver


    <div id="global">
    <div id="curva-superior">
    </div>
    <div id="cabecera"> </div>
    <div id="logotipo"><a href="index.html">[contenido no disponible]</div>
    <div id="publicidad">Bienvenidos a mi Web
    </div>
    </div>
    ERRE · · Solicitar retirada
    Gracias por tu aportación gus, pero no es eso, de hecho si que está el cierre, pero más abajo, la capa cabecera contiene a las otras, seguiré mirando a ver, gracias de nuevo, asi, si nos ayudamos todo resulta más fácil :wink:
    En la vida se pueden hacer muchas cosas. ¡Después ya no!
    Yaneth · · Solicitar retirada
    mira, cuando eso sucede es que no cerraste algun "a"

    y aqui es donde te falta cerrarlo en rojo lo que falta

    <div id="logotipo">[contenido no disponible]</div>

    saludos
    ERRE · · Solicitar retirada
    Moderación escribió:mira, cuando eso sucede es que no cerraste algun "a"

    y aqui es donde te falta cerrarlo en rojo lo que falta

    <div id="logotipo">[contenido no disponible]</div>

    saludos

    Pues si, esa era la solución, gracias de nuevo, ya os debo unas cuantas y solo voy por la lección 3 :)
    En la vida se pueden hacer muchas cosas. ¡Después ya no!