Ajustar capa dentro del body

javiercitox · #1 (**permalink**) 28/12/2009, 07:40

Ufff... he leido bastante y no logro dar con esto.

tengo una capa oculta dentro del body que al presionar un boton llamo a una función js que le cambia la propiedad visibility para que se logre ver, hasta aquí cero problema, el problema es que esta capa tiene una imagen de fondo y posee las propiedades de alto y ancho al 100% y al hacer visible esta capa la imagen solo cubre parte de la pantalla, no completa como quiero que lo haga.

Código CSS:

Ver original#capaFondo1 {
    visibility:hidden;
    position: absolute;
    padding:0px;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
    background-image:url(../images/fondotransparente.gif);
    background-repeat: repeat;
    width: 100%;
    height: 100%;   
    z-index:2;
}
 
html, body {
    margin-left: 0px;
    margin-top: 0px;
    z-index:1;
    width:100%;
    height:100%;
    background-color: #ffffff;
    color: #000000;
}

como logro ajustar la capa a todo el contenido del body????

C2am · #2 (**permalink**) 28/12/2009, 08:11

Hola
¿La capa oculta dentro que capa está? porque será el 100% del contenedor, se me hace que por ahi está el problema.
Saludos y muestra el html para ver como está estructurado el html.

javiercitox · #3 (**permalink**) 28/12/2009, 09:18

Código HTML:

Ver original<html>
<head>
<title>Mi Titulo de Pagina</title>
<link href="../css/estilos.css" rel="stylesheet" type="text/css">
 
<script>
function abrirVentana(pLinea)
    {
    window.open('Ventana_Seleccionar_ut.php?linea='+pLinea, '', 'width=330,height=252,scrollbars=NO,statusbar=NO,left=500,top=250');
    document.getElementById("capaFondo1").style.visibility="visible";
    }
</script>
 
</head>
<body>
<div id="capaFondo1"> </div>
 
  <p>Aqui va todo el contenido de la página y más abajo el boton que abre otra ventana 
    y hace aparecer y desaparecer la capa de fondo. </p>
    
<p>
<input type="button" name="Buscar" value="Buscar" onClick="abrirVentana(0);">
</p>
 
</body>
</html>

Eso es lo que tengo en la página...

javiercitox · #4 (**permalink**) 29/12/2009, 05:07

aun no logro resolverlo :(

Impostor · #5 (**permalink**) 29/12/2009, 05:23

Hola, tengo gran desconocimiento de javascript, pero esto no me cuadra

function abrirVentana(pLinea)
{

window.open('Ventana_Seleccionar_ut.php?linea='+pL inea, '', 'width=330,height=252,scrollbars=NO,statusbar=NO,left=500,top=250');
document.getElementById("capaFondo1").style.visibi lity="visible";
}

¿Es posible que ese atributo sea el de la ventana que se abre?

Saludos¡¡

javiercitox · #6 (**permalink**) 29/12/2009, 06:59

No, corresponde a la ventana padre. El evento getElementById busca dentro de la página el elemento que contenga el Id indicado, en este caso el div llamado "capaFondo1". Además cuando abro la otra página esta capa aparece en la ventana padre como yo quiero, pero el problema es que la capa no aparece en toda la página, solo en una área. Para graficar mejor unas imagenes.

Aqui muestro cuando presiono el boton, que se abre la ventana y se hace visible la capa (la imagen amarilla que se ve), se aprecia que sale una parte.

[URL="http://s4.subirimagenes.com/otros/previo/thump_3794607untitled-3.jpg"]Ver[/URL]

Si subo arriba aparece el "100%" de la imagen, pero necesito que aparesca ese 100 más lo de abajo que no aparece.

[URL="http://s4.subirimagenes.com/otros/previo/thump_3794625untitled-2.jpg"]Ver[/URL]

Impostor · #7 (**permalink**) 29/12/2009, 07:09

Pues no lo tengo claro entonces. Prueba a quitar la position: absolute; ya que si quieres ocupar el 100% de la pantalla carece de sentido. Si persiste pon el enlace a tu web para que podamos trastearla y orientarte mejor.

Saludos¡¡

javiercitox · #8 (**permalink**) 05/01/2010, 05:34

He quitado la position: absolute y aparece la capa, pero al final de la página.
Lo que se me ha estado ocurriendo es calcular de alguna manera el largo de la página, ya que no siempre mide lo mismo, y pasar ese valor como parámetro para una función que cambie las propiedades de la capaFondo1, algo como

Código Javascript:

Ver originaldocument.getElementById("capaFondo1").style.width=miValorParametro1;
document.getElementById("capaFondo1").style. height =miValorParametro2;