Entrar

Pies de Pagina

angelesaridane · · Solicitar retirada
Problema:

Lección 4, tópico 2 "Capas en Linea". Por alguna extraña razón, cuando intento ponerle al pie de pagina 3 que se vaya a la izquierda la capa pie pierde el color.

* {margin:0px ; padding:0px ; border: 0px}
p {text-align:justify}
h1 {font-size:1.2em; color:gray; font-weight:bold; text-decoration:underline; text-align:center}
h2 {font-size:1.1em; color:gray; font-weight:bold; text-decoration:none; text-align:right; padding-right:10px}
body {text-align:center; background-color: gray}
#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:right}
#publicidad {width:518px; float:left;margin-top:25px}
#navegacion {background-color: silver; 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; width: auto; 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; text-align:left; margin: 10px 10px 10px 10px; background-image: url(objetos/menu-parte-inferior.gif); background-position: bottom; padding-bottom:5px}
#menu li {list-style: none; margin: 10px 8px 4px 6px; font-size:11px}
#menu h1 {text-decoration: none; font-size: 12px; background-image: url(objetos/menu-curva-superior.gif); padding-top: 12px}
#pie {background-color:white; border-left: black 1px solid ;border-right: black 1px solid; border-top: black 1px solid}
#pieuno {float:left}
#piedos {float:left}
#pietres {}
#curva-inferior {background-image: url(objetos/curva-inferior.gif); background-repeat: no-repeat; width:800px; height:12px; overflow: hidden}
a {color:orange; font-size:1.3em; text-decoration:none; display:block}
a:link {}
a:visited {color:brown}
a:hover {color:red; background-color:silver}
a:active {color:brown; text-decoration:underline}

Hasta ahora esta es mi hoja de estilo. Verán que en la capa "pietres" no tengo nada entre los parentesis, porque hasta ese punto no modifica el color de la capa "pie", una vez que intento agregarle "float:left", me modifica el color de la capa "pie" y me lo deja gris (siendo que le ordeno que sea blanco).

Porfavor, alguien que me guie.
Saludos
Yaneth · · Solicitar retirada
para poder ayudarte
debes darnos tambien los codigos de html

o bien la url de tu web para verlos

