Hola;
Antes de nada, felicitaros por esta web, que en mi opinion esta muy bien hecha, y a mi me está siendo de mucha ayuda a la hora de aprender a crear Webs.
Tengo un problema con el Pie de Pagina que no logro solucionar.
He estado siguiendo el tutorial paso a paso, y haciendo la web igual que en el tuto, no me crea problemas, pero a la hora de hacer la web que estoy haciendo yo (en experimentos) no consiguo que el pie de pagina tenga una altura definida.
Ya que pongo los pieuno, piedos y pietres flotantes, tengo que darle una altura al "pie" para que no se quede en un pixel no? (eso es lo que he entendido)
Pero resulta que en mi web no hace caso de la orden de hight:65px
de hecho, cuando quito las cosas de dentro del pie, y las pongo flotantes, el pie desaparece, y los bordes de izda y derecha de este tambien, quedando los flotantes en medio sin bordes, y no consiguo tener una zona (un rectangulo) con bordes que sea el pie de pagina si no hay nada dentro.
OS PONGO EL CODIGO DE MI CSS "ESTILO GENERAL":
* {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;background-color:#FFFACD}
#global {width:1000px ; margin: 4px auto }
#curva-superior {background-image:url(objetos/curva-superior1000.gif);
background-repeat:no-repeat;
width:1000px;
height: 12px;
overflow:hidden;}
#cabecera {background-color:white;
border-left:black 1px solid;
border-right:black 1px solid;
height:85px;}
#logotipo {background-color:white; width:280px; float:left;}
#publicidad {background-color:none; width:518px; float:right;margin-top: 30px}
#navegacion {background-color:orange;
border:black 1px solid;
height:20px;}
#navegacion li {float:left;list-style:none;margin:0px 10px 0px 10px;}
#navegacion ul { margin-left: 50px }
#contenido {background-color: #FFD39B;
float:left;
border-left:black 1px solid;
border-right:black 1px solid;}
#contenido p {padding: 10px 10px 10px 40px;text-indent: 50px}
#menu {width:150px; float:left;
text-align:left; margin:5px 10px 3px 3px;
background-image:url(objetos/menu-parte-inferior-1.gif);
background-position:bottom;
padding-bottom:7px;
text-align:center}
#menu li {list-style:none ; margin: 4px 8px 4px 6px;}
#menu h1 {text-decoration:none; font-size:14px;
background-image: url(objetos/menu-parte-superior-1.gif); padding-top:8px }
#pie {background-color: #CFCFCF ;
border-left: black 1px solid ;
border-right: black 1px solid ;
border-top: black 1px solid ;
height: 85px ;}
#pie li {list-style:none;font-size:12px;}
#pieuno {background-color:none; float:left; width:200px;}
#piedos {background-color:none; float:left; width:598px;}
#pietres {background-color:none; float:left; width:200px;}
#curva-inferior {background-image:url(objetos/curva-inferior1000.gif);
background-repeat:no-repeat;
width:1000px;
height: 12px;
overflow:hidden;}
a {color: brown; font-size:none ; text-decoration: none;display: block}
a:link {color: none; font-size:none ; text-decoration: none}
a:visited {color: none; font-size:none ; text-decoration: none}
a:hover {color: red; font-size:none ; text-decoration: underline ; background-color: none}
a:active {color: none; font-size:none ; text-decoration: underline}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
NO SE SI ESTO HACE FALTA, PERO POR SI ACASO.... OS PONGO TAMBIEN LA PLANTILLA:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>plantilla</title>
<link rel="stylesheet" href="estilo-general1.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<!-- INICIO CODIGO DE CABECERA - NO TOCAR -->
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
<img src="objetos/logotipo.jpg" width="270px" height="80px"
alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="publicidad">Mi cuenta LOgin Log out</div>
</div>
<div id="navegacion">
<ul> <li><a href="#">Inicio</a></li><li><a href="#">Calzado</a></li><li><a href="#">Alta Visibilidad</a></li><li><a href="#">Camisas</a></li><li><a href="#">Polos</a></li><li><a href="#">Sección 4</a></li><li><a href="#">Trajes de Agua</a></li><li><a href="#">EPIs</a></li> </ul>
</div>
<!-- FIN DE CODIGO DE CABECERA -->
<div id="contenido">
<!-- INICIO CODIGO DE MENU LATERAL IZQUIERDO -->
<div id="menu">
<h1>Título de Sección 1</h1>
<ul><li><a href="ruta/archivo.html"target="_blank">zapatos</a></li> <li><a href="ruta/archivo.html"target="_blank">ropa</a></li><li><a href="ruta/archivo.html"target="_blank">camisas</a></li> <li><a href="ruta/archivo.html"target="_blank">cascos</a></li> </ul>
</div>
<!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->
<h1> titulo 1 </h1>
<p>Tras esta aclaración, vamos a incluir un par de párrafos más a continuación de ese.
Ya sabes, has de poner al principio y al final de cada uno para que el navegador
sepa donde empiezan y terminan. Escribe un par de párrafos que tengan bastante texto, al menos de Estilo. Pero no pasa nada, lo arreglamos rápido definiendo un estilo justificado
Por ahora, abre tu Hoja de Estilo e incluye esta nueva línea, por ejemplo, al final de su contenido:</p>
</div>
<!-- INICIO CODIGO PIE DE PAGINA - NO TOCAR -->
<div id="pie">
<div id="pieuno">
<ul>
<li><a href="#">Foro Ejemplo</a></li> <li><a href="#">Contactos</a></li> <li><a href="#">Nos Enlazan</a></li>
</ul>
</div>
<div id="piedos"> pie dos</div>
<div id="pietres">
<ul>
<li><a href="#">Directorio</a></li> <li><a href="#">TopSite</a></li> <li><a href="#">Mapa de la Web</a></li>
</ul>
</div>
</div>
<!-- FIN CODIGO PIE DE PAGINA -->
<div id="curva-inferior"></div>
</div>
</body>
</html>
GRACIAS DE ANTEMANO.
UN SALUDO
Antes de nada, felicitaros por esta web, que en mi opinion esta muy bien hecha, y a mi me está siendo de mucha ayuda a la hora de aprender a crear Webs.
Tengo un problema con el Pie de Pagina que no logro solucionar.
He estado siguiendo el tutorial paso a paso, y haciendo la web igual que en el tuto, no me crea problemas, pero a la hora de hacer la web que estoy haciendo yo (en experimentos) no consiguo que el pie de pagina tenga una altura definida.
Ya que pongo los pieuno, piedos y pietres flotantes, tengo que darle una altura al "pie" para que no se quede en un pixel no? (eso es lo que he entendido)
Pero resulta que en mi web no hace caso de la orden de hight:65px
de hecho, cuando quito las cosas de dentro del pie, y las pongo flotantes, el pie desaparece, y los bordes de izda y derecha de este tambien, quedando los flotantes en medio sin bordes, y no consiguo tener una zona (un rectangulo) con bordes que sea el pie de pagina si no hay nada dentro.
OS PONGO EL CODIGO DE MI CSS "ESTILO GENERAL":
* {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;background-color:#FFFACD}
#global {width:1000px ; margin: 4px auto }
#curva-superior {background-image:url(objetos/curva-superior1000.gif);
background-repeat:no-repeat;
width:1000px;
height: 12px;
overflow:hidden;}
#cabecera {background-color:white;
border-left:black 1px solid;
border-right:black 1px solid;
height:85px;}
#logotipo {background-color:white; width:280px; float:left;}
#publicidad {background-color:none; width:518px; float:right;margin-top: 30px}
#navegacion {background-color:orange;
border:black 1px solid;
height:20px;}
#navegacion li {float:left;list-style:none;margin:0px 10px 0px 10px;}
#navegacion ul { margin-left: 50px }
#contenido {background-color: #FFD39B;
float:left;
border-left:black 1px solid;
border-right:black 1px solid;}
#contenido p {padding: 10px 10px 10px 40px;text-indent: 50px}
#menu {width:150px; float:left;
text-align:left; margin:5px 10px 3px 3px;
background-image:url(objetos/menu-parte-inferior-1.gif);
background-position:bottom;
padding-bottom:7px;
text-align:center}
#menu li {list-style:none ; margin: 4px 8px 4px 6px;}
#menu h1 {text-decoration:none; font-size:14px;
background-image: url(objetos/menu-parte-superior-1.gif); padding-top:8px }
#pie {background-color: #CFCFCF ;
border-left: black 1px solid ;
border-right: black 1px solid ;
border-top: black 1px solid ;
height: 85px ;}
#pie li {list-style:none;font-size:12px;}
#pieuno {background-color:none; float:left; width:200px;}
#piedos {background-color:none; float:left; width:598px;}
#pietres {background-color:none; float:left; width:200px;}
#curva-inferior {background-image:url(objetos/curva-inferior1000.gif);
background-repeat:no-repeat;
width:1000px;
height: 12px;
overflow:hidden;}
a {color: brown; font-size:none ; text-decoration: none;display: block}
a:link {color: none; font-size:none ; text-decoration: none}
a:visited {color: none; font-size:none ; text-decoration: none}
a:hover {color: red; font-size:none ; text-decoration: underline ; background-color: none}
a:active {color: none; font-size:none ; text-decoration: underline}
#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
NO SE SI ESTO HACE FALTA, PERO POR SI ACASO.... OS PONGO TAMBIEN LA PLANTILLA:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>plantilla</title>
<link rel="stylesheet" href="estilo-general1.css" type="text/css" media="all">
</head>
<body>
<div id="global">
<!-- INICIO CODIGO DE CABECERA - NO TOCAR -->
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
<img src="objetos/logotipo.jpg" width="270px" height="80px"
alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="publicidad">Mi cuenta LOgin Log out</div>
</div>
<div id="navegacion">
<ul> <li><a href="#">Inicio</a></li><li><a href="#">Calzado</a></li><li><a href="#">Alta Visibilidad</a></li><li><a href="#">Camisas</a></li><li><a href="#">Polos</a></li><li><a href="#">Sección 4</a></li><li><a href="#">Trajes de Agua</a></li><li><a href="#">EPIs</a></li> </ul>
</div>
<!-- FIN DE CODIGO DE CABECERA -->
<div id="contenido">
<!-- INICIO CODIGO DE MENU LATERAL IZQUIERDO -->
<div id="menu">
<h1>Título de Sección 1</h1>
<ul><li><a href="ruta/archivo.html"target="_blank">zapatos</a></li> <li><a href="ruta/archivo.html"target="_blank">ropa</a></li><li><a href="ruta/archivo.html"target="_blank">camisas</a></li> <li><a href="ruta/archivo.html"target="_blank">cascos</a></li> </ul>
</div>
<!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->
<h1> titulo 1 </h1>
<p>Tras esta aclaración, vamos a incluir un par de párrafos más a continuación de ese.
Ya sabes, has de poner al principio y al final de cada uno para que el navegador
sepa donde empiezan y terminan. Escribe un par de párrafos que tengan bastante texto, al menos de Estilo. Pero no pasa nada, lo arreglamos rápido definiendo un estilo justificado
Por ahora, abre tu Hoja de Estilo e incluye esta nueva línea, por ejemplo, al final de su contenido:</p>
</div>
<!-- INICIO CODIGO PIE DE PAGINA - NO TOCAR -->
<div id="pie">
<div id="pieuno">
<ul>
<li><a href="#">Foro Ejemplo</a></li> <li><a href="#">Contactos</a></li> <li><a href="#">Nos Enlazan</a></li>
</ul>
</div>
<div id="piedos"> pie dos</div>
<div id="pietres">
<ul>
<li><a href="#">Directorio</a></li> <li><a href="#">TopSite</a></li> <li><a href="#">Mapa de la Web</a></li>
</ul>
</div>
</div>
<!-- FIN CODIGO PIE DE PAGINA -->
<div id="curva-inferior"></div>
</div>
</body>
</html>
GRACIAS DE ANTEMANO.
UN SALUDO