Problema con position absolute

jufena84 · #1 (**permalink**) 13/05/2010, 09:37

Bueno lo que quiero es saber como hacer para que mi div con position absolute no se me mueva donde está segun la resolucion de la pantalla, trate de hacerlo con position relative y bien pero me hace crecer la capa donde esta metida y no me sirve por lo tanto necesito el absoluto, de antemano muchas gracias!

BloodShadow · #2 (**permalink**) 13/05/2010, 09:53

Deberias poner codigo o imagenes para saver exactamente cual es tu problema, xq adivinando no llegaras a conseguir ninguna ayuda

jufena84 · #3 (**permalink**) 13/05/2010, 10:06

este es el codigo

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>:: Bienvenido a Didascalia ::</title>

<!-- Estilos importados -->
<link rel="STYLESHEET" type="text/css" href="Estilos.css">
<!-- Final de sección Estilos importados -->
<script>
function Pruebas(nombre){
    setTimeout("Tiempo()",500);
	//alert("hola juacho");
}
function Regresar(){
	document.getElementById('tales').innerHTML="";
	document.getElementById('CajaContenedora').style.display="none";
	//alert("hola juacho");
}
function Tiempo(){
	document.getElementById('tales').innerHTML="Hola que tal";
	document.getElementById('CajaContenedora').style.display="block";
}
</script>
</head>
<body bgcolor="#ffffff" scroll="no">

<!--Capa principal -->
<div align="center" style="position: absolute; width:100%; height:100%;">
          <!--URL utilizadas en la película-->
          <!--Texto utilizado en la película-->
          <!-- saved from url=(0013)about:internet -->
     <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="100%" id="index_didascalia" align="middle">
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="movie" value="index_didascalia.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#ffffff" />
            <embed src="index_didascalia.swf" quality="high" bgcolor="#ffffff" width="100%" height="100%" name="index_didascalia" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
          </object>
          
      
</div>

      <!--Capa del medio "Contenedora" -->  
          <div  class="CajaMedio" id="CajaContenedora">
              <h1 id="tales">dsdaas</h1>
          </div>

</body>
</html>

caja medio :

Código HTML:

.CajaMedio{
	position:absolute;
	width:620px;
	height:550px;
	background-color:#000;
	/*margin-top:-575px;
	margin-left: -280px;*/
	left:32%;/*530px;*/
	top:31%;
	color:#000;
	display:none;
	z-index:10;
	outline-style:none;
}

La animacion flash saca un cuadro blanco en el medio yo pongo el div encima de ese cuadro blanco pero cuando cambio de resolucion el cuadro aparece en otra parte!

jufena84 · #4 (**permalink**) 13/05/2010, 11:55

Bueno ya encontre la solución para quienes no sepan, como saben el position absolute tiene un left y un top el left se mueve desde la parte superior izquierda de su contenedor, por tanto lo meti dentro del div de la animacion, ya queda sujeto a este.

BloodShadow · #5 (**permalink**) 13/05/2010, 12:07

La forma correcta de usar el position: absolute; es metiendolo dentro de un contenedor con position: relative; ejemplo

Código HTML:

<div style="postition: relative; ">

<div style="position: absolute; top/right/left/bottom: xxxpx;">
ABSOLUTE 1
</div>
<div style="position: absolute; top/right/left/bottom: xxxpx;">
ABSOLUTE 2
</div>
</div>