Hola; soy seguidor del curso y quería antes que nada saludaros y daros las gracias.
Mi problema es el siguiente: en la lección 4, al darle una altura a la capa pié me sale lo siguiente:
y por mucho que reviso dónde me habré equivocado... no lo encuentro. Muchas gracias.
HTML:
<!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">
<a href="index.html">
<img src="objetos/logotipo.gif" width="270" height="80"
alt="Haz clic aquí para volver a la página de inicio">
</a>
</div>
<div id="publicidad">Bienvenidos a mi web</div>
</div>
<div id="navegacion">
<ul>
<li><a href="#">Sección 1</a></li><li><a href="#">Sección 2</a></li><li><a href="#">Sección 3</a></li><li><a href="#">Sección 4</a></li>
</ul>
</div>
<div id="contenido">
<div id="menu">
<h1>Título de Sección 1</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li>
</ul>
</div>
<h1>Esta será la zona principal de la web</h1>
<p>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> <p>En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sangrías por la izquierda a la primera línea, que queda mucho mejor.</p>
<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">pié uno</div>
<div id="piedos">pié dos</div>
<div id="pietres">pié tres</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
CSS:
*{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 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-top:black 1px solid ; border-right:black 1px solid ; border-left:black 1px solid ; height:65px}
#pieuno {background-color:brown ; float:left ; width:150px}
#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:silver}
a:active{}
Mi problema es el siguiente: en la lección 4, al darle una altura a la capa pié me sale lo siguiente:
y por mucho que reviso dónde me habré equivocado... no lo encuentro. Muchas gracias.
HTML:
<!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">
<a href="index.html">
<img src="objetos/logotipo.gif" width="270" height="80"
alt="Haz clic aquí para volver a la página de inicio">
</a>
</div>
<div id="publicidad">Bienvenidos a mi web</div>
</div>
<div id="navegacion">
<ul>
<li><a href="#">Sección 1</a></li><li><a href="#">Sección 2</a></li><li><a href="#">Sección 3</a></li><li><a href="#">Sección 4</a></li>
</ul>
</div>
<div id="contenido">
<div id="menu">
<h1>Título de Sección 1</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li>
</ul>
</div>
<h1>Esta será la zona principal de la web</h1>
<p>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> <p>En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sangrías por la izquierda a la primera línea, que queda mucho mejor.</p>
<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">pié uno</div>
<div id="piedos">pié dos</div>
<div id="pietres">pié tres</div>
<div id="curva-inferior"></div>
</div>
</body>
</html>
CSS:
*{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 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-top:black 1px solid ; border-right:black 1px solid ; border-left:black 1px solid ; height:65px}
#pieuno {background-color:brown ; float:left ; width:150px}
#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:silver}
a:active{}