Ajustar capa , a la parte inferior de la pagina

rock_ridder · #1 (**permalink**) 19/05/2011, 07:17

Hola , buenas tardes , soy nuevo en el foro , no se si lo que expongo, está explicado en otro hilo de ser así , no contexteis simplemente darme el link. Por otra parte , he buscado y rebuscado mi problema y no lo encuento , supongo que porque soy novato en esto. Mi problema es el siguiente , tengo una imagen de fondo , en el body , una capa en el centro de la pagina , denominada container , el problema viene cuando , con control+ruleta del raton quito zoom , esa capa , se sube arriba , y lo que quiero es ajustarla al final de la pagina , es decir , que solo el zoom afecte a la capa verticalmente , no horizontalmente, pongo aqui el código , aunque , creo que es bastante sencillo , aunque no logro ver el problema , ante todo muchas gracias y enorabuena por la web .

//////////////css//////////////////
body{
background-color:black;
background-image:url(Images/cristales.jpg);
background-repeat: no-repeat;
background-size:100%;
margin:auto;
}
#contenedor{
position:relative;
background-attachment:scroll;
background-size :100%;
background-color:pink ;
background-repeat:no-repeat;
width:644px;
height:800px ;
margin:auto;
margin-top:-20px;
}
#encabezado{}
#pie{}

////////////html////////////////

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<title></title>
</head>
<body>
<div id ="contenedor">
<div id="encabezado">
</div>
<div id="cuerpo">
</div>
<div id="pie">
</div>
</div>
</body>
</html>

IsaBelM · #2 (**permalink**) 19/05/2011, 07:43

a ver si lo he entendido. lo que quieres es ajustar el pie de página, siempre en la parte inferior
http://ryanfait.com/resources/footer...ottom-of-page/

rock_ridder · #3 (**permalink**) 19/05/2011, 07:53

Isabel , ante todo gracias por contestar , pero no es exactamente lo que quiero , lo que quiero es que la capa del contenedor , este a 20 px siempre de la parte inferior de la pagina , es decir como pasa en facebook, por ejemplo , que si quitas zoom , siempre hay la misma distancia hasta el final de la pagina , y esa capa siempre permanece en el mismo sitio. Vamos que la capa se mueve verticalmente , pero no horizontalmente .

IsaBelM · #4 (**permalink**) 19/05/2011, 07:58

entonces lo que buscas es fixed busca sobre esa propiedad

rock_ridder · #5 (**permalink**) 19/05/2011, 08:33

he mirado por hay y yo creo que no tiene nada que ver , en fin gracias por tu tiempo , intentare buscarme la vida de otra manera

rock_ridder · #6 (**permalink**) 19/05/2011, 08:57

Mira isabel , me referia concretamente a esto, gracias de todas maneras:
http://www.dynamicdrive.com/style/layouts/item/css-left-and-right-frames-layout/

IsaBelM · #7 (**permalink**) 19/05/2011, 13:17

me alegra saber que al final has encontrado lo que querías, aunque tus explicaciones no lo ponía nada fácil. aunque estuve cerca con fixed
esto lo mismo, pero realizado de otro modo

Cita:

<!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>Documento sin título</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}

#cont {
background-color: yellow;
width: 100%;
height: 100%;
margin: 0 auto;
}

.izq {
width: 150px;
height: 100%;
background-color: orange;
float: left;
}

.der {
width: 150px;
height: 100%;
background-color: green;
float: right;
}

.centro {
position: fixed;
top: 0;
left: 150px;
right: 150px;
bottom: 0;
overflow: auto;
background: #fff;
}
</style>
</head>
<body>
<div id="cont">

<div class="izq">contenedor izquierda</div>
<div class="der">contenerdor derecha</div>
<div class="centro">
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br /><br /><br />
</div>

</div>
</body>
</html>