Posicion de Div (facilito)

pcarvajal · #1 (**permalink**) 27/08/2009, 07:42

La idea es que cuando haga click el div que está oculto aparezca en el lugar en que está el div visible, pero me aparece abajo :S
Se que es un problema de posicionamiento, pero no estoy muy claro como se puede arreglar.

Creo que viendo el código es más fácil entenderlo:

Código PHP:

  <html> 
<head> 
<script type="text/javascript"> 
function miFuncion() { 
    document.getElementById('t1').style.visibility="hidden";             
    document.getElementById('t2').style.visibility="hidden";         
    document.getElementById('t3').style.visibility="visible"; 
}     
</script> 
</head> 
<body> 
<table cellspacing="0" cellpadding="0" border="1"> 
<tr> 
    <td><div id="t1" style="position:relative;"><a href="javascript:void(0);" onclick="miFuncion()">Ocultame!</a></div></td> 
</tr> 
<tr> 
    <td><div id="t2" style="visibility:visible;position:relative;">texto visible</div><div id="t3" style="visibility:hidden;position:relative;">texto oculto</div></td> 
</tr> 
</table>             
</body> 
</html>

kseso? · #2 (**permalink**) 27/08/2009, 07:49

Hola pccarvajal
¿abajo significa en la vertical (eje y de la pantalla) o tapado por (en el eje z, est es, de mis ojos a la pantalla)?

¿Recuerdas que con la propiedad visibility puedes ocultar un elemento pero para los demás elementos sigue estando ahí ocupando el espacio que le corresponde?
Si es ese el problema, utiliza 'display', hidden para ocultarlo y que no influya sobre el resto y "block o inline o cualquiera de los posibles valores para mostrarlo.

Y si te referías al eje z, utiliza la propiedad 'z-index'.

Un saludo

pcarvajal · #3 (**permalink**) 27/08/2009, 07:58

Creo que más bien me refiero a su posición horizontal. Para serte sincero, estoy un tanto confundido. Pero con "monitos" es más fácil entender. Gráficamente sería algo asi:

<td>
XXXXXXXXXXXXXXXXXXXXX <-- t2, visible
YYYYYYYYYYYYYYYYYYYYYYYY <-- t3, oculto
</td>

cuando hago click en "Ocultame!", desaparecen las XXXXXXXXX y que da así

<td>

YYYYYYYYYYYYYYYYYYYYYYYY
</td>

en vez de haber quedado asi:

<td>
YYYYYYYYYYYYYYYYYYYYYYYY
</td>

kseso? · #4 (**permalink**) 27/08/2009, 08:12

Pues como te decía, se debe a que utilizas la propiedad "visibility" para ocultarlo. Cambia a "display: none".
Más info sobre esas dos propiedades y sus diferencias:
visibility:
hidden: La caja es invisible (totalmente transparente), pero sigue afectando la composición. Invisible para el ojo, pero para los demás elementos de la página sigue estando en su lugar.
Display:
hidden: el elemento "desaparece" de la vista y de la página. Ni el ojo la ve ni los otros elementos, así que su lugar es ocupado.

Espero haber sido más claro ahora.

Un saludo

pcarvajal · #5 (**permalink**) 27/08/2009, 08:20

Excelente! Muchas gracias!

Cita:

<html>
<head>
<script type="text/javascript">
function miFuncion() {
document.getElementById('t1').style.visibility="hi dden";
document.getElementById('t2').style.display="none" ;
document.getElementById('t3').style.display="inlin e";
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="1">
<tr>
<td width="100%"> </td>
<td><div id="t1"><a href="javascript:void(0);" onclick="miFuncion()">Ocultame!</a></div></td>
</tr>
<tr>
<td colspan="2"><div id="t2" style="display:block;">texto visible</div><div id="t3" style="display:none;">texto oculto</div></td>
</tr>
</table>
</body>
</html>

Lo que más me llamó la atención es que no tuve necesidad de usar los position:"algo", que fué lo que más me gustó. De hecho el script funciona en IE y en FF

Saludos!