aplicación de bordes en el contenido

Hola de nuevo. Tengo ya todos los bordes perfectamente definidos a excepción del correspondiente al contenido : el cual tiene borde a la izquierda y a la derecha pero se corta por los lados justo en la linea del h1 y del h2 es decir en el segundo párrafo subrayado y en el tercer párrafo : help me please !!!!

* {margin:0px ; padding:0px ; border: 0px}
body {text-align: center}
#cabecera {background-color: pink ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid }
#navegacion {background-color: gray ; border: black 1px solid}
#contenido {background-color: orange ; text-align:left} #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px
; border-left: black 1px solid ; border-right: black 1px solid }
#pie {background-color: brown ; border: black 1px solid }
#global {width:800px ; margin: 4px auto }
#menu {background-color: yellow ; width: 150px ; float:left ; margin-right: 10px ; margin:3px 10px 3px 3px}
#menu li { ...propiedades..... }
#menu li { list-style:none ; margin: 4px 0px 4px 6px }
a {color: brown ; text-decoration:none}
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
a {color: brown ; text-decoration:none ; display: block }
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}


<!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="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

    </div>
    <h1>Esta será la zona principal de la web</h1>


    Empezando el segundo párrafo, a ver que tal . . . parece que de momento
    la cosa va funcionando, aunque ya veremos el resultado final.
    <h2>Y este es el tercer párrafo</h2>


    Todo depende de si la información es suficiente para hacer mi propia página. Espero que
    así sea, de lo contrario me veré obligado a dejarlo correr y encargar el proyecto a alguien
    más experimentado.</p>


    Eso si, que se lo curre, leches, che cosa fai . . va benne va benne y bla bla bla bla . . me canso de escribir . . . bla
    bla bla . . es que necesito un par de lineas más para poder seguir con el ejemplo. Pues como iba diciendo . . en un
    lugar de la mancha de cuyo nombre . . . bla bla bla . . creo que ya es suficiente</p>
    </div>

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


    </body>
    </html>
  • Hola botepeke!! Yo no se responder a tu pregunta, pues soy un aprendiz ahora mismo, de todas formas he visto algo un tu hoja de estilos general que creo que no esta bien y son esta lineas
    #contenido {background-color: orange ; text-align:left} #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px
    ; border-left: black 1px solid ; border-right: black 1px solid }
    Tu las tienes la capa #contenido y la capa #contenido p en la misma linea y yo creo que deberian de estar por separado o sea así:

    #contenido {background-color: orange ; text-align:left}
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px
    ; border-left: black 1px solid ; border-right: black 1px solid }

    Un saludo!!!
    betopeke escribió:Hola de nuevo. Tengo ya todos los bordes perfectamente definidos a excepción del correspondiente al contenido : el cual tiene borde a la izquierda y a la derecha pero se corta por los lados justo en la linea del h1 y del h2 es decir en el segundo párrafo subrayado y en el tercer párrafo : help me please !!!!

    * {margin:0px ; padding:0px ; border: 0px}
    body {text-align: center}
    #cabecera {background-color: pink ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid }
    #navegacion {background-color: gray ; border: black 1px solid}
    #contenido {background-color: orange ; text-align:left} #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px
    ; border-left: black 1px solid ; border-right: black 1px solid }
    #pie {background-color: brown ; border: black 1px solid }
    #global {width:800px ; margin: 4px auto }
    #menu {background-color: yellow ; width: 150px ; float:left ; margin-right: 10px ; margin:3px 10px 3px 3px}
    #menu li { ...propiedades..... }
    #menu li { list-style:none ; margin: 4px 0px 4px 6px }
    a {color: brown ; text-decoration:none}
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color: silver}
    a:active {}
    a {color: brown ; text-decoration:none ; display: block }
    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}


    <!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="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

    </div>
    <h1>Esta será la zona principal de la web</h1>


    Empezando el segundo párrafo, a ver que tal . . . parece que de momento
    la cosa va funcionando, aunque ya veremos el resultado final.
    <h2>Y este es el tercer párrafo</h2>


    Todo depende de si la información es suficiente para hacer mi propia página. Espero que
    así sea, de lo contrario me veré obligado a dejarlo correr y encargar el proyecto a alguien
    más experimentado.</p>


    Eso si, que se lo curre, leches, che cosa fai . . va benne va benne y bla bla bla bla . . me canso de escribir . . . bla
    bla bla . . es que necesito un par de lineas más para poder seguir con el ejemplo. Pues como iba diciendo . . en un
    lugar de la mancha de cuyo nombre . . . bla bla bla . . creo que ya es suficiente</p>
    </div>

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


    </body>
    </html>
  • Hola
    Creo que lo primero que debiera de hacer es ordenar un poco la hoja de estilo, y preocuparse de no repetir selectores o propiedades o clases, como por ejemplo menu li lo tiene repetido dos veces, al igual que la propiedad margin, si usted en menu tiene margin:3px 10px 3px 3px; No tiene para que poner margin-right:10px, porque ese diez que tiene puesto donde dice solo margin ya es el margin right, le sugiero que su hoja de estilo la ordene mas o menos como se la he puesto aquí abajo y ya veremos los posibles problemas que puedan haber

    * {margin:0px ; padding:0px ; border: 0px}
    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}
    p {text-align: justify}
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #cabecera {background-color: pink ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid }
    #navegacion {background-color: gray ; border: black 1px solid}
    #contenido {background-color: orange ; text-align:left;; 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 ;margin:3px 10px 3px 3px}
    #menu li { list-style:none ; margin: 4px 0px 4px 6px }
    #pie {background-color: brown ; border: 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 {}

    Saludos