Entrar

problema con el ancho del contenido y pie

piltrafa · · Solicitar retirada
el contenido y el pie no son de 800 px de ancho sino que ocupan mas que la curva superior y la inferior y lo he repasado y no se porque.
os pongo el index y los estilos a ver si veis porque no me queda igual.

index.html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Pagina Seofer</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
<body>

<div id="gobal">
<div id="curva-superior"></div>
<div id="cabecera">Bienvenidos a mi Web</div>
<div id="menu">
<ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3

    </div>
    <div id="contenido"><h1>Esta será la zona principal de la web</h1>


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




    hola</p>
    </div>
    <div id="pie"><h2>Este es el pié de página</h2></div>
    <div id="curva-inferior"></div>

    </div>

    </body>
    </html>

    </head>


    estilos:


    * {margin:0px ; padding:0px ; border: 0px}
    body {background-color: #E6E6FA ; background-repeat:no-repeat ; background-position: center center ; height:100%}
    a {color: blue; font-size:1.3em ; text-decoration: none}
    .centrado {text-align:center}
    #foto {margin: 10px 50px 10px 200px}
    #curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow : hidden }
    #cabecera { background-color: pink ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid }
    #contenido {background-color: orange ; background-image: url(objetos/fondo.gif)}
    #contenido p {padding: 5px 10px 5px 10px ;text-indent: 15px}
    #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 }
    #menu {background-color: yellow; width: 150px ; float:left; text-align:left ; margin:3px 10px 10px 10px}
    #global {width:800px ; margin: 4px auto }
    #menu li {list-style:none ; margin: 4px 0px 4px 6px}
    body {text-align: center}
    a {color: brown; text-decoration: none}
    a:link {}
    a:visited {}
    a:hover {color:red; text-decoration:underline ; background-color: blue}
    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}


    gracias
    • Raulyure · · Solicitar retirada
    piltrafa escribió:el contenido y el pie no son de 800 px de ancho sino que ocupan mas que la curva superior y la inferior y lo he repasado y no se porque.
    os pongo el index y los estilos a ver si veis porque no me queda igual.

    index.html:


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Pagina Seofer</title>
    <link rel="stylesheet" href="estilos.css" type="text/css" media="all">
    <body>

    <div id="gobal">
    <div id="curva-superior"></div>
    <div id="cabecera">Bienvenidos a mi Web</div>
    <div id="menu">
    <ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3

    </div>
    <div id="contenido"><h1>Esta será la zona principal de la web</h1>


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




    hola</p>
    </div>
    <div id="pie"><h2>Este es el pié de página</h2></div>
    <div id="curva-inferior"></div>

    </div>

    </body>
    </html>

    </head>

    gracias
    • -------------------------------------
    Hola:
    Por ahora solo he visto los códigos de su página, algo importante que hay que comprender, es que cuando se abre una etiqueta (o código), hay que fijarse bien para después cerrarla.

    Usted tiene abierta la capa global, y dentro de la capa global ha puesto todas las demás capas, todas esas las ha abierto y las ha cerrado


    Luego, usted ha creado una capa que se llama "contenido, y dentro de esa capa debe de ir la capa menu, usted parece ser que ha puesto la capa menu fuera de la capa contenido (según veo en sus códigos). La capa foto, esa si que la ha puesto dentro de la capa contenido.

    Fuera de eso, usted la etiqueta <head>, la ha puesto como cerrándo la página, (la ha puesto al final) y la etiqueta <head> </head> es parte de la página , y es la parte en que van ciertos códigos que no son visibles.

    Una pagina se compone de primordialmente tres cosas.
    Un cuerpo general que comienza con <html> y termina con </html>, dentro de ese cuerpo general, van dos cuerpos más, uno que comienza con <head> y que termina con </head>, normalmente lo que va dentro de ese cuerpo no es visible en la pantalla.
    Luego está el siguiente cuerpo que comienza con <body> y termina con </body>,. Todo lo que ponga dentro de ese body es lo que se verá en su pantalla..

    Es bueno, en principio , ir comprendiéndo esa idea, para ir solventándo errores que puedan afectar a la página.

    Acá le dejo como debiera de tener más o menos puestos los códigos de su página

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>

    <head>
    <title>Pagina Seofer</title>
    <link rel="stylesheet" href="estilos.css" type="text/css" media="all">
    </head>

    <body>

    <div id="gobal">
    <div id="curva-superior"></div>
    <div id="cabecera">Bienvenidos a mi Web</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>


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


    hola</p>
    </div>

    <div id="pie"><h2>Este es el pié de página</h2></div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>


    Después que haga estos arreglos, ya se verá como poner bien dentro de la capa contenido, la capa fotos
    Saludos
    • Agradecido de los que aprenden enseñando
    piltrafa · · Solicitar retirada
    gracias por corregirme esos errores, pero aun asi cuando le doy a preview, me sale mas ancho todo el menu y todo que la cabecera y el pie. no se a que se debe porque le hepuesto a todo 800 px pero lo unico que tiene 800 px son la cabecera y el pie, el resto es como si tuvieran mucho mas.saludos
    Raulyure · · Solicitar retirada
    piltrafa escribió:gracias por corregirme esos errores, pero aun asi cuando le doy a preview, me sale mas ancho todo el menu y todo que la cabecera y el pie. no se a que se debe porque le hepuesto a todo 800 px pero lo unico que tiene 800 px son la cabecera y el pie, el resto es como si tuvieran mucho mas.saludos

    Hola:

    En cierto sentido, le sugiero que comience el Curso Paso a Paso para que vaya haciéndo exactamente (en la medida de lo posible) lo que curso explica, porque está diseñado para que no se vayan cometiendo esos desajustes, por ejemplo usted en su página por lo que veo de sus códigos anteriores, no ha creado la capa navegacion, que es una capa importante, (ya cuando se tenga más experiencia, se podrá eliminar si no la quiere).

    Ahora como dato, la única capa que tiene que mantener el ancho de 800px es la capa global.

    A la capa contenido se le pone también un ancho de 800px, pero solo hasta que quede fijada en el lugar que le corresponde, luego hay que quitarle ese 800px.

    a las demás capas no es necesario ponerle el ancho de 800px,
    Luego en la capa contenido, lo que le sugiero es eliminar por ahora la capa foto, hasta que las capas cojan el lugar que les corresponde, y en lugar de la capa foto que está dentro de la capa contenido, pues escribir bastante texto en la capa contenido, para que no se descuadre. Luego que adelante con eso (siguiéndo el curso) ya podrá poner la capa foto dentro de la capa contenido.

    Antes de ir poniéndo lo que uno desea poner en la pagina, primero debe uno diseñar correctamente la estructura, siempre habrá después tiempo para poner todo lo que uno quiera.

    Saludos