Div de top a bottom

Shaito · #1 (**permalink**) 16/09/2010, 13:18

Hola a todos!

Pues estoy creando una web, que, de principio a fin, siendo cual sea la resolución la web quede anclada en el height, es decir, que se extienda desde top a bottom.

La cosa es que ya lo tengo perfecto, solo tengo un problema, para hacerlo usé tres divs, uno para el head (top), uno para el bottom, (bottom) y otro, que sería el centro (center), donde el fondo se repite para que no se note que son divs diferentes.

En head y bottom usé un position:absolute, y dependiendo de cada uno top:0 o bottom:0

El problema, es que a pesar de que center contiene a los dos divs, al estar en position:absolute, realmente no los contiene y por ello no repite el fondo, que es lo que me interesa.

Les dejo el code en CSS y el HTML de la parte en cuestión:

CSS:

Código CSS:

Ver original.top{
    background-image:url(top.png);
    height:271px;
    width:651px;
    z-index:999999;
    position:absolute;
    top:0px;
}
 
.bottom{
    background-image:url(bottom.png);
    background-position:bottom;
    width:651px;
    height:511px;
    margin-bottom:0px;
    position:absolute;
    bottom:0px;
    z-index:1px;
}
.center{
    width:651px;
    margin: auto;
    height:100%;
    z-index:2px;
    background-image:url(fondo2.png);
    background-repeat:repeat-y;
}

Y el HTML

Código HTML:

Ver original<div class="center">
<div class="top"></div>
<div class="bottom"><img src="fondo2.png" style="width:100%"/></div>
</div>

Las imágenes nombradas en el CSS:
http://xooup.zxq.net/files/66e08a_imagenes.rar

Espero me puedan ayudar!

matius · #2 (**permalink**) 16/09/2010, 16:02

Aqui ta'

Solo necesitas definir el height en porcentajes en html y body

Código HTML:

<html>
<head>
<style type="text/css">

.top{

    background-image:url(top.png);

    height:271px;

    width:651px;

    z-index:999999;

    position:absolute;

    top:0px;
	

}

 

.bottom{
	background-image:url(bottom.png);
	background-position:bottom;
	width:651px;
	height:311px;
	margin-bottom:0px;
	position:absolute;
	bottom:0px;
	z-index:1;
	
}


.center{ 

    width:651px;height:100%;
    margin: 0 auto; background:url(fondo2.png) center repeat-y;
    }

 html,body {
                 height:100%;

    }


</style>

</head>

<body>

<div class="center">
     <div class="top"></div>
     <div class="bottom"></div>
</div>

</body>
</html>

Por cierto

el z-index no se maneja en pixeles, al menos hasta donde yo sabía.

Shaito · #3 (**permalink**) 17/09/2010, 11:05

Muchas gracias!

Me funcionó de maravilla, y respecto a lo del z-index

Sin comentarios pero muchísimas gracias, no sabía como hacerlo, al poner height a la imagen se volvía loca y se desparramaba por la derecha asi como 3000px

Saludos