capa absoluta al pie de página, no me sale!

web33 · #1 (**permalink**) 31/10/2011, 09:16

Hola amigos, llevo tiempo intentanto posicionar una capa absoluta abajo de todo y lo único que hace es ponerla abajo pero cuando hay scroll se keda arriba. aquí pongo el codigo css por si alguien me puede ayudar, muchas gracias.

#copyright { position: absolute;
width:100%;
height: 24px;
margin-left:auto;
margin-right:auto;
margin-bottom:auto;
margin-top:auto;
bottom:0px !important;
left:0;
right:0;
background-color: #CED8F6;
border-bottom: 10px solid #B9005C;

}

todas mis capas son absolutas.

saraal · #2 (**permalink**) 31/10/2011, 10:27

has probado con "fixed" en lugar de absolute? Eso si, en moviles y tablets el fixed no funciona pero el absolute si...

web33 · #3 (**permalink**) 31/10/2011, 10:35

Gracias por contestar, esa opción no vale porqué el fixed se queda fijo y tapa unos px de la web, tampoco seria la solución ponerlo fijo. pero gracias de todos modos.

Alguien podría ayudarme por favor?

emprear · #4 (**permalink**) 31/10/2011, 10:38

Lo que sigue funciona

Código HTML:

Ver original<!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>
<title>Capa al pie</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
html, body {
margin: 0;
padding: 0;
}
#copyright {
position: absolute;
width:100%;
height: 50px;
margin: 0;
padding: 0;
bottom: 0;
left: 0;
background-color: gray;
border-bottom: 10px solid #000;
}
/*]]>*/
</style>
</head>
<body>
<div id="copyright">
copyright
</div>
</body>
</html>

Probablemente hay algo más de tu html que esté interfiriendo

Saludos

web33 · #5 (**permalink**) 31/10/2011, 10:49

Gracias, me sigue sin funcionar. Lo que hace el código es poner la capa abajo del todo pero en cuanto el contenido le sale el scroll ya se queda allí, no sale abajo del todo, nose si me esplico.

emprear · #6 (**permalink**) 31/10/2011, 11:07

ponele
height:auto;

si lo que querés es que sea de un alto determinado y que genere scroll usá fixed en lugar de absolute como señaló @saraal
Saludos

web33 · #7 (**permalink**) 31/10/2011, 11:21

GRacias, pero sigue igual sin funcionar, aquí pongo todo el codigo CSS aver si me podrias ayudar por favor. a lo mejor hay que añadir algo en el body.

html, body { height:100%;
margin:0;
padding: 0;
height:auto!important;
min-height:100%;
min-width:100%;
text-align: center;
}
#toplogo { position: absolute;
z-index:2;
width:100%;
height: 120px;
margin-left:auto;
margin-right:auto;
left:0;
right:0;
margin-top: -8px;
background-color: #2e2e2e;
border-bottom: 3px solid #B9005C;
}
#marquee { position: absolute;
width:100%;
height: 36px;
margin-left:auto;
margin-right:auto;
left:0;
right:0;
margin-top: 115px;
background-color: #CED8F6;

}
#content { position: absolute;
width:100%;
margin-left:auto;
margin-right:auto;
left:0;
right:0;
margin-top: 150px;
}
#copyright { position: absolute;
width:100%;
height: auto;
z-index:1;
margin-bottom:0px;
margin: 0;
padding: 0;
bottom:0;
left: 0;
background-color: gray;
border-bottom: 10px solid #000;
/*
background-color: #CED8F6;
border-bottom: 10px solid #B9005C; */

}

emprear · #8 (**permalink**) 31/10/2011, 11:57

en realidad no sé muy bien como se tiene que mostrar lo que querés,

con el css que pasaste se muestran 4 capas, una debajo de la otra y la úlltima al pie.
De todas maneras tu css esta lleno de cosas innecesarias al mi parecer, si tus capas tienen 100% de ancho, no necesitas de absolute, salvo para la ultima, y las capas absolutas las posicionas en todo caso con left y top(o bottom para laque va al pie) no con left y right, los z-index, al no haber superposición, están de más.
Como el color de fondo de content no te lo va a cubrir completo si no hay contenido, lo pasamos al body.
Proba con esto

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
html, body {
height:100%;
margin:0;
padding: 0;
min-height:100%;
min-width:100%;
text-align: center;
 background-color: cyan;
}
div {
margin: 0;
padding: 0;
}
 
 #toplogo {
 width:100%;
 height: 120px;
 background-color: #2e2e2e;
 border-bottom: 3px solid #B9005C;
 }
 #marquee {
 width:100%;
 height: 36px;
 background-color: #CED8F6;
}
 #content {
 width:100%;
 background-color: cyan;
 }
 
 #copyright {
 position: absolute;
 width:100%;
 height: auto;
 margin-bottom:0px;
 margin: 0;
 padding: 0;
 bottom:0;
 left: 0;
 background-color: gray;
 border-bottom: 10px solid #000;
} 
/*]]>*/
</style>
</head>
<body>
 
<div id="toplogo">
toplogo<br />
</div>
 
<div id="marquee">
marquee<br />
</div>
 
<div id="content">
content<br />
</div>
 
<div id="copyright">
copyright<br />
copyright<br />
copyright<br />
copyright<br />
copyright<br />
copyright<br />
copyright<br />
copyright<br />
</div>
</body>
</html>

En el caso de que tu capa content genere scroll al body, te repito, tu capa copyright deberá estar con fixed.
Ejemplo
http://foros.emprear.com/html/div-al...-fija-pie.html
Saludos

web33 · #9 (**permalink**) 31/10/2011, 12:24

Hola de nuevo empear, si saco los absolute no me queda al 100% la capa, y lo me interesa hacer es que si hay contenido en el content, vaya bajando y al final del todo encontrar el div copyright, igual que todas las webs. el fixed lo fija abajo pero te sigue a donde vayas subas o bajas en el contenido.
alguna idea? llevo todo el dia intentando de todas las formas pero no hay manera.

web33 · #10 (**permalink**) 01/11/2011, 07:39

Alguien sabe como podria ayudarme por favor?