Foros del Web » Creando para Internet » CSS »

Footer abajo del todo

 Estas en el tema de Footer abajo del todo en el foro de CSS en Foros del Web. Buenas, ¿hay alguna manera para que el footer siempre esté abajo del todo? Me gustaría que este lo hiciese automáticamente, y no forzandolo yo a ...
  #1 (permalink)  
Antiguo 17/11/2015, 10:35
 
Fecha de Ingreso: noviembre-2015
Ubicación: Mallorca
Mensajes: 20
Antigüedad: 9 años
Puntos: 1
Footer abajo del todo
Buenas, ¿hay alguna manera para que el footer siempre esté abajo del todo?

Me gustaría que este lo hiciese automáticamente, y no forzandolo yo a una posición concreta.

La cosa es que añadí la imagen de un mapa, y para mi sorpresa el footer se quedó en el mismo sitio de antes y la imagen va por detrás, cuando yo lo que quiero es que el footer sin inportar de la altura de la imagen que haya siempre se acomode abajo a un cierto margen de esta.
  #2 (permalink)  
Antiguo 17/11/2015, 11:41
 
Fecha de Ingreso: julio-2014
Mensajes: 179
Antigüedad: 10 años, 3 meses
Puntos: 26
Respuesta: Footer abajo del todo
Muéstranos tu código amigo o si lo subiste a algún lado o subelo a jsfiddle y te ayudamos!!
__________________
Si haces las cosas como nadie las ha hecho, cobralas bien, si las vas a hacer como todos las han hecho, cobralas bien!!
MecanizandoWeb.com
  #3 (permalink)  
Antiguo 17/11/2015, 11:46
Avatar de yosoyelenainfante  
Fecha de Ingreso: noviembre-2015
Mensajes: 5
Antigüedad: 9 años
Puntos: 0
Respuesta: Footer abajo del todo
¿¿Has probado a ponerle position: fixed??
  #4 (permalink)  
Antiguo 17/11/2015, 11:57
Avatar de Imprentatotal  
Fecha de Ingreso: noviembre-2015
Ubicación: Madrid
Mensajes: 2
Antigüedad: 9 años
Puntos: 0
Respuesta: Footer abajo del todo
Aún soy un poco novato en CSS, pero creo que con un position: absolute debería funcionar.
  #5 (permalink)  
Antiguo 17/11/2015, 12:27
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 9 años, 5 meses
Puntos: 263
Respuesta: Footer abajo del todo
Código CSS: 
Ver original
  1. .foorter{
  2.     position:fixed;
  3.     bottom:0;
  4. }

con eso lo dejas hasta el fondo siempre
__________________
[email protected]
HITCEL
  #6 (permalink)  
Antiguo 17/11/2015, 12:47
 
Fecha de Ingreso: febrero-2015
Mensajes: 55
Antigüedad: 9 años, 9 meses
Puntos: 7
Respuesta: Footer abajo del todo
Yo lo tengo así

CSS
Código CSS: 
Ver original
  1. footer {
  2.     width: 100%;
  3.     height: 100px;
  4.     position: absolute;
  5.     bottom: 0;
  6.     left: 0;
  7. }

HTML
Código HTML: 
Ver original
  1. <footer>
  2.   <hr>
  3.         <center>MI FOOTER</center> 
  4. </footer>
  #7 (permalink)  
Antiguo 17/11/2015, 12:55
 
Fecha de Ingreso: noviembre-2015
Ubicación: Mallorca
Mensajes: 20
Antigüedad: 9 años
Puntos: 1
Respuesta: Footer abajo del todo
Cita:
Iniciado por Imprentatotal Ver Mensaje
Aún soy un poco novato en CSS, pero creo que con un position: absolute debería funcionar.
Yo soy novato también, lo tenía absolute, pero no! Como bien dicen por aquí es fixed, apuntatelo!! jajaja

Muy bien, ahora siempre se mantiene abajo!! PEEEEEERO, no se va debajo de la imagen, a ver si me se explicar, el footer siempre se queda fijo abajo pero tapando el final de la imagen de la página, es decir, está por encima del final del cuerpo de la página.

