Foros del Web » Creando para Internet » CSS »

el pie se me sube arriba

Estas en el tema de el pie se me sube arriba en el foro de CSS en Foros del Web. hola, tengo los siguientes estilos: Código HTML: #Tabla_01 { position:absolute; left:0px; top:0px; width:701px; height:758px; } #logo{ position:relative; left:0px; top:0px; width:397px; height:61px; } #buscar { position:absolute; ...
  #1 (permalink)  
Antiguo 18/04/2008, 02:05
 
Fecha de Ingreso: junio-2002
Ubicación: España
Mensajes: 348
Antigüedad: 21 años, 10 meses
Puntos: 8
el pie se me sube arriba

hola, tengo los siguientes estilos:

Código HTML:
#Tabla_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:701px;
	height:758px;
}

#logo{
	position:relative;
	left:0px;
	top:0px;
	width:397px;
	height:61px;
}

#buscar {
	position:absolute;
	left:397px;
	top:0px;
	width:304px;
	height:61px;
}

#menusup {
	position:absolute;
	left:0px;
	top:61px;
	width:242px;
	height:235px;
}

#menusupder {
	position:absolute;
	left:491px;
	top:61px;
	width:210px;
	height:103px;
}

#titulo {
	position:absolute;
	left:0px;
	top:296px;
	width:242px;
	height:12px;
}

#menuleft {
	position:absolute;
	left:0px;
	top:311px;
	width:233px;
}

#content {
	position:absolute;
	float:left;
	left:233px;
	top:311px;
	width:468px;
}


#pie {
	position:relative;
	clear : both; 
	left:0px;
	width:701px;
	height:66px;
}
y la página es la siguiente:

Código HTML:
<div id="Tabla_01">
	<div id="logo">
		<img src="imagenes/index_01.jpg" width="397" height="61" alt="" />
	</div>
	<div id="buscar">
		<img src="imagenes/index_02.jpg" width="304" height="61" alt="" />
	</div>
	<div id="menusup">
		<img src="imagenes/index_03.jpg" width="242" height="235" alt="" />
	</div>
	<div id="menusupder">
		<img src="imagenes/index_05.jpg" width="210" height="103" alt="" />
	</div>
	<div id="titulo">
		<img src="imagenes/index_07.jpg" width="242" height="12" alt="" />
	</div>
	<div id="menuleft">
		<img src="imagenes/index_10.jpg" width="233" height="377" alt="" />
	</div>
	<div id="content">
	 contenido
	</div>
	<div id="pie">
		<img src="imagenes/index_13.jpg" width="701" height="66" alt="" />
	</div>
</div> 
El problema es que el pie se me queda arriba subido, he visto en otros mensajes que se puede arreglar con el clear : both; pero supongo que no lo hago bien. Que falla?
__________________
Bicis nuevas y de segunda mano: Bicibid
  #2 (permalink)  
Antiguo 18/04/2008, 02:17
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: el pie se me sube arriba

¿Qué quiere decir que se sube arriba? ¿que lo quieres siempre abajo aunque el contenido no rellene la página?

Mikel.
  #3 (permalink)  
Antiguo 18/04/2008, 02:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: el pie se me sube arriba

Recuerda que las cajas con position absolute no ocupan lugar físico en el flujo del documento, es decir, que lo que pongas sin posición absoluta se irá colocando donde le corresponde en el flujo seguido sin tener en cuenta las absolutas, por eso tienes el pie arriba sobre otras cajas absolutas.

Para resolver tu problema, aunque no me parece buena idea, prueba a poner esto:

#pie {
position:absolute;
left:0px;
bottom: 0;
width:701px;
height:66px;
}

Mikel.
  #4 (permalink)  
Antiguo 18/04/2008, 03:01
 
Fecha de Ingreso: junio-2002
Ubicación: España
Mensajes: 348
Antigüedad: 21 años, 10 meses
Puntos: 8
Re: el pie se me sube arriba

Gracias por responder tan rápido,
he probado lo que dices de poner el pie en el pixel 0 pero por debajo y no me funciona.
cuando el contenido aumenta pie no baja para abajo.
bueno, seguiré probando
__________________
Bicis nuevas y de segunda mano: Bicibid
  #5 (permalink)  
Antiguo 18/04/2008, 03:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: el pie se me sube arriba

Pues te voy a repetir la pregunta:

¿Qué quiere decir que se sube arriba? ¿que lo quieres siempre abajo aunque el contenido no rellene la página, y que siga abajo aunque el conteido aumente?

Mikel.
  #6 (permalink)  
Antiguo 18/04/2008, 03:25
 
