Estoy haciendo una web en javascript, y estoy maquetando con divs. Como hay información que tal véz el usuario no desea ver, incluí una función que oculte el div al clickearlo, y que lo muestre de vuelta al clickear otra vez la barra. El problema está en que cuando vuelvo a mostrar el div, la información de adentro pierde la alineacion y se va todo para la izquierda.
Código
<div id="game_div" class="yellowline" onclick="muestra_oculta(this.id);"> <!-- BARRA CON TITULO QUE OCULTA EL CONTENEDOR --> <div style="display: table; margin-left: auto; margin-right: auto;"> </div> </div> <div id="game_div_container"> <!-- DIV CONTENEDOR --> <div id="mapPreview"> <div id="preview_div"> <img src="img/nomap-en.png" alt="desconocido" name="mapname" width="240" height="135" longdesc="mapa desconocido" /> </div> </div> </div>
Código
function muestra_oculta(id){ if (document.getElementById){ var el = document.getElementById(id + "_container"); //se define la variable "el" igual a nuestro div if (el.style.display == 'none'){ el.style.display = 'table'; } else{ el.style.display = 'none'; } } }
Código
#preview_div{ text-align:center; position:relative; overflow:hidden; margin-top:5px; margin-bottom:2px; } #mapinfo_div{ color:#660000; text-align:center; font:Tahoma; font-weight:bold; font-size:12px; } #info_bar{ text-align:center; font:Tahoma; font-weight:bold; font-size:12px; } #mapPreview{ height:160px; }
Los DIVs que están vacios, se llenan automaticamente con información mediante AJAX. Acá no tiene relevancia eso, por ese motivo, omití el codigo.
Ahí está todo lo relacionado: HTML + JS + CSS.
Espero puedan ayudarme, muchas gracias desde ya.