Problema al Ocultar/mostrar DIV

neodani · #1 (**permalink**) 16/11/2009, 16:49

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<html>
<head>
<script LANGUAGE="javascript">
function oculta(){
 document.getElementById('banner-top').style.visibility = "hidden";
}
function muestra(){
 document.getElementById('banner-top').style.visibility = "visible";
}
</script>
<style>
#banner-top{
position:relative;
width:960px;
height:50px;
margin:0 auto;
margin-left:auto;
margin-right:auto;
padding-bottom:5px;
background:yellow;}
 
#banner-top .message{
/*background-color:#fff;*/
padding-top:10px;
padding-bottom:5px;}
 
#banner-top .close{position:absolute;
top:10px;
right:10px;
font-size:11px;}
 
#banner-top .close a{
color:#808080;
text-decoration:none;}
 
</style>
</head>
<body>
<div> PRUEBA ARRIBA</div>
<div id="banner-top">
    <div class="message">
        <p><strong>Noticia: <a href="#">conocelos en el blog oficial</a> y sigue las <a href="#">reacciones en Twitter</a></strong></p>
        <div class="close"><a title="Cerrar Mensaje" href="#">Cerrar <img alt="Cerrar mensaje" src="close.png"/></a></div>
    </div>
</div>
<div> PRUEBA ABAJO </div>
<a href="#" onclick="oculta()">Ocultar logo</a>
<a href="#" onclick="muestra()">Muestrar logo</a>
</body>
</html>

Muchas gracias de antemano!

zerokilled · #2 (**permalink**) 16/11/2009, 16:54

sin mirar mucho el codigo, ya me imaginaba que estarias usando el estilo visibility. visibility solo hace eso, controlar la visibilidad de un elemento, ocultar o mostrar. pero este no cambia el modo de renderizacion. para ello tienes que usar display en lugar visibility. asignando el valor display: none oculta el elemento más "elimina" el contenido del flujo. es decir, el resto del contenido que le rodea se acomodan segun el espacio liberado por el elemento oculto con display:none.

neodani · #3 (**permalink**) 16/11/2009, 17:09

Cita:

Iniciado por zerokilled

sin mirar mucho el codigo, ya me imaginaba que estarias usando el estilo visibility. visibility solo hace eso, controlar la visibilidad de un elemento, ocultar o mostrar. pero este no cambia el modo de renderizacion. para ello tienes que usar display en lugar visibility. asignando el valor display: none oculta el elemento más "elimina" el contenido del flujo. es decir, el resto del contenido que le rodea se acomodan segun el espacio liberado por el elemento oculto con display:none.

Muchas gracias zerokilled, tenías razón estaba usando la propiedad equivocada :)

Código javascript:

Ver original<script LANGUAGE="javascript">
function oculta(){
 document.getElementById('banner-top').style.display = "none";
}
function muestra(){
 document.getElementById('banner-top').style.display = "block";
}
</script>