Fecha de Ingreso: junio-2002
Ubicación: España
Mensajes: 348
Antigüedad: 21 años, 10 meses
Puntos: 8
Re: el pie se me sube arriba

Eso es, lo quiero siempre abajo ya que el contenido es dinámico y puede variar.
__________________
Bicis nuevas y de segunda mano: Bicibid
  #7 (permalink)  
Antiguo 18/04/2008, 03:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Mira este enlace.

Pie siempre abajo

Mikel.

Última edición por Mikmoro; 25/05/2008 a las 16:52 Razón: Limpiado y mejorado el código
  #8 (permalink)  
Antiguo 19/04/2008, 08:55
 
Fecha de Ingreso: abril-2008
Ubicación: -
Mensajes: 156
Antigüedad: 16 años
Puntos: 5
Re: el pie se me sube arriba

Tengo entendido que la propiedad clear es sólo para reiniciar las propiedades de float anteriores y no para los position.

No recomiendo que uses la propiedad position a no ser que sea estrictamente necesario, son mejores los float.

La etiqueta DIV (capa) tiene por defecto la propiedad display: block. Por lo tanto únicamente deberías especificar un ancho y largo, así como un float, a cada uno de los elementos.

Para evitar problemas de posicionamiento, puedes crear la etiqueta:

Código:
div.clear {clear:both; height: 0px}
Código HTML:
<div class="clear"></div> 
E insértala antes del pie.



Un saludo.
  #9 (permalink)  
Antiguo 19/04/2008, 09:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: el pie se me sube arriba

Lo malo es que con eso el pie no se mantendrá abajo cuando el contenido sea escaso

Echa un vistazo si te apetece al vínculo que puse encima de tu post sobre la discusión y la conclusión final del tema.

Mikel.
  #10 (permalink)  
Antiguo 19/04/2008, 10:16
Avatar de lucasan
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: Cali - Colombia
Mensajes: 1.144
Antigüedad: 16 años, 10 meses
Puntos: 59
Re: el pie se me sube arriba

El tema del pie de página al final aun cuando no hay mucho contenido ha sido comentado ampliamente.
En google se ven varios resultados y en general te van a decir esto:

1. El contenedor general debe tener un height del 100%.
2. El pie lo pones fuera del contenedor general y le das una altura fija.
3. Al contenedor le das una margen abajo negativa de igual valor a la altura del pie.

En teoría funciona, pero cuando pruebas con uno y otro navegador tiene sus inconvenientes.
Por ejemplo, yo cierta vez lo hice y todo iba bien, pero en IE el contenedor principal se me "escondía" un poco en la parte de arriba, por la margen negativa y la altura 100% supongo.

Sin embargo te pongo aquí como hacerlo.

Código:
body {
  height: 100%;
}

#contenedor {
  height: 100%;
  min-height: 100%;
  margin-bottom: 120px; //Suponiendo que el pie tiene 120px de altura
}

#pie {
  height: 120px;
}
Código HTML:
<div id="contenedor">
Aca debería ir el contenido y los demás divs.
</div>
<div id="pie">
Acá el contenido del pie
</div> 
Con eso debería bastar, prueba y nos cuentas.

P.D: Me surge una duda, no se que tan semántico sea hacer eso de poner el pie por fuera del contenedor principal.
__________________
Plan Original Desarrollo Web
~$>sudo apt-get install -f
"Asi debería arreglarse todo en la vida"
  #11 (permalink)  
Antiguo 19/04/2008, 11:32
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: el pie se me sube arriba

EDITO:
El código que aparece en el enlace que puse algunos mensajes más arriba, y que creo que funciona a la perfección en la mayoría de navegadores (como se cita en el hilo al que hago referencia) es este:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html lang="es">
<head>
<style>
/*inicio tags genéricos*/
*{
padding:0;
margin:0;
}
html {
height:100%;
}
body {
height:100%;
font-family:verdana, arial, sans-serif;
text-align:center;
}
p{
padding:10px;
}
/*fin tags genéricos*/
/*inicio tags específicos*/
#contenedor {
min-height:100%;
width:100%;
background:#A9A9A9;
text-align:left;
margin:0 auto;
}
* html #contenedor {
height:100%;
}
#cabecera{
position:relative;
right:0px;
top:0px;
width:100%;
height:10em;
background:#000;
color:#fff;
text-align:center;
}
#cuerpo {
padding:1em 1em 40px 1em;
position:relative;
background:#A9A9A9;
text-align:center;
}
#contenido {
background:#fff;
text-align:justify;
padding:10px;
margin-bottom:20px;
}
#pie{
height:3em;
background:#000;
color:#fff;
position:relative;
margin:0 auto;
margin-top:-3em;
width:100%;
}

