Posicion relativa de un div anidado

agtc1976 · #1 (**permalink**) 30/05/2011, 02:35

Buenos Dias a todos!

Aqui vuelvo a plantearos lo que para mi es una especie de reto.

Os planteo. Estoy diseñando una pagina web para un amigo, y me ha planteado algo que no se hacer aun. He investigado e intentado varias opciones pero no doy con la tecla.

Os decribo el objetivo, es el siguiente: Conseguir un fondo de web que sea una imagen, de forma que quede digamos el width al 100%, o sea que se vea el ancho de la pagina al completo, aunque la ventana del explorador no esté maximizada. Esto SI LO HE CONSEGUIDO, con un codigo tal que asi:

Código:

<div id="caja0"><img src="las%20buenas/pagina%20inicio%20V33a.jpg" id="bg" style="z-index:-1;"/>

junto con:

Código:

#caja0 {
	position: relative;
	margin-left: 0;
	margin-top: 0;
	width: 100%;
	visibility: visible;
	height: 100%;
}

y:

Código:

</style>
<!--[if IE 8]> 
<style> 
html, body { 
background:none; 
height: 100%; 
margin: 0; 
padding: 0; 
} 
img#bg { 
position:fixed; 
top:0; 
left:0; 
width:100%; 
height:100%; 
} 
</style> 
<![endif]-->

Ahora viene el tomate: en esa pagina con fondo de imagen, y dentro del Div general que cubre todo el body, tengo un div anidado que contiene tres botones para acceder a las pagina de Facebook, Twitter y la empresa de mi amigo. Estos son los 2 problemas principales que se me presentan:

1) Dependiendo de la resolucion de la pantalla, estos botones se ven en su sitio o desplazados, pero lo que peor queda es que al tener el explorador maximizado bien, sin problemas, pero al reducir el tamaño de la ventana, los botones de acceso a las redes sociales mantienen su tamaño original, y se afea el resultado (se ve la web pequeña y los bootnes muy gordos en proporcion). Mi intencion es que al reducir el tamaño de la ventana del explorador se reduzca tambien el tamaño del div anidado.

2) En Mozilla Firefox (actualizado) se ve la pagina con un width del 100%, todo bien, pero el height sobrepasa el 100% de la pantalla por lo que el div anidado que contiene los botones esta mal situado, ademas de que un boton flash que tengo tb esta mal situado.

Os dejo el codigo completo para que podais ver mejor donde puede estar el error.

Codigo completo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>***************</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<style type="text/css"> 
#caja0 {
	position: relative;
	margin-left: 0;
	margin-top: 0;
	width: 100%;
	visibility: visible;
	height: 100%;
}
#caja1 {
	width: 250px;
	height: 35px;
	top: +93%;
	position: relative;
	left: 74px;
	visibility: visible;
	z-index: +1;
}
#art {
	width: 250px;
	height: 43px;
	top: +42%;
	position: relative;
	left: +70%;
}
</style>
<!--[if IE 8]> 
<style> 
html, body { 
background:none; 
height: 100%; 
margin: 0; 
padding: 0; 
} 
img#bg { 
position:fixed; 
top:0; 
left:0; 
width:100%; 
height:100%; 
} 
</style> 
<![endif]-->
<body leftmargin="0" topmargin="0" height="100%" bgproperties="fixed" />
<div id="caja0"><img src="las%20buenas/pagina%20inicio%20V33a.jpg" id="bg" style="z-index:-1;"/>
<div id="caja1">
<a href="http://www.facebook.com" target="_blank"><img src="las buenas/facebook.png" width="80" height="30" border="0" /></a>
<a href="http://www.myspace.com/dsilvatattoo" target="_blank"><img src="las buenas/myspace.png" width="80" height="30" border="0" /></a>
<a href="http://www.************.es" target="_blank"><img src="las buenas/********.png" width="80" height="30" border="0" /></a>
</div>
<div id="art">
  <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="240" height="43">
    <param name="movie" value="botonart3.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <param name="swfversion" value="6.0.65.0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="botonart3.swf" width="240" height="43">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="transparent" />
      <param name="swfversion" value="6.0.65.0" />
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>
</div>
</div>
<embed src="**********.mp3" width="0" height="0" autostart="true" loop="2"></embed>
<script type="text/javascript"> 
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</div>
</body>
</html>

Saludos!!!

Y un millon de gracias por adelantado!!