Foros del Web » Creando para Internet » CSS »

Positioning

Estas en el tema de Positioning en el foro de CSS en Foros del Web. Hola, contertulios. Estaba experimentando para hacer un footer centrado en el pie de página. Una vez me pareció haberlo logrado, hice un div para el ...
  #1 (permalink)  
Antiguo 11/02/2011, 12:01
 
Fecha de Ingreso: octubre-2009
Mensajes: 35
Antigüedad: 8 años, 1 mes
Puntos: 0
Positioning

Hola, contertulios. Estaba experimentando para hacer un footer centrado en el pie de página.

Una vez me pareció haberlo logrado, hice un div para el contenido. Lo puse antes que el footer, pero se me posiciona abajo. Abajo y detrás, porque el footer es absoluto.

Todo el código HTML y CSS está aquí:
http://www.cafeestudio.cl/prueba.html

Es una página muy simple y sólo tiene los protagonistas de todo el embrollo.

Ya fue probado situar el div del contenido de forma absoluta y con top:0px; pero eso sólo hace que el contenido se vaya a la izquierda.

Qué podré estar pasando por alto acá?
  #2 (permalink)  
Antiguo 11/02/2011, 12:07
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Positioning

entre varias cosas, si le das posición absoluta al div, tienes que indicarle en que posicion va a ir y no lo has hecho
Cita:
.footer {
background-color: #0F9;
height: 50px;
position: absolute;
width: 100%;
bottom: 0px;
}
La posición absoluta la toma de la totalidad del espacio en pantalla y no del div en el que está. Intenta mejor con una posicion relativa

Cita:
.footer {
background-color: #0F9;
height: 50px;
position: relative;
margin: 0 auto;
width: 100%;
}
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #3 (permalink)  
Antiguo 11/02/2011, 12:23
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Positioning

Puedes probar estas propiedades:
Código CSS:
Ver original
  1. .footer {
  2.     background-color: #00FF99;
  3.     bottom: 0;
  4.     height: 50px;
  5.     margin-top: -50px; /* El alto del footer */
  6.     position: absolute;
  7.     width: 100%; /* aquí no sé porqué no aparece correctamente el 100% */
  8. }
  9. .contenedor {
  10.     min-height: 100%;
  11.     padding-bottom: 50px; /* El alto del footer */
  12.     position: relative;
  13. }

Comprueba el código porque aparece el footer en otra parte del HTML dentro de contenedor y podría aparecer duplicado.
  #4 (permalink)  
Antiguo 11/02/2011, 16:07
 
Fecha de Ingreso: octubre-2009
Mensajes: 35
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Positioning

Grosos! Voy a probar todo lo que me han dicho. Por eso los quiero! Gracias.
  #5 (permalink)  
Antiguo 11/02/2011, 16:47
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Positioning

Hola:

Cita:
Iniciado por gVenom Ver Mensaje
La posición absoluta la toma de la totalidad del espacio en pantalla y no del div en el que está.
La posición absoluta toma su posición con respecto a las coordenadas 0,0 que es la esquina superior izquierda, pero no hay que olvidar que puede tomar su posición con respecto a su padre si este tiene posición relativa.

Saludos.


Etiquetas: Ninguno
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 02:47.