Discussion:
[html] 2 div en la misma posición
(demasiado antiguo para responder)
adobe
2009-03-03 18:03:50 UTC
Permalink
Como puedo hacer que 2 divs en posición relativa aparezcan en la misma
posición? Estoy haciendo en dreamweaver aparecer y desaparecer 2 divs pero
el de debajo me queda desplazado cuando lo hago aparecer...
Juan Muro
2009-03-04 08:04:36 UTC
Permalink
Hola adobe:
¡Qué casualidad, te llamas como la casa desarrolladora de software y como
los ladrillos del cortijo de mi abuelo, je, je.
¿Qué código usas?.
Se supone que algo así debería funcionar:
div#uno { width:700px; position:absolute; margin-top:50px;}
div#dos { width:700px; position:absolute; margin-top:50px;}
<div id="uno">Contenido del div uno</div>
<div id="dos">Contenido del div dos</div>
Salu2
`8¬]
Juan Muro
Post by adobe
Como puedo hacer que 2 divs en posición relativa aparezcan en la misma
posición? Estoy haciendo en dreamweaver aparecer y desaparecer 2 divs pero
el de debajo me queda desplazado cuando lo hago aparecer...
adobe
2009-03-04 09:20:00 UTC
Permalink
Coño soy markus... he reinstalado el sistema operativo pero no he cambiado
mi nombre aki jajajjaa...
El código que uso es de un div en posición relativa no absoluta... ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
.gg {
display: block;
visibility: hidden;
}
.tt {
display:block;
visibility: hidden;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById &&
((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style;
v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<p>
<label>
<input name="radio" type="radio" id="a"
onclick="MM_showHideLayers('f1','','show','f2','','hide')" value="a" />
</label>
<label>
<input name="radio" type="radio" id="a"
onclick="MM_showHideLayers('f1','','hide','f2','','show')" value="b" />
</label>
</p>
<div id="f1" class="gg">Colocar aquí el contenido para id "f1"</div>
<div id="f2" class="tt">Colocar aquí el contenido para id "f2"</div>
<p>&nbsp;</p>
</form>
</body>
</html>
Post by Juan Muro
¡Qué casualidad, te llamas como la casa desarrolladora de software y como
los ladrillos del cortijo de mi abuelo, je, je.
¿Qué código usas?.
div#uno { width:700px; position:absolute; margin-top:50px;}
div#dos { width:700px; position:absolute; margin-top:50px;}
<div id="uno">Contenido del div uno</div>
<div id="dos">Contenido del div dos</div>
Salu2
`8¬]
Juan Muro
Post by adobe
Como puedo hacer que 2 divs en posición relativa aparezcan en la misma
posición? Estoy haciendo en dreamweaver aparecer y desaparecer 2 divs
pero el de debajo me queda desplazado cuando lo hago aparecer...
Andres Cayon
2009-03-05 11:11:37 UTC
Permalink
Aunque sea una posición relativa, Juan por buen camino: A ver qué te parece
esto:
El truco es sencillo, colocamos un div contenedor con posición relativa sin
definir top ni left, por lo que se quedará en el lugar que ocupa por
defecto.

Dentro del contenedor, añadimos tus dos divs y a estos sí les asignamos
posición absoluta (0,0 para left y top). Como estos valores toman como
coordenadas de origen las del contenedor, quedan clavados:

/*contenedor de los divs*/
#miDiv{position:relative;}
/*evitamos ser redundantes*/
.gg, .tt{
position:absolute;
left:0;
top:0;
display: block;
visibility: hidden;
display:block;
visibility: hidden;
}

Y en el html solo queda envolverlos con el contenedor:
<div id="miDiv">
<div id="f1" class="gg">Colocar aquí el contenido para id "f1"</div>
<div id="f2" class="tt">Colocar aquí el contenido para id "f2"</div>
</div>

Para desplazarlos, sólo tienes que darle coordenadas al contenedor, ya que
los divs de dentro se mueven con él.