Código CSS: 
Ver original
  1. html{
  2.     overflow-y: scroll
  3. }
  4. body{
  5.     background-color: #cb4040;/*12345a*/
  6.     margin:0;
  7.     padding: 0;
  8.     border:0;
  9.     vertical-align: baseline;
  10.     width: 100%;
  11.     height:100%;
  12. }
  13. .Fuente{
  14.     font-family: 'Amatic SC', cursive;
  15.     font-size: 20px;
  16.     color:black;
  17.     font-weight: bold;
  18. }
  19. .Centrar{
  20.     position: absolute;
  21.     left: 50%;
  22.     transform: translateX(-50%);
  23. }
  24. .ContenedorCabecera{
  25.     background-color: #123456;
  26.     position: relative; /*Static ya que es la primera y su posición es arriba*/
  27.     height: 150px; /*???????????????????*/
  28. }
  29. a.Logo{
  30.     height: 213px;
  31.     width: 320px;
  32.     position: absolute;/*PORQUE?????????*/
  33.     top:13px;
  34.     left: 1%;
  35.     background:transparent url(../Imagenes/UEPcarLogo.png) no-repeat 0 0;
  36.     background-size: contain;
  37.     text-indent: -9999px;
  38.     font-size: 0;
  39.     text-decoration: none;
  40. }
  41. .ContenedorNavegacion{
  42.     position: relative;
  43. }
  44. .ContenedorBotones{
  45.     position: relative;
  46.     height: 60px;
  47. }
  48. .icon-set.icon-set-center {
  49.     position: absolute;
  50.     left: 50%;
  51.     transform: translateX(-50%);
  52.     top:100%;
  53. }
  54. .icon-set .icon {
  55.     width: 100px;
  56.     height: 60px;
  57.     display: inline-block;
  58.     cursor: pointer;
  59. }
  60.  
  61. .BotonHome{
  62.     background:transparent url(../Imagenes/Home.png) no-repeat 0 0;
  63. }
  64.  
  65. .BotonHome:hover {
  66.     background:transparent url(../Imagenes/HomeHover.png) no-repeat 0 0;
  67. }
  68.  
  69. .BotonADV {
  70.     background:transparent url(../Imagenes/ADV.png) no-repeat 0 0;
  71. }
  72.  
  73. .BotonADV:hover {
  74.     background:transparent url(../Imagenes/ADVHover.png) no-repeat 0 0;
  75. }
  76. .ContenedorCuerpo{
  77.     /*background-color: #321654;*/
  78.     position: relative;
  79.     height: 400px;
  80. }
  81. .XXX .PP {
  82.     width: 150px;/*ALTO Y ANCHO DE LOS SIMULADORES*/
  83.     height: 30px;
  84.     display: inline-block;
  85.     cursor: pointer;
  86. }
  87. .XXX .SS {
  88.     width: 50px;/*ALTO Y ANCHO DE LOS SIMULADORES*/
  89.     height: 30px;
  90.     display: inline-block;
  91.     cursor: pointer;
  92.     margin-left: 50px;
  93. }
  94. .SimuladorPartida{
  95.     background:transparent url(../Imagenes/SimuladorPartida.png) no-repeat 0 0;
  96. }
  97. .SimuladorLlegada{
  98.     background:transparent url(../Imagenes/SimuladorLlegada.png) no-repeat 0 0;    
  99. }
  100.  
  101.  
  102. /******* DESPLEGABLE IDIOMAS *******/
  103. .ContenedorIdiomas{
  104.     float: right;
  105. }
  106. ul.DropdownIdiomas{
  107.     width: 150px; /*Ancho del desplegable*/
  108.     border-radius: 5px; /*Curvatura del radio*/
  109.     -moz-border-radius: 5px;/*Compatibilidad con moz y resto navegadores*/
  110.     -webkit-border-radius: 5px;
  111.     background: #4b7af1; /*Color del desplegable, parte superior y el costado con los puntos*/
  112.     margin-top: 0em; /*Separación del desplegable respecto arriba*/
  113.     margin-right: 1em;/*Separación respecto margen derecho*/
  114.     list-style:none; /*Quitar los puntos del costado de las listas*/
  115. }
  116. ul.DropdownIdiomas li{
  117.     display: none;
  118. }
  119. ul.DropdownIdiomas li.active{
  120.     display: block;
  121.     
  122. }
  123. ul.DropdownIdiomas li.active {
  124.     padding-left: 24px;/*Margen interior izquierdo del texto, idioma actual*/
  125.     color: #000000;/*Color de la letra del que está seleccionado*/
  126. }
  127. ul.DropdownIdiomas li a{
  128.     display: block;
  129.     text-decoration: none; /*Quita la linea de abajo que tienen los enlaces*/
  130.     padding: 8px 8px 8px 10px;
  131.     background: #7d9ef2;/*Color del fondo de las tres opciones*/
  132. }
  133. ul.DropdownIdiomas li.last a{
  134.     border-radius: 5px; /*El ultimo del desplegable tiene radio 5px*/
  135. }
  136. ul.DropdownIdiomas li a:hover{
  137.     background: #256369; /*Color de fondo cuando hago el hover*/
  138.     color: #ffffff; /*Color de la letra cuando hago el hover*/
  139.     padding-left: 11px;
  140. }
  141. ul{/*Quitar la columna donde están los puntos de la lista*/
  142.     list-style-position: inside;
  143.     padding-left:0;
  144.     *margin-left:0;
  145. }
  146.  
  147.     /******* BANDERAS *******/
  148.     .Banderas {
  149.         width: 32px;
  150.         height: 24px;
  151.         float: right;
  152.         padding: 4px 25px 0px 4px;
  153.         margin: 3px;
  154.         margin-top: 8px;
  155.     }
  156.     .first .Banderas {
  157.       margin-top: 10px;
  158.     }
  159.     .Banderas.BanderaEsp {
  160.       background:transparent url(../Imagenes/BanderaEsp.png) no-repeat 0 0;
  161.     }
  162.     .Banderas.BanderaMall {
  163.       background:transparent url(../Imagenes/BanderaMall.png) no-repeat 0 0;
  164.     }
  165.     .Banderas.BanderaEng {
  166.       background:transparent url(../Imagenes/BanderaEng.png) no-repeat 0 0;
  167.     }
  168.     /******* BANDERAS *******/
  169.  
  170. /******* DESPLEGABLE IDIOMAS *******/
  171.  
  172. /******* FOOTER *******/
  173. footer{
  174.     width: 100%;
  175.     height: 70px;
  176.     background: #993c39;
  177.     position: fixed;
  178.     bottom: 0;
  179. }
  180. .Mapa{
  181.     margin-top: 190px;
  182. }
  #8 (permalink)  
