Foros del Web » Creando para Internet » CSS »

Div de top a bottom

Estas en el tema de Div de top a bottom en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 16/09/2010, 14:18
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 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!
  #2 (permalink)  
Antiguo 16/09/2010, 17:02
Avatar de matius  
Fecha de Ingreso: julio-2005
Ubicación: Mexico, D.F.
Mensajes: 554
Antigüedad: 12 años, 4 meses
Puntos: 2
Busqueda Respuesta: Div de top a bottom

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.
  #3 (permalink)  
Antiguo 17/09/2010, 12:05
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: Div de top a bottom

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

Etiquetas: bottom, desde, extensa, largo, top
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:41.