Foros del Web » Creando para Internet » HTML »

Superponer capas

Estas en el tema de Superponer capas en el foro de HTML en Foros del Web. Hola a todos. Quiero colocar varias capas en un <td>. Para que esas capas se muevan cuando se mueva la tabla debo establecerlas con position:relative. ...
  #1 (permalink)  
Antiguo 30/12/2009, 06:06
 
Fecha de Ingreso: abril-2009
Mensajes: 5
Antigüedad: 8 años, 7 meses
Puntos: 0
Superponer capas

Hola a todos.
Quiero colocar varias capas en un <td>. Para que esas capas se muevan cuando se mueva la tabla debo establecerlas con position:relative.
Mi problema es que al alternar con javascript la visibilidad de las capas no aparecen en el mismo sitio sino que aparece una debajo de la otra.
No sé si me he explicado bien, dejo un código de ejemplo con el problema.
Gracias de antemano y un saludo.

Código HTML:
Ver original
  1.     <head>
  2.         <title>
  3.             P&aacute;gina con dos capas.
  4.         </title>
  5.         <script type="text/javascript" language="javascript">
  6.             function noOcultar(nombreCapa){
  7.                 var capa=document.getElementById(nombreCapa);
  8.                 capa.style.visibility="visible";
  9.                 var capas=document.getElementsByTagName("div");
  10.                 for(var i=0;i<capas.length;i++){
  11.                    if(capas[i].id!=nombreCapa){
  12.                        capas[i].style.visibility="hidden";
  13.                    }
  14.                 }  
  15.             }
  16.         </script>
  17.     </head>
  18.     <!-- Poner dos capas dentro de un td e intentar que se vean en el mismo sitio
  19.     cuando se alterna la visibilidad de las dos -->
  20.     <body>
  21.         <center>
  22.         <br><br>
  23.         <button type="button" onclick="noOcultar('capa2');">Ver capa amarilla</button>
  24.         &nbsp;&nbsp;
  25.         <button type="button" onclick="noOcultar('capa1');">Ver capa azul</button>
  26.         <br><br>
  27.         <table border="1">
  28.             <tr>
  29.                 <td width="250px" height="250px">&nbsp;</td>
  30.                 <td width="250px" height="250px">&nbsp;</td>
  31.             </tr>
  32.             <tr>
  33.                 <td width="250px" height="250px" align="center">
  34.                     <div id="capa1" style="background-color:blue;position:relative;
  35.                     left:10px;top:10px;width:200px;height:200px;visibility:visible;border:solid"/>
  36.                     </div>
  37.                     <div id="capa2" style="background-color:yellow;position:relative;
  38.                     left:10px;top:10px;width:200px;height:200px;visibility:hidden;border:solid"/>
  39.                     </div>
  40.                 </td>
  41.                 <td width="250px" height="250px">&nbsp;</td>
  42.             </tr>
  43.         </table>
  44.         </center>
  45.     </body>
  46. </html>
  #2 (permalink)  
Antiguo 30/12/2009, 06:43
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Superponer capas

en vez del atributo visibility prueba con el dosplay.

http://css.hazunaweb.com/215.php
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 30/12/2009, 13:14
 
Fecha de Ingreso: abril-2009
Mensajes: 5
Antigüedad: 8 años, 7 meses
Puntos: 0
De acuerdo Solucionado

Gracias hades.

Solucionado cambiando visibility por display.

Un saludo
  #4 (permalink)  
Antiguo 30/12/2009, 13:21
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Superponer capas

De nada, me alegro que te haya servido.

Ten en cuenta que con visibility se oculta pero sigue ocupando espacio, don display se oculta y no ocupa espacio.
__________________
No diseñes usando tablas.
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 21:09.