Foros del Web » Creando para Internet » CSS »

Posicionamiento del Footer

Estas en el tema de Posicionamiento del Footer en el foro de CSS en Foros del Web. Hola amigos, una vez más vengo con un problemilla de maquetación. El caso es que quiero que mi footer aparezca siempre abajo de la página ...
  #1 (permalink)  
Antiguo 21/05/2012, 02:33
Avatar de oNefl0w189  
Fecha de Ingreso: abril-2010
Ubicación: Valladolid
Mensajes: 117
Antigüedad: 14 años, 6 meses
Puntos: 4
Posicionamiento del Footer

Hola amigos,
una vez más vengo con un problemilla de maquetación.

El caso es que quiero que mi footer aparezca siempre abajo de la página y lo consigo si le pongo posiciones absolutas, pero necesito hacerlo con un position relative y no hay manera...

Si me podéis echar un cable..!

actualmente lo tengo así;

Código:
		<!-- Contenido -->	
		<div class="contenido" id="curved">
		asdasdasdasasdasdasdasdasasdasd 
		</div>
		
		
		<!-- Pie de página -->
		<div class="pie">
			<img src="imagenes/hospital.gif" width="100" height="80"/>
			<img src="imagenes/jcyl.png" width="100" height="80"/>
			<img src="imagenes/sacyl.gif" width="100" height="80"/>
		</div>
Código:
/* CSS - Contenido */
div.contenido {
	width: 50%;
	margin: 65px 0 0 410px;
	padding: 15px 30px 15px 30px;
}

/* CSS - Pie de Página */
div.pie {
    position: relative;
	margin: 30px 10px 0 10px;
    bottom: 0px;
	float: left;
}

div.pie img {
	margin-right: 50px;
}
__________________
Nunca dijeron que la vida sería fácil, sólo prometieron que valdría la pena vivirla.

Dar las gracias y añadir Karma, no cuesta nada, ¿Que menos si te ayudan? :)

Última edición por oNefl0w189; 21/05/2012 a las 02:42
  #2 (permalink)  
Antiguo 22/05/2012, 00:18
 
Fecha de Ingreso: julio-2011
Ubicación: Zapopan, Jal. MX
Mensajes: 316
Antigüedad: 13 años, 4 meses
Puntos: 32
Respuesta: Posicionamiento del Footer

Si ese es un tema muy comun y problematico mira yo ya lo he hecho funcionar hasta en ie8, solo ocupas un par de lineas de css y hasta con position relative, pero como ahorita no ando en mi pc no puedo decirte exactamente como le hice, mas tarde te digo, pero si mas recuerdo primero ocupas encerrar todo en un div que es como un sub-body a este le pones position relative height 100% asi como a la etiqueta html y body, luego al footer le das position absolute o pruebale con relative y le pones bottom:0 y a la capa .contenido le das un margin-bottom del height que tenga el footer en caso de usar absolute.

O bien checate este maquetado http://www.angelfcm.my-place.us/guarderia_SuperBaby/ que hice aplicando esa tecnica, es sencillo el codigo para que veas como pongo el footer, saludos!
  #3 (permalink)  
Antiguo 23/05/2012, 04:53
Avatar de oNefl0w189  
Fecha de Ingreso: abril-2010
Ubicación: Valladolid
Mensajes: 117
Antigüedad: 14 años, 6 meses
Puntos: 4
Respuesta: Posicionamiento del Footer

Ya conseguí posicionarlo donde quería, pero ahora tengo otro problema.

Como dicen, una imagen vale más que mil palabras, aquí tienen:

aqui sale bien:



Pero cuando redimensionan la página se descolocan los elementos:



se descolocan y se ponen donde quieren..


Lo que yo quiero es que salga el scroll, pero que no se muevan las imagenes de sitio, que queden donde estan como estan.


Un saludo y gracias!!
__________________
Nunca dijeron que la vida sería fácil, sólo prometieron que valdría la pena vivirla.

Dar las gracias y añadir Karma, no cuesta nada, ¿Que menos si te ayudan? :)
  #4 (permalink)  
Antiguo 23/05/2012, 08:01
 
