Problemas en un contenedor con Bottom

Citar

Escrito el 10 Ago 2007 02:37 am

Me he topado con un problema al momento de maquetar una Web usando unicamente CSS.
La cuestion es que debe de pasar un contenedor (con una imagen de background) en la parte de abajo de esta pagina (en otras palabras, este es un contenedor con "bottom:0" [sin importar su altura], cuyo ancho es 100% y altura 30px). Bueno, el problema es justamente este, no logro pegar el contenedor al final de la pagina en almenos Firefox e IE.

Saludos y gracias anticipadas :wink:

Por Blizknight

13 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 10 Ago 2007 07:25 am

Hmm, esto deberia funcionar.

Código :

#div {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:30px;
}

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado Web

Front-end Developer en Washington, DC

@neojp

Citar

Escrito el 10 Ago 2007 12:41 pm

Hola,

También asegurate de que body tenga el o los márgenes y padding en cero, pues los exploradores tienen valores estándar que debes poner a cero.

Código :

body {
margin:0;
padding:0;
border:0;
}

Por gonarin

32 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 11 Ago 2007 02:54 am

Ok, bien, eso en principio la pegaria abajo. Pero si el contenido no cabe en la pagina, apareceran los scrolls, y al movernos hacia abajo, nuestro footer quedaria "flotando".

Este es el codigo de prueba que uso:

Código :

<html>
<head>

<style media="all" type="text/css">
body {
   margin:0;
   padding:0;
   border:0;
}
#footer {
   position:absolute;
   bottom:0;
   left:0;
   width:100%;
   height:30px;
   background-color:#FF0000;
}
</style>

</head>
<body>

Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>Linea n<br/>
<div id="footer">
   Este es nuestro footer.
</div>

</body>
</html>

Nuevamente, gracias !

Por Blizknight

13 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 11 Ago 2007 04:06 am

Si. es cierto.

Esta otra codificación CSS la saqué no recuerdo de donde, y creo que te va a andar bien:

Código :

<style media="all" type="text/css">
body {
   position:absolute;
   margin:0;
   border:0;
   padding:0;
   height:100%;
   width:100%;
}
#footer {
/* position:absolute;
   bottom:0;
   left:0;*/
   clear:both;
   width:100%;
   height:30px;
   background-color:#FF0000;
}
</style>

Por gonarin

32 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 11 Ago 2007 11:03 pm

No es tan facil como parece, ahora resulta que funciona cuando el contenido no cabe... Pero que pasa si el contenido SI cabe en la pagina ? pues, el footer no se pegara abajo =(

Código :

<html>
<head>

<style media="all" type="text/css">
body {
   position:absolute;
   margin:0;
   border:0;
   padding:0;
   height:100%;
   width:100%;
}
#footer {
/* position:absolute;
   bottom:0;
   left:0;*/
   clear:both;
   width:100%;
   height:30px;
   background-color:#FF0000;
}
</style>

</head>
<body>

Linea n<br/>Linea n<br/>Linea n<br/>Linea n
<div id="footer">
Este es nuestro footer.
</div>

</body>
</html>

Por Blizknight

13 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 16 Ago 2007 02:49 am

Hey ! yo tengo el mismo problema.. porfavor, alguien podria ayudarnos con esto ?

Por ugNexus

2 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Citar

Escrito el 16 Ago 2007 05:40 am

Parece que lo que necesitas es usar una posición fija.
Busca sobre position:fixed y su uso en diferentes navegadores.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado Web

Front-end Developer en Washington, DC

@neojp

Citar

Escrito el 16 Ago 2007 01:50 pm

Claro que no es lo que busco

(almenos yo). Solo quiero que un footer se pegue SIEMPRE al final :crap:

Por ugNexus

2 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Citar

Escrito el 16 Ago 2007 04:13 pm

Aaah ok ok, ya se qué es lo que quieres.

Si el contenido es corto, el footer se pegará abajo. Si el contenido el largo, el footer desaparece y aparece sin posición absolute al final de todo el contenido. Si?

http://www.themaninblue.com/writing/perspective/2005/08/29/

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado Web

Front-end Developer en Washington, DC

@neojp

Citar

Escrito el 11 Mar 2009 06:03 pm

Reemplazar absolute por fixed;

Código :

  position:absolute;

Saludos.-

Por patotyonline

1 de clabLevel

Envíale un mensaje privado

Problemas en un contenedor con Bottom - CSS

Escribe una respuesta rapida