Tema: Problema al Ocultar/mostrar DIV
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/11/2009, 16:49
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 2 meses
Puntos: 20
Problema al Ocultar/mostrar DIV
Buenas,

He conseguido crear un script para ocultar/mostrar un determinado DIV, lo que pasa es que no me elimina el espacio que ocupa este div cuando lo oculto.
Es decir, si el div que muestro/oculto ocupa 100px de height, cuando lo oculto sigue habiendo 100px de height en medio de la página.

Aquí dejo el código completo:

Código html: 
Ver original
  1. <html>
  2. <head>
  3. <script LANGUAGE="javascript">
  4. function oculta(){
  5.  document.getElementById('banner-top').style.visibility = "hidden";
  6. }
  7. function muestra(){
  8.  document.getElementById('banner-top').style.visibility = "visible";
  9. }
  10. </script>
  11. <style>
  12. #banner-top{
  13. position:relative;
  14. width:960px;
  15. height:50px;
  16. margin:0 auto;
  17. margin-left:auto;
  18. margin-right:auto;
  19. padding-bottom:5px;
  20. background:yellow;}
  21.  
  22. #banner-top .message{
  23. /*background-color:#fff;*/
  24. padding-top:10px;
  25. padding-bottom:5px;}
  26.  
  27. #banner-top .close{position:absolute;
  28. top:10px;
  29. right:10px;
  30. font-size:11px;}
  31.  
  32. #banner-top .close a{
  33. color:#808080;
  34. text-decoration:none;}
  35.  
  36. </style>
  37. </head>
  38. <body>
  39. <div> PRUEBA ARRIBA</div>
  40. <div id="banner-top">
  41.     <div class="message">
  42.         <p><strong>Noticia: <a href="#">conocelos en el blog oficial</a> y sigue las <a href="#">reacciones en Twitter</a></strong></p>
  43.         <div class="close"><a title="Cerrar Mensaje" href="#">Cerrar <img alt="Cerrar mensaje" src="close.png"/></a></div>
  44.     </div>
  45. </div>
  46. <div> PRUEBA ABAJO </div>
  47. <a href="#" onclick="oculta()">Ocultar logo</a>
  48. <a href="#" onclick="muestra()">Muestrar logo</a>
  49. </body>
  50. </html>

Muchas gracias de antemano!