Desastre con el pie de página

Memo · 14 Nov 2008, 22:16 · Solicitar retirada

Estoy empezando la tercera lección y el pie de página no me sale como debería quedar segun las lecciones.

La plantilla 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">[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

</div>
<div id="contenido">
<div id="menu">
<h1>Título de Sección 1</h1>
<ul>

Enlace 1

Enlace 2

Enlace 3

Enlace 4
</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 id="pie"></div>
<div id="pieuno">
<ul>

Foro Ejemplo

Contactos

Nos Enlazan

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

Directorio

TopSite

Mapa de la Web

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

La Hoja de Estilos general 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 {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 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 ; }
#pie {border-left: black 1px solid ; border-right: black 1px solid ;
border-top: black 1px solid ; height: 65px }
#pieuno {float:left ; width:150px }
#piedos {float:left ; width:498px ; background-color: silver}
#pietres {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 {}

¿Que tengo mal en los códigos para que no quede bien mi pie de página?

Gracias y saludos.

manmanu · 15 Nov 2008, 02:33 · Solicitar retirada

Hola Memo,

A decir verdad tú trabajo está muy bien.
Los tipicos errores de los comienzos, si hay un error que hace que tú pie de página se deforme.

Te pego aquí lo que hace que no vaya bién tú trabajo;
te lo marco en Rojo,

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

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

Enlace 3
Enlace 4
</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 id="pie"></div> Esto está de más escrito,osea sobra.
<div id="pieuno">
<ul>
Foro Ejemplo
Contactos
Nos Enlazan

</div>
<div id="piedos">pie dos</div>
<div id="pietres">
<ul>
Directorio
TopSite
Mapa de la Web

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

La Hoja de Estilos general 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 {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 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 ; }
#pie {border-left: black 1px solid ; border-right: black 1px solid ;
border-top: black 1px solid ; height: 65px }
#pieuno {float:left ; width:150px }
#piedos {float:left ; width:498px ; background-color: silver}
#pietres {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 {}

Bueno reparalo, y a seguir trabajando.
Dime si lo solucionaste.

Saludos manmanu

Memo · 15 Nov 2008, 16:37 · Solicitar retirada

Gracias pude solucionarlo. No puedo creer que una palabra de mas desbarajuste todo en el HTML KIT.

A seguir con las lecciones.

Saludos.

manmanu · 15 Nov 2008, 20:04 · Solicitar retirada

Hola Memo,

me alegra que lo hayas solucionado.
Créeme un solo punto, en un lugar incorrecto, puede desbarajustar la palntilla Web más eleborada que hayas visto.

la verdad es que hay que prestar mucha atención a lo que escribimos.

Hasta otra

saludos manmanu

Memo · 16 Nov 2008, 00:19 · Solicitar retirada

Pues si, puede pasar todo en el HTML KIT y tengo otro problema :oops:(bueno estoy aprendiendo), que no se que pasa de nuevo en el pie de página necesito ayuda :lol:

Plantilla 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">[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

</div>
<div id="contenido">
<div id="menu">
<h1>Título de Sección 1</h1>
<ul>

Enlace 1

Enlace 2

Enlace 3

Foro Ejemplo

Contactos

Nos Enlazan

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

DirectorioTopSite

Mapa de la Web

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

Hoja de Estilos 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 {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 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 ; }
#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:150px }
#piedos {float:left ; width:498px
#pietres {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 {}

¿Dónde está mi error? :oops:

Saludos