Tema: "Sticky Footer" que me da problemas :(
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/03/2010, 09:20
Avatar de sumarioweb
sumarioweb
 
Fecha de Ingreso: diciembre-2009
Mensajes: 19
Antigüedad: 14 años, 10 meses
Puntos: 0
Pregunta "Sticky Footer" que me da problemas :(
Hola, en mi blog, estabamos haciendo 3 blogs, contando el mio, como una afiliacion con una barrita, y se ponia arriba, pero ya que en mi blog el header no deja clickar en los enlaces por su posicion absoluta, quise hacer eso del sticky footer, mas o menos me ha salido, el problema es el mas o menos.

El footer esta separado del final de la pagina, es decir es algo como:

(contenido de la web)
(mas contenido)
(sticky footer)
(un poquito de contenido)

y yo quiero que sea
(contenido de la web)
(mas contenido)
(un poquito mas de contenido)
(sticky footer)

Nose si asi habreis entendido, bueno mira de codigo yo tengo esto:

Código CSS: 
Ver original
  1. #contains {
  2. background-color:#4c4c4c;
  3. }
  4.  
  5. body{
  6. margin:0;
  7. padding:0 0 100px 0;
  8. }
  9.  
  10. div#footfoot{
  11. position:absolute;
  12. bottom:0;
  13. left:0;
  14. width:100%;
  15. height:50px;
  16. }
  17.  
  18. @media screen{
  19. body>div#footfoot{
  20. position: fixed;
  21. }
  22. }
  23.  
  24. * html body{
  25. overflow:hidden;
  26. }
  27.  
  28. * html div#page{
  29. height:100%;
  30. overflow:auto;
  31. }
  32.  
  33. div#footfoot ul {
  34. padding: 0 0 0 0;
  35. margin: 0 0 0 0;
  36. list-style-type: none;
  37. }
  38.  
  39. div#footfoot li {
  40. display: inline;
  41. list-style-image: url('none');
  42. list-style-type: none;
  43. background-image: url('none');
  44. margin-left: 150px;
  45. }
  46.  
  47. div#footfoot li a:link{
  48. color: #ccff00; 
  49. text-decoration: none;
  50. }
  51.  
  52. div#footfoot li  a:visited {
  53. color: #ccff00; 
  54. text-decoration: none;
  55. }
  56.  
  57. div#footfoot li a:hover {
  58. color: #FFFF00;
  59. border-bottom-width: 2px;
  60. border-bottom-style: solid;
  61. border-bottom-color: #FFFF00;
  62. }
  63.  
  64. *{margin:0;padding:0;}
  65. html,body{height:100%;}
  66. html{font-size:100%;}
  67. body{background:#000 url(images/header.jpg) no-repeat center top;font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;font-size:13px;font-style:normal;color:#4e4e4e;}
  68. #page{background:transparent url(images/bg.png) repeat-x center bottom;}

Y ahora para mostrar la barrita lo hago asi:

Código HTML: 
Ver original
  1. <body class="<?php mystique_body_class() ?>">
  2. <div id="footfoot">
  3. <div id="contains">
  4. <ul>
  5. <li><a href="http://dunk.netai.net/" title="Mundo Geek">Mundo Net</a></li>
  6. <li>-</li>
  7. <li><a href="http://sumarioweb.com.ar/" title="Programacion & Tips">Sumario Web</a></li>
  8. <li>-</li>
  9. <li><a href="http://tecnologiespc.zobyhost.com/" title="Actualidad PC">Tecnologies PC</a></li>
  10. </ul>
  11. </div>
  12. </div>
  13.  <div id="page">
  14. [...]
  15. </div>
  16. </body>

Ademas tambien la barrita me sale por debajo del contenido, es decir la barrita se ve entera, pero las letras de las entradas se superponen por encima de la barra, probe poniendole una posicion absoluta pero nada :S

Para verlo mejor, os dejo mi blog: sumarioweb.com.ar

Espero vuestra ayuda con ansias :P
Gracias de antemano :D