Entrar

Dudas leccion 3 Aparece un borde extra

Deathly Snake · · Solicitar retirada
Hola a todos!!

Bien, ya termine la lección 3, aunque me quedo un pequeño error en la plantilla.

Existe un pequeño espacio en blanco entre la capa PIE y la capa contenido
A ver si me lo pueden solucionar.

El codigo de la plantilla.html esta asi:


</head>
<body>
<div>
<div></div>
<div>Bienvenidos a mi Web</div>
<div>Barra de Navegación</div>
<div>
<div>
<ul>
  • <a>Enlace 1</a>
  • <a>Enlace 2</a>
  • <a>Enlace 3</a>
    </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>Este es el pié de página</div>
    <div></div>
    </div>
    </body>
    </html>

    y el de estilo-general.css esta asi:

    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
    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 }
    #navegacion {background-color: gray ; border: black 1px solid }
    #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: yellow ; width: 150px ; float:left ; text-align:left ; margin: 3px 10px 3px 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 }
    #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 {}
    p {text-align: justify}
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: left}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: left}


    A ver si alguien me ayuda!

    Muchas Gracias
    • Yaneth · · Solicitar retirada
    para que tu codigo salga completo recuerda activar la casilla de abajo

    Deshabilitar HTML en este mensaje

    saludos
    Yaneth · · Solicitar retirada
    Hola

    creo que hay un fallo

    (el color no es lo importante)
    el div pie debería quedar asi:

    #pie {background-color: brown ; border: black 1px solid }


    tu lo has puesto de este modo:

    #pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid }


    checalo y nos avisas

    saludos
    Deathly Snake · · Solicitar retirada
    Hola Yaneth!

    Aprecio tu ayuda, pero creo que estas en un error porque esto es lo qe puso Jorgens al final de la ultima leccion:

    Fíjate que he eliminado el border: black 1px solid que le daba bode a los cuatro costados y he colocado en su lugar el borde por la izquierda, derecha y arriba solamente.

    Osea que quedaria asi:


    #pie { background-color: white ;
    border-left: black 1px solid ;
    border-right: black 1px solid;
    border-top: black 1px solid }

    A ver si me das una ayudita

    Saludos!!
    JorGens · · Solicitar retirada
    Tienes razón Snake, olvidé colocar el overflow al estilo de esa ultima capa.

    Comprueba si realmente tienes definido el overflow:hidden en la hoja de estilo para la capa curva-inferior. El overflow es lo que hace que desaparezca ese espaciado.

    Ha de quedar así:

    #curva-inferior {
    background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }


    Un saludo!
    Deathly Snake · · Solicitar retirada
    Hola Jorgens!!

    Prove nuevamente lo del hidden: overflow otra vez pero nada.
    Ni idea de que hacer para que me quede bien.
    Lo raro es que la parte superior esta perfecta, mientras que la inferior se ve con ese espacio blanco.

    Me gustaria ponerte la imagen de la plantilla para que veas de que hablo pero ni idea como se hace ¿vos sabes como?

    Un saludo!!!

    Snake
    JorGens · · Solicitar retirada
    Antes de que cunda el pánico :roll: intentalo poniendo todo eso junto, sin espacios, es decir:
    .......... overflow:hidden }
    en lugar de :
    ...........overflow : hidden }
    Y nos cuentas, claro.

    Ánimo!
    Deathly Snake · · Solicitar retirada
    Hola Jorgens!

    Gracias por tu ayuda, pero lamentablemente eso ya lo habia probado. Igual lo probe otra vez por las dudas, pero nada! :cry:

    La linea en el estilo-general.css esta asi:


    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow:hidden } }

    Antes que nada, te digo que lo de quitar una de las 2 llaves luego de "hidden" ya lo probe

    A ver si puedes

    Gracias!!!
    Yaneth · · Solicitar retirada
    Hola,
    perdon por mi respuesta erronea, pero no había terminado las lecciones
    :oops:

    Esta vez ya llegué hasta el problemita ese y tambien veo una separacion
    aunque no se si vemos lo mismo, pongo una imagen de muestra

    [contenido no disponible]

    es esto a lo que te refieres?

    esto yo lo he arreglado ajustando la imagen a un ancho de 792px

    pero no se si este tambien sea tu problema

    saludos
    Deathly Snake · · Solicitar retirada
    Hola Yaneth!!

    No te preocupes por tu respuesta. en cuanto a la imagen, ese no es mi problema. Si podes y no es demasiada molestia, preferiria esperar a que finalizes las lecciones de Jorgens, (y si podes) poneme una nueva imagen donde pueda marcarte donde esta mi error

    Muchisimas gracias!!

    Snake
    Yaneth · · Solicitar retirada
    y mejor porque no nos dejas verla?

    en el foro General hay un tema en el que te dice como poner imagenes,

    y si ya llegaste a ese punto ya subiste algo no?

    pues dejanos verlo porque en realidad no se a que separacion te refieres


    saludos
    JorGens · · Solicitar retirada
    Vaya, pues no entiendo que puede ocurrir... como ya os digo, yo la tengo hecha tal y como explico en las lecciones y la veo perfectamente tanto con explorer como con opera y firefox (son distintos navegadores).

    la plantilla que yo hice está aqui: http://testeando.onlinewebshop.net/plantilla.html

    Si podéis, visitadla y me decís si vosotras la veis bien, oki? Quizás sea cuestión del navegador usado o yo que se...

    Si la veis bien, ha de haber algún error en vuestros códigos, quizás un simple espacio en blanco donde no debe estar... si la veis mal tendré que investigar a fondo...

    Espero ansioso vuestra respuesta! :roll:

    Un abrazo!!! :wink:
    Deathly Snake · · Solicitar retirada
    Hola Jorgens/Yaneth!!!

    Me gustaria que me pusieran un enlace a la seccion del foro donde se explica como poner una imagen aqui.

    Muchas Gracias!!
    SoNoR · · Solicitar retirada
    Hola no se si a estas alturas tu problema haya quedado resuelto si no es asi te digo cual es la solucion es muy facil y con logica se saca;). a mi tb me pasaba que se me quedaba un hueco en blanco, teniendo en cuenta que el pie de pagina tb es en blanco lo k tienes k acer es quitar el border-top del pie de pagina y añadir un border-bottom al apartado de contenido i listo
    SoNoR · · Solicitar retirada
    jorgens te falto poner que habia k poner border-bottom en el contenido
    y antes de la imagen de los codigos avisas k ai k kitar el border-top del pie de pagina xo en la imagen sale puesto es lo unico, vaya un despistillo de nada ;)
    Deathly Snake · · Solicitar retirada
    Hola a todos!!!!!!!!

    Muchas Gracias SoNor!!!

    Probe lo que me dijiste y ahora se ve perfecto. Gracias!!.
    Tambien quiero agradecer a Yaneth y a Jorgens por su apoyo!!

    Un saludo!