Hola,
Estoy maquetando lo que espero que pronto sea mi pagina web. Tengo ya mas o menos todas las capas en su sitio, pero me falta el pie de pagina. Podria solucionarlo con un margin, pero no quiero ponerselo ya que lo que pretendo es que cambie su posicion segun el contenido de la pagina. Que vaya subiendo y bajando segun haya mas contenido o menos.
Aqui les dejo el codigo HTML y CSS:
Código HTML:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>sdfsf</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="estilo.css" media="screen" />
</head>
<body>
<div id="contenedor">
<div id="cabecera""><h1>fdgdgd</h1></div>
<div id="menu"><p><a href="index.html">Inicio</a><a href="servicios.html">Servicios</a><a href="empresa.html">Empresa</a><a href="index.html">Tienda</a></p></div>
<div id="contenido">
<div id="principal">
<h1>¿Quienes Somos?</h1>
<p>Somos texto métido al azar para hacer una comprobación de como queda
la capa principal en conjunto con el resto de capas, espero que os guste.</p>
</div>
<div id="lateral">
<div id="noticias">
<h1>Noticias</h1>
<marquee direction="up">
<a href="http://www.google.es/url?sa=t&source=web&cd=1&ved=0CBcQFjAA&url=http%3A%2F%2Fwww.20minutos.es%2Fnoticia%2F1020739%2F0%2Ftelefonica%2Fplantilla%2Freduccion%2F&rct=j&q=telefonica%2020%20minutos&ei=g2-pTaeFBI6xhAefs4HNCQ&usg=AFQjCNHCmbqaJ7JM2JmJU20KKG35tYPZNw&cad=rja">Telfonica despide 5600 trabajadores</a>
</marquee>
</div>
<div id="catalogo">
CATALOGO UT
</div>
</div>
<div id="pie"></div>
</div>
</div>
</body>
</html>
Y aqui el codigo CSS:
Código HTML:
/*Estructura de la pagina*/
#contenedor {
width: 1024px;
margin: 0 auto;
color: red;
}
#cabecera{
height: 5em;
}
#cabecera h1{
color: green;
}
#menu {
width: 100%;
height: 2em;
color:blue;
background-color:green;
}
#menu a {
color: yellow;
margin-right: 0.5em;
border-right: 1px solid white;
padding-right:0.2em;
padding-top: .2em;
padding-bottom: 0.5em;
padding-left: 0.2em;
}
#menu p {
padding-top: 0.2em;
}
#lateral {
width: 25%;
height: 5em;
float: right;
}
#noticias {
margin-top: 1em;
background: Azure;
margin-bottom: 1em;
text-align: center;
border: 1px solid RoyalBlue;
border-right: 1px solid RoyalBlue;
border-left: 1px solid RoyalBlue;
}
#noticias h1 {
color: green;
text-align: center;
text-family: arial;
}
#catalogo {
height: 5em;
border: 1px solid MediumSeaGreen;
color: blue;
text-align: center;
text-family: arial;
}
#principal {
margin-top: 1em;
border: 1px solid white;
float: left;
width: 74%;
font-size: 14pt;
font-family: TimesNewRoman;
color: Teal;
}
#principal h1{
color: SteelBlue;
}
#pie {
width:100%;
border:1px solid grey;
height:4em;
clear:both;
}
El pie de pagina se queda justo en mitad de la pagina, y como buen pie de pagina me gustaria que estuviera al final de ella.
Espero puedan ayudarme.
Saludos, y gracias de antemano.