Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/09/2010, 13:18
Avatar de Shaito
Shaito
 
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 13 años, 7 meses
Puntos: 37
Información Div de top a bottom

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
  1. .top{
  2.     background-image:url(top.png);
  3.     height:271px;
  4.     width:651px;
  5.     z-index:999999;
  6.     position:absolute;
  7.     top:0px;
  8. }
  9.  
  10. .bottom{
  11.     background-image:url(bottom.png);
  12.     background-position:bottom;
  13.     width:651px;
  14.     height:511px;
  15.     margin-bottom:0px;
  16.     position:absolute;
  17.     bottom:0px;
  18.     z-index:1px;
  19. }
  20. .center{
  21.     width:651px;
  22.     margin: auto;
  23.     height:100%;
  24.     z-index:2px;
  25.     background-image:url(fondo2.png);
  26.     background-repeat:repeat-y;
  27. }

Y el HTML
Código HTML:
Ver original
  1. <div class="center">
  2. <div class="top"></div>
  3. <div class="bottom"><img src="fondo2.png" style="width:100%"/></div>
  4. </div>


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

Espero me puedan ayudar!