Foros del Web » Creando para Internet » CSS »

Ajustar capa , a la parte inferior de la pagina

Estas en el tema de Ajustar capa , a la parte inferior de la pagina en el foro de CSS en Foros del Web. Hola , buenas tardes , soy nuevo en el foro , no se si lo que expongo, está explicado en otro hilo de ser así ...
  #1 (permalink)  
Antiguo 19/05/2011, 08:17
Avatar de rock_ridder  
Fecha de Ingreso: mayo-2011
Mensajes: 11
Antigüedad: 6 años, 6 meses
Puntos: 0
Busqueda Ajustar capa , a la parte inferior de la pagina

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><!-- Insert your title here --></title>
</head>
<body>
<div id ="contenedor">
<div id="encabezado">
</div>
<div id="cuerpo">
</div>
<div id="pie">
</div>
</div>
</body>
</html>
  #2 (permalink)  
Antiguo 19/05/2011, 08:43
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Ajustar capa , a la parte inferior de la pagina

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/
  #3 (permalink)  
Antiguo 19/05/2011, 08:53
Avatar de rock_ridder  
Fecha de Ingreso: mayo-2011
Mensajes: 11
Antigüedad: 6 años, 6 meses
Puntos: 0
Respuesta: Ajustar capa , a la parte inferior de la pagina

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 .
  #4 (permalink)  
Antiguo 19/05/2011, 08:58
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Ajustar capa , a la parte inferior de la pagina

entonces lo que buscas es fixed busca sobre esa propiedad
  #5 (permalink)  
Antiguo 19/05/2011, 09:33
Avatar de rock_ridder  
Fecha de Ingreso: mayo-2011
Mensajes: 11
Antigüedad: 6 años, 6 meses
Puntos: 0
Respuesta: Ajustar capa , a la parte inferior de la pagina

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
  #6 (permalink)  
Antiguo 19/05/2011, 09:57
Avatar de rock_ridder  
Fecha de Ingreso: mayo-2011
Mensajes: 11
Antigüedad: 6 años, 6 meses
Puntos: 0
Respuesta: Ajustar capa , a la parte inferior de la pagina

Mira isabel , me referia concretamente a esto, gracias de todas maneras:
http://www.dynamicdrive.com/style/layouts/item/css-left-and-right-frames-layout/
  #7 (permalink)  
Antiguo 19/05/2011, 14:17
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Ajustar capa , a la parte inferior de la pagina

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>

Etiquetas: capas
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 16:07.