Foros del Web » Creando para Internet » CSS »

posicionamiento de Capas con CSS, Ayuda!!!

Estas en el tema de posicionamiento de Capas con CSS, Ayuda!!! en el foro de CSS en Foros del Web. posicionamiento de Capas con CSS, Ayuda!!! Hola amigos, he leido tutoriales sobre " posicionamiento en CSS ", pero no acabo de captar ciertos conceptos. Estoy ...
  #1 (permalink)  
Antiguo 14/02/2008, 02:30
 
Fecha de Ingreso: febrero-2004
Mensajes: 446
Antigüedad: 13 años, 10 meses
Puntos: 0
posicionamiento de Capas con CSS, Ayuda!!!

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!
  #2 (permalink)  
Antiguo 14/02/2008, 03:25
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: posicionamiento de Capas con CSS, Ayuda!!!

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.
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 14/02/2008, 04:35
 
Fecha de Ingreso: febrero-2004
Mensajes: 446
Antigüedad: 13 años, 10 meses
Puntos: 0
Re: posicionamiento de Capas con CSS, Ayuda!!!

La estructura de mi web es esta:

Cita:
<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:

Cita:
#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?
  #4 (permalink)  
Antiguo 14/02/2008, 04:46
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: posicionamiento de Capas con CSS, Ayuda!!!

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.
__________________
No diseñes usando tablas.
  #5 (permalink)  
Antiguo 14/02/2008, 04:58
 
Fecha de Ingreso: febrero-2004
Mensajes: 446
Antigüedad: 13 años, 10 meses
Puntos: 0
Re: posicionamiento de Capas con CSS, Ayuda!!!

Pero como dejo ese espacio de 100px ???

Cita:
#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???
  #6 (permalink)  
Antiguo 14/02/2008, 05:13
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: posicionamiento de Capas con CSS, Ayuda!!!

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;
__________________
No diseñes usando tablas.
  #7 (permalink)  
Antiguo 14/02/2008, 05:45
 
Fecha de Ingreso: febrero-2004
Mensajes: 446
Antigüedad: 13 años, 10 meses
Puntos: 0
Re: posicionamiento de Capas con CSS, Ayuda!!!

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!!!
  #8 (permalink)  
Antiguo 14/02/2008, 05:51
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: posicionamiento de Capas con CSS, Ayuda!!!

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.
__________________
No diseñes usando tablas.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 02:13.