Posicionamiento capas

floyd_23 · #1 (**permalink**) 19/04/2011, 05:15

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>&iquest;Quienes Somos?</h1>
			<p>Somos texto m&eacute;tido al azar para hacer una comprobaci&oacute;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.

kseso? · #2 (**permalink**) 19/04/2011, 06:38

esa estructura se conoce (entre otras formas) como pie abajo

Se han descrito múltiples maneras de lograrlo. Cuál elegir es una decisión suya, en función de sus particularidades.