no me coincide con vista previa

voy por la tercera leccion y me he quedado atascada porque al hacer vista previa no me ha coincidido. El logotipo se me ve a la derecha y a la izquierda un espacio, mientras el logotipo vuestro que da a la izquierda y no se ve ningun cuadro blanco.



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>
[contenido no disponible]
<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 pié de página</div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>




    css



    * {text-indent:0px ; margin:0px ; padding:0px ; border: 0px}
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid }
    #logotipo {background-color: brown ; width:280px ; float:left }
    #publicidad {background-color: pink ; width:518px ; float:right }
    #navegacion {background-color: gray ; border: black 1px solid }
    #contenido {background-color: orange ; width: auto ; border-left: black 1px solid ; border-right: black 1px solid }
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
    #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin:3px 10px 10px 3px}
    #menu li {list-style:none ; margin: 4px 0px 4px 6px}
    #pie { background-color: white ;
    border-left: black 1px solid ;
    border-right: black 1px solid;
    border-top: black 1px solid }
    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}
    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}
    #curva-superior { background-image: url(objetos/curva-superior.gif) ;
    background-repeat: no-repeat ;
    width:800px ;
    height: 12px ;
    overflow : hidden }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width:800px ;
    height: 12px
    overflow: hidden }
  • hola el </div> en rojo va donde le muestro
    <div id="logotipo"></div>
    [contenido no disponible]</div>

    en estilo-general h2{font-size

    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
    falta el punto y coma despues de 12px
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width:800px ;
    height: 12px ;
    overflow: hidden }
    gracias por tu ayuda me queda mejor pero aun debe tener algo mal porque no me queda igual, ya que despues del menu amarillo justo el texto de la derecha me guarda el margen en el ultimo parrafo mientras en la vista previa se va al principio de la pagina y debajo .no se si me he explicado bien.



    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 pié de página</div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>


    css


    * {text-indent:0px ; margin:0px ; padding:0px ; border: 0px}
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid }
    #logotipo {background-color: brown ; width:280px ; float:left }
    #publicidad {background-color: pink ; width:518px ; float:right }
    #navegacion {background-color: gray ; border: black 1px solid }
    #contenido {background-color: orange ; width: auto ; border-left: black 1px solid ; border-right: black 1px solid }
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
    #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin:3px 10px 10px 3px}
    #menu li {list-style:none ; margin: 4px 0px 4px 6px}
    #pie { background-color: white ;
    border-left: black 1px solid ;
    border-right: black 1px solid;
    border-top: black 1px solid }
    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}
    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}
    #curva-superior { background-image: url(objetos/curva-superior.gif) ;
    background-repeat: no-repeat ;
    width:800px ;
    height: 12px ;
    overflow : hidden }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width:800px ;
    height: 12px ;
    overflow: hidden }
  • ya he solucionado el problema del margen del texto de la derecha del menu amarillo.
    repasando los temas me di cuenta que no cambie los px

    estilo general css
    error:
    #menu {................... 10px 10px 10px 10px}

    cambiar por
    #menu { ................... 3px 10px 10px 3px}
    a que mola los css muchas beses ai esta la clave del poder y es asi como la mayoria de nosotros aquirimos experiencia propia quemandonos las pestañas por choradas pero que son nesesarias que sucedad

    no biene al tema pero es algo asi como una sita para que todos podamos reflexionar de porqeu nos emos metido en esto
    es bastante complicado, apesar de lo sencillo que lo haceis parecer pero espero poder crear algun dia mi propia web y creeme me estoy partiendo las pestañas para poder conseguirlo .
    y gracias a vuestro apoyo creo que algun dia lo conseguire
    aunque los css son fascinantes con un pequeño error te pueden hacer perder la cabeza.

    gracias por todo