Foros del Web » Creando para Internet » CSS »

CSS para un pie de pagina

Estas en el tema de CSS para un pie de pagina en el foro de CSS en Foros del Web. Creo que es un tema muy hablado, pero sigo sin encontrarle solucion. Estoy necesitando una estructura como esta: http://www.araudi.net/ejemplos/3_capas.html El problema es cuando "cuerpo" crece ...
  #1 (permalink)  
Antiguo 29/01/2011, 01:01
Avatar de granbosteron  
Fecha de Ingreso: agosto-2004
Mensajes: 164
Antigüedad: 13 años, 3 meses
Puntos: 1
CSS para un pie de pagina

Creo que es un tema muy hablado, pero sigo sin encontrarle solucion.

Estoy necesitando una estructura como esta:
http://www.araudi.net/ejemplos/3_capas.html

El problema es cuando "cuerpo" crece mediante informacion y cosas que pongamos dentro del mismo, ya que "pie" tiene una posicion absoluta, cuerpo al crecer y superar el tamaño de pantalla, empieza a crecer por detras de "pie".

Si a "pie" le pongo posicion relativa, el problema mencionado es solucionado "cuerpo" crece y "pie" desciende en la pantalla sobre el margen inferior, pero cuando "cuerpo" tiene poca informacion dentro de su estructura, "pie" no queda en la parte inferior sino que queda por el medio o con unos 30px desde el margen inferior.

Hay alguna solucion a esto?
El ejemplo a probar es el mismo del link, me parece muy buenas las orientaciones, pero esto lo considero un error.

Si esta la respuesta en algun post del foro, agradeceria me lo pasen. Juro que lei bastante y no di con la solucion. Pero si esta, pido perdon y borren este post.

gracias
__________________
Saludos :adios: :adios: :adios:
  #2 (permalink)  
Antiguo 29/01/2011, 02:07
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: CSS para un pie de pagina

Es sencillo, muy sencillo:

HTML:

Cita:
<div id="capaMadre">
<div id="cabecera">Header</div>
<div id="cuerpo">Cuerpo</div>
<div id="pie">Pie</div>
</div>
CSS:

Cita:
html, body{
margin:0;
padding:0;
height:100%;
background-color:#366;
}
#capaMadre{
width:790px;
margin:0 auto;
height:100%;
}
#cabecera{
background-color: #c93;
text-align: center;
height:80px;
}
#cuerpo{
height:80%;
padding:20px 0;
background-color: #6cc;
}
#pie{
height: 40px;
background-color: #333;
color: #fff;
text-align: center;
clear: both;
}
Hay tienes un ejemplo, quita el Height del #cuerpo y coloca "min-height" y un valor en px, 400px puede ser bien.. y listo!

Si vas a colocar capas flotantes dentro de cuerpo o cualquier div, al div padre "en este caso siendo #cuerpo", agregale:

Cita:
overflow:hidden;
Saludos!
  #3 (permalink)  
Antiguo 29/01/2011, 03:33
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: CSS para un pie de pagina

Hola:

Deberías echarle un vistazo a este ejemplo de la misma página.

Saludos.

  #4 (permalink)  
Antiguo 29/01/2011, 05:44
 
Fecha de Ingreso: mayo-2010
Mensajes: 7
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: CSS para un pie de pagina

Buenas:

No entiendo bien para que quieres un pie con Posicion absoluta.

Si tiene posicion absoluta , esta fuera del flujo normal de los elementos (divs) , osea que el pie siempre te va a quedar por arriba del cuerpo (con flujo normal)
Asi funciona,por eso.. no creo q haya solucion.
Busca mas info sobre posicion y flujo en css. hay mucha info y videos al respecto. Saludos

espero q t sirva.
  #5 (permalink)  
Antiguo 29/01/2011, 21:27
Avatar de granbosteron  
Fecha de Ingreso: agosto-2004
Mensajes: 164
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: CSS para un pie de pagina

Gracias gente por las respuestas y ejemplos.
Pero alguien prueba estos ejemplos con contenido en su interior? todo muy lindo pero a la hora de poner contenido se desarma todo.

Lo que necesito es un pie que se comporte como pie, cuando hay mucho o poco contenido en el cuerpo.

En estos ejemplos, noto que el pie, al reducir la pantalla pisa al contenido del cuerpo. Si hay poco contenido, se mantiene en la parte inferior y esta bien. Pero si cuerpo tiene contenido, al reducir la pantalla, pie pisa la informacion de cuerpo.

hay otras soluciones con CSS? o sigo con las tablas?
__________________
Saludos :adios: :adios: :adios:
  #6 (permalink)  
Antiguo 30/01/2011, 01:06
 
Fecha de Ingreso: mayo-2010
Mensajes: 7
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: CSS para un pie de pagina

Creo que estas confundiendo posicionamiento con como flotan los elementos. Yo hice el ejemplo.

tendrias q encerrar todo en un div contenedor (el header el cuerpo y el pie)
y que los tres div floten a la izquierda con float:left

Yo hice la prueba. y funciona!.

Saludos!.Y espero q te haya servido.
  #7 (permalink)  
Antiguo 30/01/2011, 04:16
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: CSS para un pie de pagina

Hola:

¿Y que problema hay con el ejemplo que te he puesto aquí? ¿Porqué no te vale?

Saludos.

  #8 (permalink)  
Antiguo 30/01/2011, 15:46
Avatar de granbosteron  
Fecha de Ingreso: agosto-2004
Mensajes: 164
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: CSS para un pie de pagina

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:

¿Y que problema hay con el ejemplo que te he puesto aquí? ¿Porqué no te vale?

Saludos.

Si Jomaruro y gracias!!! Pero no me funciona para como queria que se comporten los div a a la hora de reducir o extender la ventana del browser.

Les dejo el ejemplo que encontre por ahi y funciona realmente muy bien y es lo que queria. Quizas ya postearon algo parecido, pero realmente no lo encontre y este ejemplo econtrado espero les sirva a la gente que busca sobre este problema!

http://www.xs4all.nl/~peterned/examples/csslayout1.html

Es muy parecido a los ejemplos de mas arriba, creo que la diferencia que veo es que en el div "content" esta seteado el padding inferior con el tamaño que debe llevar el pie, puede ser esto como lo estoy explicando? espero que si, porque en mi tonta cabeza sobre el css es lo que entendi

abrazo a todos y gracias nuevamente! Siempre encontramos la solucion o estamos a un 99.9%
__________________
Saludos :adios: :adios: :adios:

Etiquetas: pie
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




La zona horaria es GMT -6. Ahora son las 09:40.