Foros del Web » Creando para Internet » CSS »

colocar un div abaj de forma fija?

Estas en el tema de colocar un div abaj de forma fija? en el foro de CSS en Foros del Web. wenas a todos, despues de tarme dando paseos por este foro y qerer aprender he tado haciendo pruebitas y maquetando algunas cosas siguendo consejos y ...
  #1 (permalink)  
Antiguo 16/10/2006, 16:43
Avatar de ida_creativa  
Fecha de Ingreso: octubre-2006
Mensajes: 22
Antigüedad: 11 años, 1 mes
Puntos: 0
Pregunta colocar un div abaj de forma fija?

wenas a todos, despues de tarme dando paseos por este foro y qerer aprender he tado haciendo pruebitas y maquetando algunas cosas siguendo consejos y demás, de antemano gracias a todos!

aveces me surgen dudas tontas q al final acabo entendiendo y otras q no tengo muy claras pero bueno jaja

quería preguntar como poner un div q se qede pegado al borde inferrior, ya que qiero hacer un diseño q contiene una barra inferior negra y q no varie dependiendo de la resolución de pantalla.

cualquier sugerencia sere agradecida :)

stube probando margin-bootom: 0px;
  #2 (permalink)  
Antiguo 16/10/2006, 17:23
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Hola (bienvenida a FdW ), esto es lo que hago yo (hay otras formas, pero yo uso esta):

Código HTML:
<div id="contenedor">
     <div class="relleno"></div>
</div>
<div id="pie"></div> 
Código:
html,
body{
     height:100%}

#contenedor{
     min-height:100%}

#pie{
     height:40px;
     margin:-40px 0 0 0;}

.relleno{
     height:40px}
¿que es todo esto? Bien, te lo explico:
genero un contenedor que mida como mínimo el 100% de su padre (body, por eso hay que poner height:100% porque es el valor que toma como referencia).

Luego, fuera y debajo de esa capa contenedora genero otra (pie) que mida 40px de alto (medida como ejemplo, puede ser cualquier otra), y la "subo" 40px para arriba (esta técnica se llama "posicionameinto negativo", porque hace uso de un valor negativo del margin)
Por último la capa relleno sirve para que el pie no se superponga al contenido del contenedor.


Lamentablemente la propiedad min-height no funciona en Internet Explorer 6 e inferior (si lo hace en el 7), por lo que hay que incluir este pequeño código (un comentario condicional) antes del <body>:
Código HTML:
<!--[if lte IE 6]>
<style type="text/css">
#contenedor{
     height:100%;}
</style>
<![endif]--> 
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 17/10/2006, 02:45
Avatar de ida_creativa  
Fecha de Ingreso: octubre-2006
Mensajes: 22
Antigüedad: 11 años, 1 mes
Puntos: 0
Gracias por la bienvenida :)

mil gracias! he tado probando y funciona, lo que no ntiendo es q si ta al 100% todo, la imagen se me corta por los bordes y tiene puesto q se repita.

sino optaré por poner una tabla, pero estoy intentando dejarlas huerfanitas y adoptar totalmente al css

gracias!
  #4 (permalink)  
Antiguo 17/10/2006, 09:50
 
Fecha de Ingreso: abril-2005
Ubicación: Lima-Peru
Mensajes: 313
Antigüedad: 12 años, 7 meses
Puntos: 1
interesante propuesta webosiris, el tema del footer pegado hacia abajo es muy comun y complicado, he visto soluciones en las que utilizan capas container con posicionamiento absoluto y otras cosas que ensucian el codigo, voy a probar tu codigo, en mi prox proyecto, gracias por compartir




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 18:01.