Fecha de Ingreso: julio-2011
Ubicación: Zapopan, Jal. MX
Mensajes: 316
Antigüedad: 13 años, 4 meses
Puntos: 32
Respuesta: Posicionamiento del Footer

Muy sencillo, dale un ancho que no sea en porcentajes al footer, saludos.

Última edición por IXtremeLT; 23/05/2012 a las 08:06
  #5 (permalink)  
Antiguo 24/05/2012, 00:54
Avatar de oNefl0w189  
Fecha de Ingreso: abril-2010
Ubicación: Valladolid
Mensajes: 117
Antigüedad: 14 años, 6 meses
Puntos: 4
Respuesta: Posicionamiento del Footer

Cita:
Iniciado por IXtremeLT Ver Mensaje
Muy sencillo, dale un ancho que no sea en porcentajes al footer, saludos.
Muy bien, es cierto, ahora ese problema se ha arreglado, pero el caso es que si redimensiono hacia arriba los iconos se suben y se meten dentro del div de contenido tambien.

Supongo que de la misma manera, esto se arreglará dandole un height al div, pero el problema es que ese Height no lo sé, puesto que el div en principio no está y al pulsar en un enlace aparece un div de 'x' tamaño, al pulsar en otro enlace aparece otro div distinto de 'x' tamaño o al pulsar en otro enlace desaparecen los divs.


Como podría hacer esto??


Muchisimas gracias!
__________________
Nunca dijeron que la vida sería fácil, sólo prometieron que valdría la pena vivirla.

Dar las gracias y añadir Karma, no cuesta nada, ¿Que menos si te ayudan? :)
  #6 (permalink)  
Antiguo 24/05/2012, 12:13
 
Fecha de Ingreso: julio-2011
Ubicación: Zapopan, Jal. MX
Mensajes: 316
Antigüedad: 13 años, 4 meses
Puntos: 32
Respuesta: Posicionamiento del Footer

Al elemento queda arriba del footer dale un margin-bottom del height que tenga el footer o bien prueba darle un margin-top al footer del tamaño de su height.
  #7 (permalink)  
Antiguo 24/05/2012, 12:51
Avatar de Heiroon  
Fecha de Ingreso: junio-2010
Ubicación: Caracas, Venezuela - Por ahora...
Mensajes: 495
Antigüedad: 14 años, 5 meses
Puntos: 63
De acuerdo Respuesta: Posicionamiento del Footer

Chamo implementale esto... http://ryanfait.com/sticky-footer/
__________________
Gmail : [email protected]
Twitter: @heiroon

I'm back!
  #8 (permalink)  
Antiguo 24/05/2012, 22:35
 
Fecha de Ingreso: julio-2011
Ubicación: Zapopan, Jal. MX
Mensajes: 316
Antigüedad: 13 años, 4 meses
Puntos: 32
Respuesta: Posicionamiento del Footer

Excelente truco @Heiroon!, aunque nunca he etendido por que hacer algo como esto:

Código CSS:
Ver original
  1. .foo {
  2.     height: auto !important;
  3.     height: 100%;
  4. }

No tiene sentido que se le vuelva a dar otro valor a la misma propiedad que se le dio un valor declarado como !important ya que logicamente va a tomar en cuenta el height: auto y no el height: 100% en este caso.
De hecho si al ejemplo que enlazaste le quitas el height:100%, funciona igual no hay ninguna diferencia. ¿Alguien me puede explicar? Saludos!
  #9 (permalink)  
Antiguo 25/05/2012, 05:37
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 4 meses
Puntos: 539
Respuesta: Posicionamiento del Footer

Cita:
Iniciado por IXtremeLT Ver Mensaje
¿Alguien me puede explicar? Saludos!
Cosas del pasado.
¿Oyó hablar de ie6? No entendía el !important y también tenía sus cosas al interpretar lo del height: auto|100%
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 25/05/2012, 23:26
 
Fecha de Ingreso: julio-2011
Ubicación: Zapopan, Jal. MX
Mensajes: 316
Antigüedad: 13 años, 4 meses
Puntos: 32
Respuesta: Posicionamiento del Footer

No te entendi o.O

Etiquetas: contenido, footer, posicionamiento
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 13:03.