/*fin tags específicos*/
</style>
<title>index</title>
</head>

<body>
<div id="contenedor">
<div id="cabecera">
<h1>CABECERA</h1>
</div><!--fin cabecera-->
<div id="cuerpo">
<h1>CUERPO</h1>
<div id="contenido">
<p>Lorem ipsum eum partem corrumpit et, qui puto habemus ea, id pro dolor nostro.
Tantas electram theophrastus nec cu. Sea libris prodesset ea, aeque facilisis id est, vituperatoribus concludaturque his ad. An modo kasd everti sed, in his alii singulis dignissim.
Ad cotidieque complectitur mei, ne iusto iisque mel, quidam feugiat ut est.</p>
<p>Lorem ipsum eum partem corrumpit et, qui puto habemus ea, id pro dolor nostro.
Tantas electram theophrastus nec cu. Sea libris prodesset ea, aeque facilisis id est, vituperatoribus concludaturque his ad. An modo kasd everti sed, in his alii singulis dignissim.
Ad cotidieque complectitur mei, ne iusto iisque mel, quidam feugiat ut est.</p>
<p>Lorem ipsum eum partem corrumpit et, qui puto habemus ea, id pro dolor nostro.
Tantas electram theophrastus nec cu. Sea libris prodesset ea, aeque facilisis id est, vituperatoribus concludaturque his ad. An modo kasd everti sed, in his alii singulis dignissim.
Ad cotidieque complectitur mei, ne iusto iisque mel, quidam feugiat ut est.</p>
<p>Lorem ipsum eum partem corrumpit et, qui puto habemus ea, id pro dolor nostro.
Tantas electram theophrastus nec cu. Sea libris prodesset ea, aeque facilisis id est, vituperatoribus concludaturque his ad. An modo kasd everti sed, in his alii singulis dignissim.
Ad cotidieque complectitur mei, ne iusto iisque mel, quidam feugiat ut est.</p>
<p>Lorem ipsum eum partem corrumpit et, qui puto habemus ea, id pro dolor nostro.
Tantas electram theophrastus nec cu. Sea libris prodesset ea, aeque facilisis id est, vituperatoribus concludaturque his ad. An modo kasd everti sed, in his alii singulis dignissim.
Ad cotidieque complectitur mei, ne iusto iisque mel, quidam feugiat ut est.</p>

</div><!--fin contenido-->
</div><!--fin cuerpo-->
</div><!--fin container-->
<div id="pie">
<h1>PIE</h1>
</div><!--fin pie-->
</body>
</html>
Mikel.

Última edición por Mikmoro; 19/04/2008 a las 13:16
  #12 (permalink)  
Antiguo 19/04/2008, 12:02
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 22 años, 6 meses
Puntos: 59
Re: el pie se me sube arriba

Código me da algunos problemas en IE Mikmoro, que putada, a seguir buscando ¬¬
Prueba poner un div que rellene el espacio entre el contenido y el fondo.
Así lo hacen Aquí
__________________
Cool Village
@Wakkos
  #13 (permalink)  
Antiguo 19/04/2008, 12:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: el pie se me sube arriba

¿Qué problemas?
Me gustaría poder verlo para ver qué ocurre y buscar una solución, ya que en su día acabamos muy contentos de encontrar una solución "universal", como le llamo el usuario que empezó el hilo.

Yo lo veo correcto en IE6 y IE7. Si has copiado y pegado el código al completo, dime qué problema ves, a ver qué pasa.

¿O te refieres a un problema de adaptación a un caso concreto? Si es así ya dirás.

Mikel.
  #14 (permalink)  
Antiguo 19/04/2008, 16:52
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 576
Antigüedad: 19 años, 7 meses
Puntos: 4
Re: el pie se me sube arriba

Vean lo que encontre googleando http://www.tierradenomadas.com/rc010.phtml
__________________
_______
Jorge Rojas.
  #15 (permalink)  
Antiguo 19/04/2008, 18:02
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: el pie se me sube arriba

Pues sí, sólo tiene unos pequeños fallos, que eran precisamente la base de la discusión por la que nos comimos la cabeza en su día:

- En primer lugar, en FF aparece el scroll aunque no haya apenas contenido.
- En IE6, ni siquiera está el pie a la vista, sino que desaparece y hay que hacer scroll para poder verlo

Y para rematar, añade esta frase:

"No hay razones para pensar en una catástrofe si no funciona como esperamos. En el peor de los casos el pie de página no quedará en la parte inferior, sino simplemente a continuación del contenido"

