Foros del Web » Creando para Internet » CSS »

Posicionar footer

Estas en el tema de Posicionar footer en el foro de CSS en Foros del Web. Bueno ya llevo unos días intentando colocar el footer SIEMPRE abajo... y si, lo consigo hasta que el texto es mas grande. Ahí es cuando ...
  #1 (permalink)  
Antiguo 31/05/2011, 11:30
Avatar de Ventru3  
Fecha de Ingreso: noviembre-2010
Ubicación: Disneylandia
Mensajes: 86
Antigüedad: 7 años
Puntos: 13
Mensaje Posicionar footer

Bueno ya llevo unos días intentando colocar el footer SIEMPRE abajo... y si, lo consigo hasta que el texto es mas grande. Ahí es cuando esta el problema, que el footer no es empujado ni la posición absoluta con el bottom: 0; me sirve de nada.

Os dejo la estructura HTML de la web.

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
  4.  
  5. </head>
  6.  
  7.  
  8. <div id="all-wrapper">
  9.    
  10.     <div id="header"></div>
  11.  
  12.     <div id="main-wrapper">
  13.         <div id="content">
  14.             <div id="text">
  15.                 Aqui va el texto de la web
  16.             </div>
  17.         </div>
  18.     </div>
  19.  
  20.     <div id="push"></div>
  21.  
  22. </div> 
  23.  
  24. <div id="footer"></div>
  25.  
  26. </body>
  27.  
  28. </html>

Y el CSS

Código CSS:
Ver original
  1. html, body {
  2.     margin: 0;
  3.     padding: 0;
  4.     height: 100&#37;;
  5.     background-color: #e5e5e5;
  6.     font-family: Georgia, Arial, serif;
  7.     font-size: 12px;
  8.     color: #252525;
  9. }
  10.  
  11. #all-wrapper {
  12.     border: 1px solid;
  13.     min-height: 100%;
  14.     height: auto !important;
  15.     height: 100%;
  16.     margin-bottom: -40px;
  17. }
  18.  
  19. #header {
  20.     background: url(images/header.png) repeat-x;
  21.     width: 100%;
  22.     height: 220px;
  23.     padding-bottom: 100px;
  24. }
  25.  
  26. #main-wrapper {
  27.     margin: 0px auto;
  28.     padding-bottom: 80px;
  29.     width: 768px;
  30. }
  31.  
  32. #content {
  33.     background: url(images/content-box.png) no-repeat;
  34.     width: 768px;
  35.     height: 441px;
  36. }
  37.  
  38. #text {
  39.     width: 600px;
  40.     padding-top: 150px;
  41.     padding-right: 90px;
  42.     padding-left: 90px;
  43. }
  44.  
  45. #push {
  46.     height: 40px;
  47.     clear: both;
  48. }
  49.  
  50. #footer {
  51.     height: 40px;
  52.     text-align: center;
  53.     clear: both;
  54. }

No entiendo porque el all-wrapper, que es el que contiene todo el contenido no crece con el texto con lo cual cuando el texto es demasiado grande el footer no queda posicionado abajo.

A ver si alguien sabe algo

PD: He buscado MUCHO en internet y en el foro así que agradecería que no hubieran mensajes de: busca bien o esto ya se a puesto muchas veces y bla bla bla.

Última edición por Ventru3; 31/05/2011 a las 11:42
  #2 (permalink)  
Antiguo 31/05/2011, 12:36
 
Fecha de Ingreso: abril-2011
Mensajes: 49
Antigüedad: 6 años, 7 meses
Puntos: 1
Respuesta: Posicionar footer

Pon entre el footer y el resto del contenido un div con heigth de 1px y así siempre se irá hacia abajo
  #3 (permalink)  
Antiguo 31/05/2011, 12:47
Avatar de Ventru3  
Fecha de Ingreso: noviembre-2010
Ubicación: Disneylandia
Mensajes: 86
Antigüedad: 7 años
Puntos: 13
Respuesta: Posicionar footer

No, tampoco funciona.

No entiendo porque la caja no crece con el texto, parece que el texto estuviera por encima de todos los divs.
  #4 (permalink)  
Antiguo 31/05/2011, 13:00
 