Antiguo 18/11/2015, 05:45
 
Fecha de Ingreso: febrero-2015
Mensajes: 55
Antigüedad: 9 años, 9 meses
Puntos: 7
Respuesta: Footer abajo del todo
Cita:
Iniciado por CarlosMilles Ver Mensaje
Yo soy novato también, lo tenía absolute, pero no! Como bien dicen por aquí es fixed, apuntatelo!! jajaja

Muy bien, ahora siempre se mantiene abajo!! PEEEEEERO, no se va debajo de la imagen, a ver si me se explicar, el footer siempre se queda fijo abajo pero tapando el final de la imagen de la página, es decir, está por encima del final del cuerpo de la página.

Código CSS: 
Ver original
  1. html{
  2.     overflow-y: scroll
  3. }
  4. body{
  5.     background-color: #cb4040;/*12345a*/
  6.     margin:0;
  7.     padding: 0;
  8.     border:0;
  9.     vertical-align: baseline;
  10.     width: 100%;
  11.     height:100%;
  12. }
  13. .Fuente{
  14.     font-family: 'Amatic SC', cursive;
  15.     font-size: 20px;
  16.     color:black;
  17.     font-weight: bold;
  18. }
  19. .Centrar{
  20.     position: absolute;
  21.     left: 50%;
  22.     transform: translateX(-50%);
  23. }
  24. .ContenedorCabecera{
  25.     background-color: #123456;
  26.     position: relative; /*Static ya que es la primera y su posición es arriba*/
  27.     height: 150px; /*???????????????????*/
  28. }
  29. a.Logo{
  30.     height: 213px;
  31.     width: 320px;
  32.     position: absolute;/*PORQUE?????????*/
  33.     top:13px;
  34.     left: 1%;
  35.     background:transparent url(../Imagenes/UEPcarLogo.png) no-repeat 0 0;
  36.     background-size: contain;
  37.     text-indent: -9999px;
  38.     font-size: 0;
  39.     text-decoration: none;
  40. }
  41. .ContenedorNavegacion{
  42.     position: relative;
  43. }
  44. .ContenedorBotones{
  45.     position: relative;
  46.     height: 60px;
  47. }
  48. .icon-set.icon-set-center {
  49.     position: absolute;
  50.     left: 50%;
  51.     transform: translateX(-50%);
  52.     top:100%;
  53. }
  54. .icon-set .icon {
  55.     width: 100px;
  56.     height: 60px;
  57.     display: inline-block;
  58.     cursor: pointer;
  59. }
  60.  
  61. .BotonHome{
  62.     background:transparent url(../Imagenes/Home.png) no-repeat 0 0;
  63. }
  64.  
  65. .BotonHome:hover {
  66.     background:transparent url(../Imagenes/HomeHover.png) no-repeat 0 0;
  67. }
  68.  
  69. .BotonADV {
  70.     background:transparent url(../Imagenes/ADV.png) no-repeat 0 0;
  71. }
  72.  
  73. .BotonADV:hover {
  74.     background:transparent url(../Imagenes/ADVHover.png) no-repeat 0 0;
  75. }
  76. .ContenedorCuerpo{
  77.     /*background-color: #321654;*/
  78.     position: relative;
  79.     height: 400px;
  80. }
  81. .XXX .PP {
  82.     width: 150px;/*ALTO Y ANCHO DE LOS SIMULADORES*/
  83.     height: 30px;
  84.     display: inline-block;
  85.     cursor: pointer;
  86. }
  87. .XXX .SS {
  88.     width: 50px;/*ALTO Y ANCHO DE LOS SIMULADORES*/
  89.     height: 30px;
  90.     display: inline-block;
  91.     cursor: pointer;
  92.     margin-left: 50px;
  93. }
  94. .SimuladorPartida{
  95.     background:transparent url(../Imagenes/SimuladorPartida.png) no-repeat 0 0;
  96. }
  97. .SimuladorLlegada{
  98.     background:transparent url(../Imagenes/SimuladorLlegada.png) no-repeat 0 0;    
  99. }
  100.  
  101.  
  102. /******* DESPLEGABLE IDIOMAS *******/
  103. .ContenedorIdiomas{
  104.     float: right;
  105. }
  106. ul.DropdownIdiomas{
  107.     width: 150px; /*Ancho del desplegable*/
  108.     border-radius: 5px; /*Curvatura del radio*/
  109.     -moz-border-radius: 5px;/*Compatibilidad con moz y resto navegadores*/
  110.     -webkit-border-radius: 5px;
  111.     background: #4b7af1; /*Color del desplegable, parte superior y el costado con los puntos*/
  112.     margin-top: 0em; /*Separación del desplegable respecto arriba*/
  113.     margin-right: 1em;/*Separación respecto margen derecho*/
  114.     list-style:none; /*Quitar los puntos del costado de las listas*/
  115. }
  116. ul.DropdownIdiomas li{
  117.     display: none;
  118. }
  119. ul.DropdownIdiomas li.active{
  120.     display: block;
  121.     
  122. }
  123. ul.DropdownIdiomas li.active {
  124.     padding-left: 24px;/*Margen interior izquierdo del texto, idioma actual*/
  125.     color: #000000;/*Color de la letra del que está seleccionado*/
  126. }
  127. ul.DropdownIdiomas li a{
  128.     display: block;
  129.     text-decoration: none; /*Quita la linea de abajo que tienen los enlaces*/
  130.     padding: 8px 8px 8px 10px;
  131.     background: #7d9ef2;/*Color del fondo de las tres opciones*/
  132. }
  133. ul.DropdownIdiomas li.last a{
  134.     border-radius: 5px; /*El ultimo del desplegable tiene radio 5px*/
  135. }
  136. ul.DropdownIdiomas li a:hover{
  137.     background: #256369; /*Color de fondo cuando hago el hover*/
  138.     color: #ffffff; /*Color de la letra cuando hago el hover*/
  139.     padding-left: 11px;
  140. }
  141. ul{/*Quitar la columna donde están los puntos de la lista*/
  142.     list-style-position: inside;
  143.     padding-left:0;
  144.     *margin-left:0;
  145. }
  146.  
  147.     /******* BANDERAS *******/
  148.     .Banderas {
  149.         width: 32px;
  150.         height: 24px;
  151.         float: right;
  152.         padding: 4px 25px 0px 4px;
  153.         margin: 3px;
  154.         margin-top: 8px;
  155.     }
  156.     .first .Banderas {
  157.       margin-top: 10px;
  158.     }
  159.     .Banderas.BanderaEsp {
  160.       background:transparent url(../Imagenes/BanderaEsp.png) no-repeat 0 0;
  161.     }
  162.     .Banderas.BanderaMall {
  163.       background:transparent url(../Imagenes/BanderaMall.png) no-repeat 0 0;
  164.     }
  165.     .Banderas.BanderaEng {
  166.       background:transparent url(../Imagenes/BanderaEng.png) no-repeat 0 0;
  167.     }
  168.     /******* BANDERAS *******/
  169.  
  170. /******* DESPLEGABLE IDIOMAS *******/
  171.  
  172. /******* FOOTER *******/
  173. footer{
  174.     width: 100%;
  175.     height: 70px;
  176.     background: #993c39;
  177.     position: fixed;
  178.     bottom: 0;
  179. }
  180. .Mapa{
  181.     margin-top: 190px;
  182. }
