Entrar

no se encajan bien los bordes de lka curva con el resto

GLOORIX · · Solicitar retirada
Hola a todos: Feliz año 2009
Para empezar bien el año quisiera ver si me podeis aclarar, la siguiente duda. En la leccion 3, al poner las curvas superior e inferior, que se proponen, no se me encaja al resto, queda más pequeño. He revisado todo lo de esa lección e incluso la he terminado y al final me coincide todo con el resumen que haceis, pero a mi se me sigue viendo mal. os mando la plantilla y los estilos a ver si veis algo que yo no veo. Gracias de antemano.

PLANTILLA
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="estilos-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
  • Sección 4

    </div>
    <div id="contenido">
    <div id="menu">
    <h1>Título de Sección 1</h1>
    <ul>
  • Elemento 1
  • Elemento 2
  • Elemento 3
  • Elemento 4

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


    Esto es mi segundo parrafo 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í.
    <h2>Y este es el tercer párrafo.</h1>

    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">pie uno</div>
    <div id="piedos">pie dos</div>
    <div id="pietres">pie tres</div></div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>


    ESTILOS. GENERAL

    *{text-indent:0px ; margin:0px ; padding:0px ; border: 0px}
    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}
    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;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: black 1px solid ;
    border-right: black 1px solid }
    #contenido p {margin:5px 10px 5px 10px; text-indent:15px}
    #menu {background-color:lorange; 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 h1 {text-decoration:none ; font-size:12px; background-image: url(objetos/menu-parte-superior.gif) }
    #menu li {list-style:none; margin:4px 8px 4px 6px}
    #pie {background-color: white; border-left:black 1px solid ; border-right:black 1px solid ; border-top:black 1px solid }
    pieuno {background-color: brown ; float:left;width:150px ; width:498px }
    #piedos {background-color: green ; float:left;width:498px }
    #pietres {background-color: red ; 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 {}


    ESTO ES PARA QUE EMPECEIS BIEN EL AÑO "TRABAJANDO Y APRENDIENDO" .
    Muchas gracias de antemano
    • adoniram · · Solicitar retirada
    por lo parecer esta bien yo habia tenido ese problema pero lo logré arreglaglar cambiando el ancho o width de las secciones. Y fijate si por ejemplo sumando los width de los 3 pies suman 800 px q es el ancho de una pagina comun.

    espero q te ayudeee :)
    manmanu · · Solicitar retirada
    Hola Gloorix,
    bienvenid@.

    Bueno aqui debajo te pongo unos errores que veo en tú trabajo, corrigelos y veras todo en su sitio.
    Pero no he mirado tú menú,por que creo que tienes problemas de rutas, ó de nombres en la imágens, ya lo comentarás.

    Bueno te pongo unos cambios que posterior puedes cambiar.
    Tambien es cierto el comentario que te hacía adoniram con su problema, que similar al que tú tienes.
    Ya nos dirás si solucionaste algo.
    Espero no haberme liado con los comentarios,cada vez se hace más largo, y hay que recordar casi todo.

    Saludos manmanu

    EN CSS;
    #menu {background-color:lorange; 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 }
    }<--- esto te sobra, hay que eliminar.

    #contenido {background-color: orange; border-left: black 1px solid ;
    border-right: black 1px solid; height:450px;}<--te pongo height:450px; por que queda mejor, luego le puedes dar la altura que quieras.

    #pie {background-color: white; border-left:black 1px solid ; border-right:black 1px solid ; border-top:black 1px solid; width: auto; height:40px; }<--te pongo width: auto; por que va mejor, si le pones 800px, firefox lo ve de una manera y IE6 de otra.

    #pietres {background-color: red ; float:left};width:150px}<--aquí hay errores que pienso te darás cuenta tú mismo.

    pieuno {background-color: brown ; float:left;width:150px ; width:498px }<--errores, falta #pieuno, y pones dos width, y el navegador eleige el último 498px, ose se desborda, elimina 498px, deja width=149px

    #pieuno {background-color: brown ; float:left;width:149px; height:40px;}
    #piedos {background-color: green ; float:left;width:500px; height:40px;}
    #pietres {background-color: red ; float:left;width:149px; height:40px;}

    En HTML;
    <div id "global"> (tiene que quedar así <div id="global">)<--esto te genera problemas

    <h2>Y este es el tercer párrafo.</h1> error, abres con <h2>, y cierras con </h1>, y no se coloca dentro de

    , cierra </p> antes de <h2>
    GLOORIX · · Solicitar retirada
    manmanu escribió:Hola Gloorix,
    bienvenid@.

    Bueno aqui debajo te pongo unos errores que veo en tú trabajo, corrigelos y veras todo en su sitio.
    Pero no he mirado tú menú,por que creo que tienes problemas de rutas, ó de nombres en la imágens, ya lo comentarás.

    Bueno te pongo unos cambios que posterior puedes cambiar.
    Tambien es cierto el comentario que te hacía adoniram con su problema, que similar al que tú tienes.
    Ya nos dirás si solucionaste algo.
    Espero no haberme liado con los comentarios,cada vez se hace más largo, y hay que recordar casi todo.

    Saludos manmanu

    EN CSS;
    #menu {background-color:lorange; 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 }
    }<--- esto te sobra, hay que eliminar.

    #contenido {background-color: orange; border-left: black 1px solid ;
    border-right: black 1px solid; height:450px;}<--te pongo height:450px; por que queda mejor, luego le puedes dar la altura que quieras.

    #pie {background-color: white; border-left:black 1px solid ; border-right:black 1px solid ; border-top:black 1px solid; width: auto; height:40px; }<--te pongo width: auto; por que va mejor, si le pones 800px, firefox lo ve de una manera y IE6 de otra.

    #pietres {background-color: red ; float:left};width:150px}<--aquí hay errores que pienso te darás cuenta tú mismo.

    pieuno {background-color: brown ; float:left;width:150px ; width:498px }<--errores, falta #pieuno, y pones dos width, y el navegador eleige el último 498px, ose se desborda, elimina 498px, deja width=149px

    #pieuno {background-color: brown ; float:left;width:149px; height:40px;}
    #piedos {background-color: green ; float:left;width:500px; height:40px;}
    #pietres {background-color: red ; float:left;width:149px; height:40px;}

    En HTML;
    <div id "global"> (tiene que quedar así <div id="global">)<--esto te genera problemas

    <h2>Y este es el tercer párrafo.</h1> error, abres con <h2>, y cierras con </h1>, y no se coloca dentro de

    , cierra </p> antes de <h2>


    Gracias manmanu, ya esta solucionado, ya lo veo bien, muchas gracias.
    Como dominais el tema. Muchas gracias.
    manmanu · · Solicitar retirada
    Hola GLOORIX,

    Me alegro que hayas solucionado tú problema. :wink:

    GLOORIX escribió:Gracias manmanu, ya esta solucionado, ya lo veo bien, muchas gracias.
    No hay de que, a personas como tú, es un placer ayudar.


    Saludos manmanu