posicionamiento de Capas con CSS, Ayuda!!!

[walvaRo]

posicionamiento de Capas con CSS, Ayuda!!!

Hola amigos, he leido tutoriales sobre "posicionamiento en CSS", pero no acabo de captar ciertos conceptos.
Estoy realizando una página web con capas, algunas con "position:absolute;" como las que componen la cabecera ya que siempre van a ser iguales, y otras, las estoy colocando sin posición, utilizando los "margin-top" y los "paddings", para que se empujen entre sí y poder crear bloques con las diferentes clases de cajas que he diseñado, reutilizandolas en cualquier momento siguiendo el "flujo" de datos de la página...

Mi problema surje cuando quiero diseñar el pie de la página, que siempre será igual en cuanto a altura y posición, es decir tiene 300px de altura, y quiero que siempre esté a 0px del "bottom", osea, pegado abajo del todo, y también quiero que entre el límite superior del pie y el límite inferior del contenido de la página, haya un espacio, o "margin" de 100px.

Pero no se hacerlo, no se como lograrlo pues el cuerpo de las páginas siempre se superpone con el píe...

Saludos! y Algun consejo porfavor!

[hades87]

primero de todo yo usaría siempre capas con posición relativa, ya que en absolute tengas la resolución que tengas se verá igual y podría quedar algo feo.

Yo de ti haría el cuerpo de height: inhert o 100%; y al pie le daría un margin:100px 0 0 0;
así conseguirás lo que quieres.

[walvaRo]

La estructura de mi web es esta:

<div id="todo">

<div id="header">
</div>

<div id="lista_izquierda">
<ul>
<li>
<div class="caja">
Hola
</div>
</li>
<li>
<div class="caja">
¿Que tal?
</div>
</li>
</ul>
</div>

<div id="contenido">
<div class="caja">
Contenido...
</div>
</div>

<div id="pie">
<div class="cajapie">
[email protected]
</div>
</div>

</div>

Y estos son los estilos CSS:

#todo{
background-color:transparent;
height:auto;
width:100%;
}
#header{
heigth:150px;
clear:both;
}
#lista_izquierda{
background-color:transparent;
margin-top:180px;
margin-left:40px;
width:150px;
height:auto;
}
.caja {
background-color:transparent;
background-image:url(../img/fondolineas01.png);
background-repeat:repeat;
background-position:top left;
border-left:0px solid;
border-top:0px solid;
border-right:1px solid;
border-bottom:1px solid;
border-color:#000b2b;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:5px;
}
#contenido{
background-color:transparent;
margin-top:180px;
margin-left:200px;
width:400px;
height:auto;
}
#pie{
background-color:transparent;
height:auto;
width:100%;
bottom:0px;
margin-top:100px;
}
.cajapie {
background-color:transparent;
background-image:url(../img/fondocuadros01.png);
background-repeat:repeat;
background-position:top left;
padding-left:10%;
padding-right:50%;
padding-top:10%;
padding-bottom:20%;
}

¿Por que mi pie no se desplaza según crezca o disminuya la altura del contenido, guardando siempre ese margen, esa distancia por arriba de 100px?

[hades87]

tu quieres que el pie se mueva siempre en la medida de tu página? si es así deja un espacio de 100px, entre tu cuerpo y el pie y ya está.

PD: trata de optimizar tu hoja de estilos, que hay cosas que se podrían acortar.

[walvaRo]

Pero como dejo ese espacio de 100px ???

#pie{
background-color:transparent;
height:auto;
width:100%;
bottom:0px;
margin-top:100px;
}

El margin-top de 100px, no hace nada... ¿Cómo logro ese espacio de 100px???
Cómo hago que el contenido, o la lista_izquierda Empujen al pie??? hacia abajo???

[hades87]

te aconsejo que hagas un contenedor, ahí dentro le pones la cabecera, debajo el menu izquierda y contenido cada uno con un float, y debajo le pones el pie con un margin-top de 100px;

[walvaRo]

HOla, !!! He probado a hacer un contenedor para la lista_izquierda y para el contenido, y ahora si que por fín me empuja bien el pie !!! Ya está solucionado!!!Mil Gracias!!!

[hades87]

jeje, me alegra de que te haya servido la ayuda ;). Esa es una técnica que uso yo también para poder desplazar el cuerpo a mi antojo, y no tener que ir moviendo cada elemento individualmente.