Reducir espacio de más al ocultar un div con el siguiente código

MarioAlejandroCR2 · #1 (**permalink**) 26/08/2010, 05:34

Tengo este código, de ejemplo:

Código Css:

Ver original<body>
<input type="button" value="Ver"
 onClick="document.getElementById('oculto').style.visibility='visible'">
<br>Este texto se ve siempre
<div id="oculto" style="visibility:hidden">
Este texto se verá cuando yo quiera
</div>
</body>

Pero cuando el div esta oculto, me carga el tamaño de todo lo que en verdad ocupa, cáundo lo que deseo es que si presiono muestre la info y al ocultar se reduzca de tamaño, capturas por si no me explico:

Ver Imagen: oculto1pq46ix.jpg

Link:http://www.imaxenes.com/imagen/oculto1pq46ix.jpg.html

Deseo que ese espacio gris enorme que en fondo contiene la info oculta se reduzca hasta el botoón que dice "Modificar noticia", si no no tiene tanto sentido, de antemano gracias.

El código original:

Código Varios:

Ver original<div class="divadd"><!--Div que contiene las entradas de inicio-->
          <h1><?php echo $row_regis['titulo']?></h1>
          </b>
          <hr color="#DDDDDD">
          <?php echo $row_regis['contenido']?><br />
          <hr color="#DDDDDD">
          <b>Autor:</b> <?php echo $row_regis['autor']?><br>
          <b>Creado el:</b> <?php echo $row_regis['fecha']?> <b>a las</b> <?php echo $row_regis['hora']?><br>
          <b>Categoría:</b> <?php echo $row_regis['tag']?><br>
          <p></p>
          <input type="button" value="Modificar Noticia" class="white"
onClick="document.getElementById('oculto').style.visibility='visible'">
          <div id="oculto" style="visibility:hidden" class="divadd">
            <hr />
            <h3>Modificar Noticia</h3>
            <?php
echo "<form method='post' name='formita' onsubmit='return checkdata(this)'>";
  echo "<div>ID Noticia:</div>";
  echo "<div><input name='idnoticia' value='".$row_regis['idnoticia']."' type='text' size='80' maxlength='9' /></div>
  <div>Título:</div>
  <div><input name='titulo' value='".$row_regis['titulo']."' type='text' size='80' maxlength='75' /></div>
  <div>Contenido:</div>
  <div><textarea name='contenido' type='text' style='width:500px; height:500px;'>".$row_regis['contenido']."</textarea></div>
  <div>Autor:</div>
  <div><input name='autor' value='".$row_regis['autor']."' type='text' size='80' maxlength='50' /></div>
  <div>Fecha:</div>
  <div><input name='fecha' value='".$row_regis['fecha']."' type='text' size='80'/></div>
  <div>Hora:</div>
  <div><input name='hora' value='".$row_regis['hora']."' type='text' size='80'/></div>
  <div>Categoría:</div>
  <div><input name='tag' value='".$row_regis['tag']."' type='text' size='80' maxlength='15' /></div>
  <br />";
       
echo "<div><input name='enviar' type='submit' value='Modificar noticia' class='white'/></div>
<input type='hidden' name='OC_insertar' value='formitamod'>
</form>";
?>
            <br/>
            <input type="button" value="Ocultar Editor" class="white"
onClick="document.getElementById('oculto').style.visibility='hidden'">
          </div>
          <p></p>
        </div>
        <!--Cierra add-->

kseso? · #2 (**permalink**) 26/08/2010, 05:51

Investigue las diferencias entre /visibility:hidden/ y /display:none/ y evite sembrar de estilos el cuerpo del html

Atentamente

MarioAlejandroCR2 · #3 (**permalink**) 26/08/2010, 12:15

Disculpe pero no entendi, son metodos diferentes?

kseso? · #4 (**permalink**) 26/08/2010, 12:26

Acá lo explican mucho mejor de o que yo lo haría:
http://www.sidar.org/recur/desdi/tra...def-visibility
http://www.sidar.org/recur/desdi/tra...ropdef-display

Y son propiedades de css y sus valores.

Si después de leerlo tiene alguna duda, no dude en plantearla.

Atentamente

Caquilla23 · #5 (**permalink**) 26/08/2010, 14:03

Cita:

Iniciado por MarioAlejandroCR2

Disculpe pero no entendi, son metodos diferentes?

Con visibility el elemento se hace invisible pero sigue estando ahí. Por lo tanto aparece un espacio en blanco.

Con display el elemento no se tiene en cuenta, como si no existiera.

Un saludo.