Hola, qué tal?
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.
<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 id="game_div_icon" class="left"><img id="game_div_icon_img" src="file:///C|/red_less.png" width="16" height="16" align="bottom" /></div>
<div id="game_div_text" class="right"> Call of Duty: Modern Warfare 2 Multiplayer</div>
</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 id="mapinfo_div"></div>
</div>
<div id="info_bar"></div>
<div id="jugadores"><h2>Datos aca!</h2></div>
<div id="status2" align="center" style="padding-top:5px"></div>
</div>
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';
}
}
}
#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.
Saludos, Sancho.Mazorka! :¬¬
2 días peleando con ésto, abro un thread para ver si alguién me puede ayudar...y encuentro la solución yo solo.
<div id="game_div_container" style="width: 100%"> <!-- DIV CONTENEDOR -->
Solo había que forzar el ancho del div.
Saludos, Sancho.Mazorka :¬¬