problema, los parrafos y subitutos se ven como titulos

Hola, tengo un problema, los parrafos y subtitulos se ven como si fueran titulos y no se pork bueno aqui les dejo los codigos para que me puedan ayudar mejor


codigos html

</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>
  • seccion 1
  • seccion 2
  • seccion 3
  • seccion 4</div>
    <div id="contenido"><div id="menu">
    <ul><h1>Tíitulo de sección 1</h>
  • Elemento de lista, 1
  • Elemento de lista, 2
  • Elemento de lista, 3Elemento de lista 4
    </div>
    <h1>Esta será la zona Principal de la web</h1>


    Este es mi segundo párrafo. A cabo de poner un punto y en cambio sigue siendo un párrafo pue no le he colocado aún la etiqueta de cierre. Voy a ponercela 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 sanguia 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. Asi esto parece una poesia! je je je.</p>
    </div>
    <div id="pie">Este es el pié de la página</div>
    <div id="curva-inferior"></div>
    </div>

    </body>
    </html>


    codigos de la hoja de estilos

    #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: 1px solid ; border-right: 1px solid }
    #contenido p {margin: 5px 10px 5px 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: 4px 8px 4px 6px }
    #menu h1 {text-decoration: none ; font-size: 12px ; padding-top: 12px ; background-image: url(objetos/menu-parte-superior.gif) ; background-repeat: no-repeat}
    #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 {}


    aqui les dejo una imagen, para que vean como se ve y asi me puedan ayudar mejor.

    [contenido no disponible]

    os agradesco de antemano! :wink:
  • Hola

    el error está aqui

    <h1>Tíitulo de sección 1</h>
    tiene que quedarte asi:

    <h1>Tíitulo de sección 1</h1>
    saludos
    si gracias, ahora tengo otro problema y es que el vorde de avajo se me separo y no se pork si eh seguido todo al pie de la letra, aqui les dejo los codigos y una imagen para que miren y me digan en que estoy mal

    codigo 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">
    <ul>
  • Sección 1
  • Sección 2
  • Sección 3

    </div>
    <div id="contenido">
    <div id="menu">
    <h1>Título de Sección 1</h1>
    <ul>
  • 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">
    <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>

    codigos de la oja de estilos

    * {text-indent: 0px ; margin: 0px ; padding: 0px ; border: 0px }
    p {text-align: justify ; text-decoration: none }
    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 ; marigin: 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: 1px solid ; border-right: 1px solid }
    #contenido p {margin: 5px 10px 5px 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: 4px 8px 4px 6px }
    #menu h1 {text-decoration: none ; font-size: 12px ; padding-top: 12px ; background-image: url(objetos/menu-parte-superior.gif) ; background-repeat: no-repeat}
    #pie {background-color:white ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; height: 65px }
    #pie li {list-style: none ; font-size: 12px }
    #pieuno {float: left ; width: 150px }
    #piedos {float: left ; width: 498px }
    #pietres {float: left ; width: 150px }
    #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 {}
    #pie a: {color: blue ; text-decoration:none ; display: block }
    #pie a:link {}
    #pie a:visited {}
    #Pie a:hover {color:black ; text-decoration: underline ; background-color: white }
    #pie a:active {color: black }
    #logotipo a:active {}


    y aqui les dejo el enlace para que miren como se ve:[contenido no disponible]
  • Hola

    intenta cambiar esta linea

    #contenido p {margin: 5px 10px 5px 10px ; text-indent: 15px }

    por esta:

    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px }


    saludos