Añadale al footer un z-index negativo, para que quede por debajo de los demás estilos, así no tendrás problemas.

Código CSS: 
Ver original
  1. footer{
  2.     width: 100%;
  3.     height: 70px;
  4.     background: #993c39;
  5.     position: fixed;
  6.     bottom: 0;
  7.     z-index: -9999;
  8. }

Ya nos dirás que tal.

Saludos!!
  #9 (permalink)  
Antiguo 18/11/2015, 06:25
 
Fecha de Ingreso: noviembre-2015
Ubicación: Mallorca
Mensajes: 20
Antigüedad: 9 años
Puntos: 1
Respuesta: Footer abajo del todo
Cita:
Iniciado por oscaar90 Ver Mensaje
Añadale al footer un z-index negativo, para que quede por debajo de los demás estilos, así no tendrás problemas.

Código CSS: 
Ver original
  1. footer{
  2.     width: 100%;
  3.     height: 70px;
  4.     background: #993c39;
  5.     position: fixed;
  6.     bottom: 0;
  7.     z-index: -9999;
  8. }

Ya nos dirás que tal.

Saludos!!
Lo primero gracias! Pero eso no me soluciona el problema, con esto lo que consigo es que el footer esté DETRÁS de todo, pero no debajo. Es dcir, antes el footer se me superponía y se comia el final del cuerpo de mi página, que lo que tenía es una imagen. Ahora lo que pasa es que esa imagen se pone por ENCIMA del footer. En conclusión uno siempre está "pisando" al otro, y lo que yo necesito es el footer detecte que hay por ejemplo, esa imagen y se ponga debajo.

