Ver Mensaje Individual
  #7 (permalink)  
Antiguo 17/11/2015, 12:55
CarlosMilles
 
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. }