Ver Mensaje Individual
  #9 (permalink)  
Antiguo 29/04/2012, 11:10
bloguero
 
Fecha de Ingreso: noviembre-2011
Mensajes: 97
Antigüedad: 13 años, 1 mes
Puntos: 3
Respuesta: ¿Como corregir el problema del boton scroll cuando lo ocultan?

Cita:
Iniciado por cristian_cena Ver Mensaje
Hola bloguero, no se ve la imagen. Es necesario el html para poder responder lo siguiente:

Es decir, tenes elementos que se relacionan (boton, fondo y barra del footer) y necesitamos verlos (html+css). El problema seguro lo resolves aplicando la propiedad z-index, nada más te pido el código para ayudarte a hacerlo.

Saludos.
Bueno la imagen es este: http://bit.ly/JhKne5 , date cuenta como el footer tapa mi boton scroll.



Código HTML:
Ver original
  1. <p id='back-top'>
  2. <a href='#top'><span></span>Arriba</a>
  3. </p>
  4.  
  5.     <div class="container">
  6.       <p>2012</p>
  7.     </div>




Código CSS:
Ver original
  1. footer {
  2.     margin: 0;
  3.     padding: 0;
  4.     border: 0;
  5.     outline: 0;
  6.     font-weight: inherit;
  7.     font-style: inherit;
  8.     font-size: 100%;
  9.     font-family: inherit;
  10.     vertical-align: baseline;
  11. }
  12. footer{display: block}
  13. footer {
  14.     position: relative;
  15.     height: 54px;
  16.     clear: both;
  17.     width: 100%;
  18.     background-image: url(../images/footer.png);
  19.     background-position: left top;
  20.     background-repeat: repeat-x;
  21.     margin-bottom: 18px;
  22.     background-color: black;
  23.     text-align:center;
  24.     color:#FFF;
  25. }
  26.  
  27.  
  28.  
  29. #container{
  30.     position: relative;
  31.     width: 100%;
  32. }
  33.    
  34. #container {
  35.     position: relative;
  36.     width: 980px;
  37.     margin: 0 auto;
  38.     background-color: transparent;
  39.     min-height: 100%;
  40. }
  41.  
  42.  
  43. #back-top {
  44. position: fixed;
  45. bottom: 30px;
  46. right: 30px;
  47. padding-top: 50px;
  48. display: none;
  49. }
  50. #back-top a {
  51. width: 108px;
  52. display: block;
  53. text-align: center;
  54. font: 11px/100% Arial, Helvetica, sans-serif;
  55. text-transform: uppercase;
  56. text-decoration: none;
  57. color: #737373;
  58. padding-top: 50px;
  59. width: 108px;
  60. height: 58px;
  61. display: block;
  62. margin-bottom: 7px;
  63. background: #ddd;
  64. -webkit-border-radius: 108px;
  65. -moz-border-radius: 108px;
  66. border-radius: 108px;
  67. -webkit-transition: 1s;
  68. -moz-transition: 1s;
  69. transition: 1s;
  70. -webkit-transition: 1s;
  71. -moz-transition: 1s;
  72. transition: 1s;
  73. }
  74. #back-top a:hover {
  75. background-color: #000;
  76. }
  77. #back-top a:hover span {
  78. background-color: #777;
  79. }