Saludos!
Andres Cayon
Spain Adobe Dreamweaver User Group
http://www.dwug.es
----------------------
Post by adobe
Coño soy markus... he reinstalado el sistema operativo pero no he cambiado
mi nombre aki jajajjaa...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
.gg {
display: block;
visibility: hidden;
}
.tt {
display:block;
visibility: hidden;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById &&
((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style;
v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>
<label>
<input name="radio" type="radio" id="a"
onclick="MM_showHideLayers('f1','','show','f2','','hide')" value="a" />
</label>
<label>
<input name="radio" type="radio" id="a"
onclick="MM_showHideLayers('f1','','hide','f2','','show')" value="b" />
</label>
</p>
<div id="f1" class="gg">Colocar aquí el contenido para id "f1"</div>
<div id="f2" class="tt">Colocar aquí el contenido para id "f2"</div>
<p>&nbsp;</p>
</form>
</body>
</html>
Post by Juan Muro
¡Qué casualidad, te llamas como la casa desarrolladora de software y como
los ladrillos del cortijo de mi abuelo, je, je.
¿Qué código usas?.
div#uno { width:700px; position:absolute; margin-top:50px;}
div#dos { width:700px; position:absolute; margin-top:50px;}
<div id="uno">Contenido del div uno</div>
<div id="dos">Contenido del div dos</div>
Salu2
`8¬]
Juan Muro
Post by adobe
Como puedo hacer que 2 divs en posición relativa aparezcan en la misma
posición? Estoy haciendo en dreamweaver aparecer y desaparecer 2 divs
pero el de debajo me queda desplazado cuando lo hago aparecer...
markus
2009-03-06 16:25:03 UTC
Permalink
Gracias por la aportación... es una buena opción
Post by Andres Cayon
Aunque sea una posición relativa, Juan por buen camino: A ver qué te
El truco es sencillo, colocamos un div contenedor con posición relativa
sin definir top ni left, por lo que se quedará en el lugar que ocupa por
defecto.
Dentro del contenedor, añadimos tus dos divs y a estos sí les asignamos
posición absoluta (0,0 para left y top). Como estos valores toman como
/*contenedor de los divs*/
#miDiv{position:relative;}
/*evitamos ser redundantes*/
.gg, .tt{
position:absolute;
left:0;
top:0;
display: block;
visibility: hidden;
display:block;
visibility: hidden;
}
<div id="miDiv">
<div id="f1" class="gg">Colocar aquí el contenido para id "f1"</div>
<div id="f2" class="tt">Colocar aquí el contenido para id "f2"</div>
</div>
Para desplazarlos, sólo tienes que darle coordenadas al contenedor, ya que
los divs de dentro se mueven con él.
Saludos!
Andres Cayon
Spain Adobe Dreamweaver User Group
http://www.dwug.es
----------------------
Post by adobe
Coño soy markus... he reinstalado el sistema operativo pero no he
cambiado mi nombre aki jajajjaa...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
<!--
.gg {
display: block;
visibility: hidden;
}
.tt {
display:block;
visibility: hidden;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById &&
((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style;
v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>
<label>
<input name="radio" type="radio" id="a"
onclick="MM_showHideLayers('f1','','show','f2','','hide')" value="a" />
</label>
<label>
<input name="radio" type="radio" id="a"
onclick="MM_showHideLayers('f1','','hide','f2','','show')" value="b" />
</label>
</p>
<div id="f1" class="gg">Colocar aquí el contenido para id "f1"</div>
<div id="f2" class="tt">Colocar aquí el contenido para id "f2"</div>
<p>&nbsp;</p>
</form>
</body>
</html>
Post by Juan Muro
¡Qué casualidad, te llamas como la casa desarrolladora de software y
como los ladrillos del cortijo de mi abuelo, je, je.
¿Qué código usas?.
div#uno { width:700px; position:absolute; margin-top:50px;}
div#dos { width:700px; position:absolute; margin-top:50px;}
<div id="uno">Contenido del div uno</div>
<div id="dos">Contenido del div dos</div>
Salu2
`8¬]
Juan Muro
Post by adobe
Como puedo hacer que 2 divs en posición relativa aparezcan en la misma
posición? Estoy haciendo en dreamweaver aparecer y desaparecer 2 divs
pero el de debajo me queda desplazado cuando lo hago aparecer...
Loading...