Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Reducir espacio de más al ocultar un div con el siguiente código en el foro de CSS en Foros del Web. Tengo este código, de ejemplo: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Css: Ver original <body > <input type = "button" value = "Ver"  onClick = "document.getElementById('oculto').style.visibility='visible'" > <br ...
  #1 (permalink)  
Antiguo 26/08/2010, 06:34
Avatar de MarioAlejandroCR2  
Fecha de Ingreso: mayo-2010
Ubicación: Esparza - Puntarenas
Mensajes: 98
Antigüedad: 7 años, 6 meses
Puntos: 2
Pregunta Reducir espacio de más al ocultar un div con el siguiente código

Tengo este código, de ejemplo:

Código Css:
Ver original
  1. <body>
  2. <input type="button" value="Ver"
  3.  onClick="document.getElementById('oculto').style.visibility='visible'">
  4. <br>Este texto se ve siempre
  5. <div id="oculto" style="visibility:hidden">
  6. Este texto se verá cuando yo quiera
  7. </div>
  8. </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
  1. <div class="divadd"><!--Div que contiene las entradas de inicio-->
  2.           <h1><?php echo $row_regis['titulo']?></h1>
  3.           </b>
  4.           <hr color="#DDDDDD">
  5.           <?php echo $row_regis['contenido']?><br />
  6.           <hr color="#DDDDDD">
  7.           <b>Autor:</b> <?php echo $row_regis['autor']?><br>
  8.           <b>Creado el:</b> <?php echo $row_regis['fecha']?> <b>a las</b> <?php echo $row_regis['hora']?><br>
  9.           <b>Categoría:</b> <?php echo $row_regis['tag']?><br>
  10.           <p></p>
  11.           <input type="button" value="Modificar Noticia" class="white"
  12. onClick="document.getElementById('oculto').style.visibility='visible'">
  13.           <div id="oculto" style="visibility:hidden" class="divadd">
  14.             <hr />
  15.             <h3>Modificar Noticia</h3>
  16.             <?php
  17. echo "<form method='post' name='formita' onsubmit='return checkdata(this)'>";
  18.   echo "<div>ID Noticia:</div>";
  19.   echo "<div><input name='idnoticia' value='".$row_regis['idnoticia']."' type='text' size='80' maxlength='9' /></div>
  20.   <div>Título:</div>
  21.   <div><input name='titulo' value='".$row_regis['titulo']."' type='text' size='80' maxlength='75' /></div>
  22.   <div>Contenido:</div>
  23.   <div><textarea name='contenido' type='text' style='width:500px; height:500px;'>".$row_regis['contenido']."</textarea></div>
  24.   <div>Autor:</div>
  25.   <div><input name='autor' value='".$row_regis['autor']."' type='text' size='80' maxlength='50' /></div>
  26.   <div>Fecha:</div>
  27.   <div><input name='fecha' value='".$row_regis['fecha']."' type='text' size='80'/></div>
  28.   <div>Hora:</div>
  29.   <div><input name='hora' value='".$row_regis['hora']."' type='text' size='80'/></div>
  30.   <div>Categoría:</div>
  31.   <div><input name='tag' value='".$row_regis['tag']."' type='text' size='80' maxlength='15' /></div>
  32.   <br />";
  33.        
  34. echo "<div><input name='enviar' type='submit' value='Modificar noticia' class='white'/></div>
  35. <input type='hidden' name='OC_insertar' value='formitamod'>
  36. </form>";
  37. ?>
  38.             <br/>
  39.             <input type="button" value="Ocultar Editor" class="white"
  40. onClick="document.getElementById('oculto').style.visibility='hidden'">
  41.           </div>
  42.           <p></p>
  43.         </div>
  44.         <!--Cierra add-->
  #2 (permalink)  
Antiguo 26/08/2010, 06:51
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Reducir espacio de más al ocultar un div con el siguiente código

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

Atentamente
  #3 (permalink)  
Antiguo 26/08/2010, 13:15
Avatar de MarioAlejandroCR2  
Fecha de Ingreso: mayo-2010
Ubicación: Esparza - Puntarenas
Mensajes: 98
Antigüedad: 7 años, 6 meses
Puntos: 2
Respuesta: Reducir espacio de más al ocultar un div con el siguiente código

Disculpe pero no entendi, son metodos diferentes?
  #4 (permalink)  
Antiguo 26/08/2010, 13:26
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Reducir espacio de más al ocultar un div con el siguiente código

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
  #5 (permalink)  
Antiguo 26/08/2010, 15:03
 
Fecha de Ingreso: agosto-2008
Mensajes: 49
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Reducir espacio de más al ocultar un div con el siguiente código

Cita:
Iniciado por MarioAlejandroCR2 Ver Mensaje
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.

Etiquetas: espacio, reducir, siguiente
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:11.