(???) :

Es EXACTAMENTE ESO LO QUE SE QUERÍA EVITAR.

Mikel
  #16 (permalink)  
Antiguo 19/04/2008, 18:46
Avatar de lucasan
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: Cali - Colombia
Mensajes: 1.144
Antigüedad: 16 años, 10 meses
Puntos: 59
Re: el pie se me sube arriba

Intentelo como lo puse arriba, sirve, aunque tiene un pequeño fallo en IE, pero mucho mas pequeño que el que están probando.
__________________
Plan Original Desarrollo Web
~$>sudo apt-get install -f
"Asi debería arreglarse todo en la vida"
  #17 (permalink)  
Antiguo 19/04/2008, 19:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: el pie se me sube arriba

Este hilo me está resultando el más confuso que recuerdo.

Es una cosa bastante más complicada de lo que parece conseguir que una página ocupe el 100%, tenga un pie que queda siempre abajo tenga la cantidad de contenido que tenga, y no salga el scroll hasta que sea necesario por el contenido, momento en el que el pie debe bajar acompañando al contenido y quedando igualmente abajo de la página haciendo tope.

Aunque parece tonto a simple vista, sólo hay que abrir un archivo html y empezar a probar respetando todas esas premisas para darse cuenta de que cuando no hay problemas por un lado los hay por el otro, y como de costumbre, la incompatibilidad de navegadores hace de las suyas.

Este es tu código, lucansan:

http://www.araudi.net/forosdelweb/lucasan.html

que como puedes ver, el pie no queda abajo. No sé si tú lo ves diferente que yo o no lo has probado, pero en FF no queda abajo y en IE6 saca un enorme scroll.

La respuesta a lo que el usuario pide y por lo que tanta gente pregunta, que es exactamente lo que detallo arriba, esta en este vínculo:

http://www.araudi.net/forosdelweb/pi...pre_abajo.html

Sólo hay que mirarlo con cualquier de los 3 navegadores citados y leer el código, o bien copiarlo para probar a meter más o menos contenido (contenido, no lo he probado nunca con iframes, embeds ni adaptaciones personales porque no estaba pensado para eso), y comprobar que hace exactamente lo que el usuario pedía, es decir, el pie siempre abajo haya el conteido que haya.

Espero haber aclarado este entuerto, que puede llevar a mucha gente a confusión.

Mikel.

Última edición por Mikmoro; 25/05/2008 a las 16:47
  #18 (permalink)  
Antiguo 20/04/2008, 10:29
Avatar de lucasan
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: Cali - Colombia
Mensajes: 1.144
Antigüedad: 16 años, 10 meses
Puntos: 59
Re: el pie se me sube arriba

Tienes razón, la memoria me falló y me faltaron unos detalles, pero por acá encontré el original, no lo recordaba http://ryanfait.com/sticky-footer/

Aunque veo que el tuyo ya trabaja y lo probé en varios navegadores, no se que es lo que dicen que falla.

Tu código en:

IE 6
IE7
FF2
Opera9
Safari para Winows

Perfecto en todos.

Gran aporte Mikmoro

Edito: Esta solución debería sugerirse para las FAQ's, porque si es un tema bien citado.
__________________
Plan Original Desarrollo Web
~$>sudo apt-get install -f
"Asi debería arreglarse todo en la vida"
  #19 (permalink)  
Antiguo 20/04/2008, 11:17
 
Fecha de Ingreso: abril-2008
Ubicación: -
Mensajes: 156
Antigüedad: 16 años
Puntos: 5
Re: el pie se me sube arriba

Buen aporte, perdonad pero malentendí la pregunta..
  #20 (permalink)  
Antiguo 20/04/2008, 11:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: el pie se me sube arriba

Me alegro de que esté aclarado.

Ahora sólo falta que el usuario que comenzó el hilo intente adaptarlo a su caso concreto, y eso ya será seguramente otra dura batalla con el código

Mikel.
  #21 (permalink)  
Antiguo 12/12/2009, 09:40
 
Fecha de Ingreso: mayo-2008
Ubicación: Barcelona
Mensajes: 249
Antigüedad: 15 años, 11 meses
Puntos: 1
Respuesta: el pie se me sube arriba

Mikmoro, primero de todo gracias por la explicación, sin duda es la mejor que he encontrado en la red. Dicho esto, tengo una pequeña duda.

Viendo el CSS de tu código, hay una cosa que no entiendo que significa.

Cita:
* html #contenedor {
height:100%;
}
Gracias
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 15:12.