Fecha de Ingreso: agosto-2009
Mensajes: 52
Antigüedad: 8 años, 4 meses
Puntos: 4
Respuesta: Posicionar footer

Hola Ventru3,
no sé si el ejemplo te servirá, espero que sí.
Hace años se publicó un artículo muy bueno sobre como hacer para que los footers se mantengan siempre abajo. Échale un vistazo:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Un saludo
  #5 (permalink)  
Antiguo 31/05/2011, 13:05
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Posicionar footer

pasa a revisar el código fuente de este aporte del compañero @Mikmoro -> clic aquí
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #6 (permalink)  
Antiguo 31/05/2011, 13:16
Avatar de Ventru3  
Fecha de Ingreso: noviembre-2010
Ubicación: Disneylandia
Mensajes: 86
Antigüedad: 7 años
Puntos: 13
Respuesta: Posicionar footer

El caso es que la estructura de las dos páginas que me habéis puesto las he probado (de hecho la del enlace de Ag666 es la misma que estoy utilizando) y no me sale bien, así que tendré que simplificar la estructura que tengo y una vez solucione el problema volver a reconstruir la estructura encima de la simple.

Esperare a que se me pase la mala ostia para volver a empezar porque no quiero quedarme sin ordenador.

PD: A ver si alguien me puede ayudar en base a la estructura que tengo
  #7 (permalink)  
Antiguo 31/05/2011, 14:23
 
Fecha de Ingreso: abril-2011
Mensajes: 49
Antigüedad: 6 años, 7 meses
Puntos: 1
Respuesta: Posicionar footer

Ponle heigth:auto; al wall-wrapper y así se adaptará al contenido y empujará al footer siempre abajo.
  #8 (permalink)  
Antiguo 31/05/2011, 14:38
Avatar de Ventru3  
Fecha de Ingreso: noviembre-2010
Ubicación: Disneylandia
Mensajes: 86
Antigüedad: 7 años
Puntos: 13
Respuesta: Posicionar footer

Lo tiene (linea 14) .
De hecho esta como importante para que prevalezca sobre los demás.
  #9 (permalink)  
Antiguo 01/06/2011, 09:05
Avatar de Ventru3  
Fecha de Ingreso: noviembre-2010
Ubicación: Disneylandia
Mensajes: 86
Antigüedad: 7 años
Puntos: 13
Respuesta: Posicionar footer

Bueno esta mañana con mas calma lo he empezado a hacer desde cero. Primero he hecho la estructura simple para ver que me funcionaba y después le he ido añadiendo lo demás. Al parecer el problema estaba en asignarle a #content un tamaño definido.

Gracias a todo por la ayuda
  #10 (permalink)  
Antiguo 01/06/2011, 09:37
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Posicionar footer

Cita:
Iniciado por Ventru3 Ver Mensaje
Bueno esta mañana con mas calma lo he empezado a hacer desde cero. Primero he hecho la estructura simple para ver que me funcionaba y después le he ido añadiendo lo demás. Al parecer el problema estaba en asignarle a #content un tamaño definido.

Gracias a todo por la ayuda
si te funciona, bien. pero es extraño lo que comentas. acabo de probarlo y funciona. está basado en este otro

si no programas para ie6 no te es necesario height: auto !important; así que puedes dejarlo así
Cita:
min-height: 100%;
height: auto;
  #11 (permalink)  
Antiguo 01/06/2011, 09:47
Avatar de Ventru3  
Fecha de Ingreso: noviembre-2010
Ubicación: Disneylandia
Mensajes: 86
Antigüedad: 7 años
Puntos: 13
Respuesta: Posicionar footer

Si, con el código del primer post el footer va perfecto mientras el texto no crezca mas de lo que ocupa el/la div/caja. Mientras esto no sucede puedes hacer zoom arriba y abajo que el footer siempre estará abajo. Pero cuando el texto excede la altura definida en el div content es cuando el footer se comporta de forma rara y no se queda abajo.

No acabo de entender muy bien aun el porque.

Con el content definido


Sin definir

Última edición por Ventru3; 01/06/2011 a las 10:03 Razón: Añadir caturas

Etiquetas: footer
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 17:40.