Tema: Problemas con divs apilados
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/02/2011, 06:51
Oasis8
 
Fecha de Ingreso: septiembre-2010
Ubicación: Malaga
Mensajes: 47
Antigüedad: 14 años, 4 meses
Puntos: 1
Problemas con divs apilados
El problema que tengo es que si defino en css los div con display:none, despues no puedo cambiarlo de ningun modo. La soluciones que he encontrado es usar la propiedad visibility, o quitando el display del css y asignarle esa propiedad al inicio de la pagina con js.

¿ Alguna luz de porque cuando se pone el display:none en css, no hace caso cuando se intenta cambiar con js ?

Dejo aqui un exctracto de codigo deonde he aislado el problema
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.  
  6. <style>
  7.  
  8. #div1 {
  9.     z-index:1;
  10.     width:600px;
  11.     height:400px;
  12.     background:#fffcd1;
  13.     color:#444;
  14. }
  15.  
  16. #div2 {
  17.     position: absolute;
  18.     z-index:2;
  19.     top:50px;
  20.     left:50px;
  21.     width:400px;
  22.     height:200px;
  23. //  display:none; 
  24.     background:red;
  25.     color:#444;
  26. }
  27.  
  28. #div3 {
  29.     position: absolute;
  30.     z-index:3;  
  31.     top:100px;
  32.     left:100px; 
  33.     width:200px;
  34.     height:100px;
  35. //  display:none; 
  36.     background:blue;
  37.     color:#444;
  38. }
  39.  
  40. </style>
  41.  
  42. <script>
  43.  
  44. function cambia(id) {
  45.  
  46.   var fila = document.getElementById(id);
  47.   if (fila.style.display != "none") {
  48.     fila.style.display = "none"; //ocultar fila
  49.   } else {
  50.     fila.style.display = ""; //mostrar fila
  51.   }
  52.  
  53. }
  54.  
  55. function inicio() {
  56.  
  57.     document.getElementById("div2").style.display = "none";
  58.     document.getElementById("div3").style.display = "none";
  59.  
  60. }
  61.  
  62. </script>
  63.  
  64. </head>
  65.  
  66. <body onload="javascript:inicio()">
  67.  
  68. <div id='div1'>
  69. aaaaaaaa1111
  70. </div>
  71.  
  72. <div id='div2'>
  73. aaaaaaaa222222222
  74. </div>
  75.  
  76. <div id='div3'>
  77. aaaaaaaa3333333333
  78. </div>
  79.  
  80. <a href='javascript:cambia("div2")'>Mostras/ocultar el 2</a><br>
  81. <a href='javascript:cambia("div3")'>Mostras/ocultar el 3</a><br>
  82. </body>
  83. </html>