No se si me explico.

Ahora está así



Como veis ahora la imagen del mapa se ha superpuesto al footer. Yo quiero ver mapa entero, y luego el footer.
  #10 (permalink)  
Antiguo 18/11/2015, 07:04
 
Fecha de Ingreso: febrero-2015
Mensajes: 55
Antigüedad: 9 años, 9 meses
Puntos: 7
Respuesta: Footer abajo del todo
Ahora toca ajustar el footer...
Añade un margin-top a tu footer
Código CSS: 
Ver original
  1. footer{
  2.         width: 100%;
  3.         height: 70px;
  4.         background: #993c39;
  5.         position: fixed;
  6.         bottom: 0;
  7.          margin-top: 150px;
  8.         z-index: -9999;
  9.     }

Ves jugando con ese margin-top: 150px subiendolo o bajandolo, y ya nos dirás que tal :)
  #11 (permalink)  
Antiguo 18/11/2015, 08:25
 
Fecha de Ingreso: noviembre-2015
Ubicación: Mallorca
Mensajes: 20
Antigüedad: 9 años
Puntos: 1
Respuesta: Footer abajo del todo
Cita:
Iniciado por oscaar90 Ver Mensaje
Ahora toca ajustar el footer...
Añade un margin-top a tu footer
Código CSS: 
Ver original
  1. footer{
  2.         width: 100%;
  3.         height: 70px;
  4.         background: #993c39;
  5.         position: fixed;
  6.         bottom: 0;
  7.          margin-top: 150px;
  8.         z-index: -9999;
  9.     }

Ves jugando con ese margin-top: 150px subiendolo o bajandolo, y ya nos dirás que tal :)
Vale esta opción ya la concebí en los inicios, pero pensé que habría otra opción que así se ajustase sola en función del tipo de pantalla etc

GRASIAS!

Etiquetas: abajo, footer, todo
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 06:46.