saludos
angelesaridane · · Solicitar retirada
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Pagina 1</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</a>
</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">
    <ul><h1>Título de Sección 1</h1>
  • Enlace 1
  • Enlace 2
  • Enlace 3
  • Enlace 4
    </div>
    <h1>Esta será la zona principal de la web</h1>


    Caminante son tus huellas el camino y nada más,
    caminante no hay camino, se hace camino al andar,
    al andar se hace camino, y al volver la vista atrás
    se ve la senda que nunca se ha de volver a pisar.</p>


    Caminante no hay camino, sino estelas en la mar.</p>
    <h2>Este es el tercer Párrafo</h2>


    Hace algún ese lugar, se oyó gritar la voz de un poeta
    "Caminate no hay camino, se hace camino al andar"
    Golpe a golpe, verso a verso.
    Este es un poema del poeta Antonio Machado, cantado
    por el trovador español Joan Manuel Serrat en su disco en homenaje a este poeta español,
    el poema con música lleva por nombre "Cantares"</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>
    • Raulyure · · Solicitar retirada
    angelesaridane escribió:Hay alguien que me pueda ayudar con esto porfa?
    Hola.
    He copiado los códigos de su hoja de estilo general y también los de su página plantilla, los he pasado a mi ordenador.
    He puesto un poco, (en los pies), lo que se supone que podría ir allí.

    Esta sería la hoja de estilo, (fíjese bien en las modificaciones que yo hice)
    .
    .
    *{margin:0px;padding:0px;border:0px}
    p {text-align:justify}
    h1 {font-size:1.2em;color:gray;font-weight:bold;text-decoration:underline;text-align:center}
    h2 {font-size:1.1em;color:gray;font-weight:bold;text-decoration:none;text-align:right;padding-right:10px}
    body{text-align:center;background-color:gray}
    #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:right}
    #publicidad{width:518px;float:left;margin-top:25px}
    #navegacion{background-color:silver;border:black 1px solid;height:25px}
    #navegacion li{float:left; list-style:none;margin: 0px 20px 0px 20px }
    #navegacion ul {margin-left:180px}
    #contenido {background-color:orange;width:auto;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;text-align:left;margin:10px 10px 10px 10px;background-image: url(objetos/menu-parte-inferior.gif); background-position: bottom; padding-bottom:5px}
    #menu li {list-style:none;margin:10px 8px 4px 6px font-size:11px}
    #menu h1 {text-decoration: none;font-size:12px; background-image:url(objetos/menu-parte-superior.gif); padding-top: 12px}
    #pie {background-color:white;border-left:black 1px solid;border-right:black 1px solid; border-top: black 1px solid;height:65px;}
    #pieuno {float:left;background-color:#ff0000;width:150px;}
    #piedos {float:left;background-color:#00ffff;width:498px;}
    #pietres {float:left;background-color:#ff0000;width:150px;}
    #curva-inferior {background-image: url(objetos/curva-inferior.gif); background-repeat: no-repeat;width:800px;height:12px; overflow: hidden}
    a {color:orange;font-size:1.3em;text-decoration:none;display:block}
    a:link {}
    a:visited {color:brown}


    Ahora esta es la página html
    .
    .
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Pagina 1</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <div id="global">
    <div id="curva-superior"></div>
    <div id="cabecera">
    <div id="logotipo">
    <a href="index.html">
    [contenido no disponible]
    </a>
    </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">
    <ul><h1>Título de Sección 1</h1>
  • Enlace 1
  • Enlace 2
  • Enlace 3
  • Enlace 4
    </div>
    <h1>Esta será la zona principal de la web</h1>


    Caminante son tus huellas el camino y nada más,
    caminante no hay camino, se hace camino al andar,
    al andar se hace camino, y al volver la vista atrás
    se ve la senda que nunca se ha de volver a pisar.</p>


    Caminante no hay camino, sino estelas en la mar.</p>
    <h2>Este es el tercer Párrafo</h2>


    Hace algún ese lugar, se oyó gritar la voz de un poeta
    "Caminate no hay camino, se hace camino al andar"
    Golpe a golpe, verso a verso.
    Este es un poema del poeta Antonio Machado, cantado
    por el trovador español Joan Manuel Serrat en su disco en homenaje a este poeta español,
    el poema con música lleva por nombre "Cantares"</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>
    a:hover {color:red; background-color:silver}
    a:active {color:brown; text-decoration:underline}

    Creo que en la página plantilla.html no hice nada de modificación.
    Las imágenes de curva del menu como yo les tengo otro nombre, usted ponga allí los que le corresponden, (es que he ocupado las imagenes que tengo yo para armar su página en mi ordenador)

    Los códigos que usted pueda ver, como por ejemplo background-color:#ff0000; es el código que le corresponde a un color determinado, los ordenadores , o mejor dicho, los navegadores a veces les cuesta reconocer el nombre de un color, por eso es mejor utilizar los códigos.

    En todo caso eso lo irá aprendiendo a medida que avance en el curso, pero por ahora le recomiendo que utilice los que le he puesto en su hoja de estilo.

    Resumiendo.
    Su página se ve en mi ordenador de ésta manera:
    .
    .

    [contenido no disponible]
    .
    .
    Note que le di a la capa pie un height de 65 píxeles, por eso la parte que queda abajo de las capas pieuno, piedos y pietres, está blanca, (porque le dije que la capa pie tuviese el color blanco.
    las capas pieuno, piedos y pietres, su alto o height en este momento lo está mandando, o cogen su altura de acuerdo a la altura de la fuente que tiene escrita.
    Ya nos dirá
    • Agradecido de los que aprenden enseñando
    Yaneth · · Solicitar retirada
    la capa pie
    debe tener altura, la cual debe ser igual o mayor que la altura de las capas que van dentro
    me explico???

    eso tambien te lo dice en las lecciones

    saludos
    angelesaridane · · Solicitar retirada
    Sip, sip.. muchas gracias, si luego, a medida que iba avanzando con el curso, noté que mi duda se resolvía unas hojas mas adelante.. jijijii... torpeza mía, lo siento! Gracias por las respuestas.