Foros del Web » Creando para Internet » CSS »

Posicion de Div (facilito)

Estas en el tema de Posicion de Div (facilito) en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/08/2009, 08:42
Avatar de pcarvajal  
Fecha de Ingreso: enero-2002
Mensajes: 686
Antigüedad: 15 años, 11 meses
Puntos: 8
Posicion de Div (facilito)

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> 
  #2 (permalink)  
Antiguo 27/08/2009, 08:49
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Posicion de Div (facilito)

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 27/08/2009, 08:58
Avatar de pcarvajal  
Fecha de Ingreso: enero-2002
Mensajes: 686
Antigüedad: 15 años, 11 meses
Puntos: 8
Respuesta: Posicion de Div (facilito)

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>
  #4 (permalink)  
Antiguo 27/08/2009, 09:12
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Posicion de Div (facilito)

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 27/08/2009, 09:20
Avatar de pcarvajal  
Fecha de Ingreso: enero-2002
Mensajes: 686
Antigüedad: 15 años, 11 meses
Puntos: 8
Respuesta: Posicion de Div (facilito)

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%">&nbsp;</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!
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 22:34.