Problema con Lección 4 (capas pie)

Very · 14 Jun 2010, 23:07 · Solicitar retirada

Saludos desde Puerto Rico:
Por el momento he ido bien en las lecciones y cuando tengo dudas he podido contestarlas gracias a estas paginas. Pero Me he estancado y no se que me ha salido mal, voy de atras hacia adelante y esta vez no se en que falle. Cuando pongo la altura de las capas estas se colocan mal; la capa pie tres queda debajo de la capa pie uno y entonces el contenido que es de color orange se sobre sale un poco de los margenes y queda sobre salido tambien de la curva inferior de la capa pie. Algo anda mal. Estas son mis notas:

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

Enlace 1

Enlace 2

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

Este es mi segundo parrafo. Acabo de poner un punto y en cambio sigue siendo un parrafo 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 sangrias 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 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:

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

Espero me puedan ayudar, Gracias.

Raulyure · 14 Jun 2010, 23:27 · Solicitar retirada

Very escribió:Saludos desde Puerto Rico:
Por el momento he ido bien en las lecciones y cuando tengo dudas he podido contestarlas gracias a estas paginas. Pero Me he estancado y no se que me ha salido mal, voy de atras hacia adelante y esta vez no se en que falle. Cuando pongo la altura de las capas estas se colocan mal; la capa pie tres queda debajo de la capa pie uno y entonces el contenido que es de color orange se sobre sale un poco de los margenes y queda sobre salido tambien de la curva inferior de la capa pie. Algo anda mal. Estas son mis notas:

<!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="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>
Enlace 1
Enlace 2
Enlace 3Enlace 4
</div>
<h1> Esta será la zona principal de la web</h1>

Este es mi segundo parrafo. Acabo de poner un punto y en cambio sigue siendo un parrafo 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 sangrias 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 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:

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

Espero me puedan ayudar, Gracias.

Hola:
De momento usted saque la cuenta de los píxeles que ocupan las tres capas y los bordes que pone (todos los bordes que usted puso.
pieuno =150px
pietres =150px piedos =498px ¿porqué 498?
porque la capa pie, que es la que contiene a las tres capas tiene un borde left de 1px de grueso y tiene un borde right de 1 px de grueso. esos dos píxeles, más los 150 del pieuno, más los 150 del pietres, más los 498 del piedos suman los 800px de ancho.
Bien. Ahora resulta que usted a la capa pieuno le pone un borde a la derecha de 1 px de ancho y a la capa pietres le pone un borde a la izquierda de 1 px de ancho.
Pues eso en total sumaría 802 píxeles y estaría sobrepasandose.
¿Solución?
La que explica el curso.
A la capa piedos le quita de ancho (width) 2 pixeles, cosa de que tenga 496.

O esos dos pixeles se los quita, uno a la capa pieuno y el otro a la capa pietres cosa de que esas capas tengan un ancho de 149px.
Porque usted, en bordes está ocupando 4 píxeles, así que las capas tiene que repartirlas cosa de que en total la suma sea 800px.
Saludos

Very · 15 Jun 2010, 15:43 · Solicitar retirada

Gracias, pude resolver lo de las capas pie, muy sencillo. Pero aún sigo teniendo el problemita con la capa contenido color orange que me sobresale de los margenes y de los bordes redondeados de la capa pie.

Very · 15 Jun 2010, 17:22 · Solicitar retirada

Ahora si tengo un problema, que hago.
El fondo orange ocupo todo el espacio del color de la capa pie, cuando estaba retocando los enlaces y ni siquiera se ve el pie dos color silver (todo se ve de color orange).Es como si la capa contenido estuviera sobre la capa pie. Aunque si puedo ver lo que dicen los enlaces.

Raulyure · 15 Jun 2010, 18:50 · Solicitar retirada

Very escribió:Ahora si tengo un problema, que hago.
El fondo orange ocupo todo el espacio del color de la capa pie, cuando estaba retocando los enlaces y ni siquiera se ve el pie dos color silver (todo se ve de color orange).Es como si la capa contenido estuviera sobre la capa pie. Aunque si puedo ver lo que dicen los enlaces.

Hola
Le entiendo, pero para ver mejor el problema (ya que según usted estuvo retocando, ¿qué le parece si pega en un mensaje todos los códigos de su página html y todos los códigos de su hoja de estilo que le corersponde a esa página?.
así podríamos ver con más propiedad el porqué sucede eso.
saludos

Very · 15 Jun 2010, 19:03 · Solicitar retirada

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

Enlace 1

Enlace 2

Foro Ejemplo

Contactos

Nos Enlazan

</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul>

Directorio

TopSite

Mapa de la Web

</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>

Estilos:

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

Yaneth · 15 Jun 2010, 22:04 · Solicitar retirada

hola

te falta cerrar el div contenido
y el div pie

saludos

Very · 15 Jun 2010, 23:20 · Solicitar retirada

Gracias, :lol: estaba rompiendome la cabeza por algo tan sencillo.