Foros del Web » Creando para Internet » CSS »

Problema con footer

Estas en el tema de Problema con footer en el foro de CSS en Foros del Web. Hola gente Tengo un problema con un footer, al estar la web maximizada o con tamaño superior a 1024x768 todo bien pero cuando la achico, ...
  #1 (permalink)  
Antiguo 31/03/2009, 13:46
Avatar de Joni2Back  
Fecha de Ingreso: marzo-2009
Mensajes: 146
Antigüedad: 8 años, 8 meses
Puntos: 1
Pregunta Problema con footer

Hola gente
Tengo un problema con un footer, al estar la web maximizada o con tamaño superior a 1024x768 todo bien
pero cuando la achico, el footer tambien se achica como si estuviera a un 80% de ancho, probe de todo pero nada lo resuelve, estare haciendo algo mal?

Aca va una imagen del problema y el codigo css+html
radiobot.com.ar/images/wtf.jpg


Código HTML:
Ver original
  1. <div id="general">
  2.   <div id="header"></div>
  3.   <div id="contenido"> </div>
  4.   <div id="footer"> </div>
  5. </div>
Código CSS:
Ver original
  1. html, body, #general {
  2.     min-height: 100%;
  3.     width: auto;
  4.     height: 100%;
  5.     margin:0;
  6.     padding: 0; }
  7.    
  8.    
  9. body {
  10.     text-align:center;
  11.     background: #D9F9FF url('../images/bg.png');
  12.     background-position:top center;
  13.     background-repeat: repeat-x;
  14.     font-family:'Palatino Linotype'; }
  15.    
  16.    
  17. html>body, html>body #general { height: auto; }
  18.  
  19.  
  20.  
  21. #general {
  22.     position: absolute;
  23.     width:100%;
  24.     top: 0;
  25.     left: 0;
  26.     text-align:left; }
  27.  
  28. #header {
  29.     background:  url('../images/header.png');
  30.     background-position:top right;
  31.     background-repeat: no-repeat;
  32.     margin:0 auto 0 auto;
  33.     width:850px;
  34.     height:165px;}
  35.    
  36. #contenido {
  37.     width: 920px;
  38.     margin-bottom: 11em;  }
  39.    
  40.    
  41. #footer {
  42.     position: absolute;
  43.     bottom: 0;
  44.     width: 100%;
  45.     height:180px;
  46.     color:#FFFFFF;
  47.     background: url('../images/footer.gif');
  48.     background-position:bottom center;
  49.     background-repeat: repeat-x;
  50.     margin: 0px 0px 0px 0px ; }
  #2 (permalink)  
Antiguo 31/03/2009, 14:15
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Problema con footer

?¿ e probado tu código y anda bien o al menos lo que as posteado aquí no tiene problemas salvo por el ancho del contenido y el header

aun así yo no veo ese problema que indicas o en mi máquina no se presento... habría que ver en tu sitio que mas tienes que pueda afectar
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 31/03/2009, 16:03
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Problema con footer

ya vi tu sitio y se ve correctamente te dejo screenshot de como lo visualizo el tamaño que use fue inferior a 800x600 y en ningun momento me causo el efecto que te sale ati, lo e revisado en dos maquinas diferentes por si las dudas y en ninguna vi ese error

http://ag.wsimarketing.info/ForosDelWeb/000.jpg

trata de revisarlo en otro lado, limpia tus cookies y tus temporales y veamos si tienes suerte
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #4 (permalink)  
Antiguo 31/03/2009, 20:47
Avatar de Joni2Back  
Fecha de Ingreso: marzo-2009
Mensajes: 146
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: Problema con footer

Cita:
Iniciado por Ag666 Ver Mensaje
ya vi tu sitio y se ve correctamente te dejo screenshot de como lo visualizo el tamaño que use fue inferior a 800x600 y en ningun momento me causo el efecto que te sale ati, lo e revisado en dos maquinas diferentes por si las dudas y en ninguna vi ese error



trata de revisarlo en otro lado, limpia tus cookies y tus temporales y veamos si tienes suerte
claro, pero que pasa si corres la barra de scroll horizontal toda hacia la derecha!
ahi aparece el problema
  #5 (permalink)  
Antiguo 05/04/2009, 05:35
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Problema con footer

o tío disculpa por tan larga ausencia, hay mucho trabajo... ya veo que sigues con tu problema y la verdad no se por que se origina.

lo que podemos hacer para cubrir la falla es colocar un spacer (gif transparente de 1x1) con un ancho de 920px ya que es en ese punto donde comienza a generar ese espacio

te aclaro que no es problema con tu código... para que no estes con incertidumbre

si gustas puedes hacer una prueba introducinedo solo dos capas como por ejemplo:

Código HTML:
<div style="background:#000099; width:700px;">Colocar aquí el contenido de la nueva etiqueta Div</div>
<div style="background:#cccccc; width:100%;;">Colocar aquí el contenido de la nueva etiqueta Div</div> 
si las visualizas en tu explorador cuando pones la pantalla en menos de 700px la capa que esta al 100% se mira mal ya que toma el 100% de la pantalla y no los 700px que requiere
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #6 (permalink)  
Antiguo 06/04/2009, 15:56
Avatar de Joni2Back  
Fecha de Ingreso: marzo-2009
Mensajes: 146
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: Problema con footer

Cita:
Iniciado por Ag666 Ver Mensaje
o tío disculpa por tan larga ausencia, hay mucho trabajo... ya veo que sigues con tu problema y la verdad no se por que se origina.

lo que podemos hacer para cubrir la falla es colocar un spacer (gif transparente de 1x1) con un ancho de 920px ya que es en ese punto donde comienza a generar ese espacio

te aclaro que no es problema con tu código... para que no estes con incertidumbre

si gustas puedes hacer una prueba introducinedo solo dos capas como por ejemplo:

Código HTML:
<div style="background:#000099; width:700px;">Colocar aquí el contenido de la nueva etiqueta Div</div>
<div style="background:#cccccc; width:100%;;">Colocar aquí el contenido de la nueva etiqueta Div</div> 
si las visualizas en tu explorador cuando pones la pantalla en menos de 700px la capa que esta al 100% se mira mal ya que toma el 100% de la pantalla y no los 700px que requiere

gracias por contestar, la verdad que tambien acabo de probar lo que me dijiste y sigue el problema...... es rarisimo
  #7 (permalink)  
Antiguo 06/04/2009, 16:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con footer

Tienes dos elementos cuyo tamaño está en px (header y contenido), y el footer que está en porcentaje (100%).
Cuando se encoje la ventana, mientras los bloques en px seguirán midiendo siempre lo mismo y forzarán la aparición del scroll horizontal, el footer medirá el 100% del área de visión, lo que hará que quede un espacio vacío más allá del área de visión (al usar el scroll).
Es un comportamiento normal, por lo que no debes en general mezclar bloques "hermanos" con tamaño fijo en px con otros en pocentaje.
Pon 920px a tu footer y el problema desaparecerá (supongo).
  #8 (permalink)  
Antiguo 06/04/2009, 18:01
Avatar de Joni2Back  
Fecha de Ingreso: marzo-2009
Mensajes: 146
Antigüedad: 8 años, 8 meses
Puntos: 1
Pregunta Respuesta: Problema con footer

Cita:
Iniciado por Mikmoro Ver Mensaje
Tienes dos elementos cuyo tamaño está en px (header y contenido), y el footer que está en porcentaje (100%).
Cuando se encoje la ventana, mientras los bloques en px seguirán midiendo siempre lo mismo y forzarán la aparición del scroll horizontal, el footer medirá el 100% del área de visión, lo que hará que quede un espacio vacío más allá del área de visión (al usar el scroll).
Es un comportamiento normal, por lo que no debes en general mezclar bloques "hermanos" con tamaño fijo en px con otros en pocentaje.
Pon 920px a tu footer y el problema desaparecerá (supongo).

ya probe lo que me dijiste de probar con 920px pero no es lo que busco, ya que el footer se repite en x y tiene que ocupar el total de la pagina

tambien probe de sacar todas las medidas en px y poner todo a 100% pero sigue el mismo problema, la verdad que es rarisimo
  #9 (permalink)  
Antiguo 06/04/2009, 19:20
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: Problema con footer

Prueba a usar min-widht:920px.

Si la pantalla donde estén viendo tu página es de resolución menor a 1024, entonces la división llegará hasta 920px y no se achicará, sin embargo tendrás que hacer scroll para poder ver el total de su contenido; si por el contrario, la resolución del monitor de tu usuario es igual o mayor a 1024, entonces esa división ocupará todo el espacio de ancho en esa pantalla.

Código:
footer {
position: absolute;
bottom: 0;
width: 100%;
min-width: 920px;
height:180px;
color:#FFFFFF;
background: url('../images/footer.gif');
background-position:bottom center;
background-repeat: repeat-x;
margin: 0px 0px 0px 0px ; }
Es así como debe ser y es casi lo mismo que te explico Mikmoro.
__________________
Al final del día hablar es gratis, codificar no lo es
  #10 (permalink)  
Antiguo 07/04/2009, 00:45
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con footer

Si no podemos ver tus pruebas no podemos saber si hay algo que no estás haciendo bien.
  #11 (permalink)  
Antiguo 07/04/2009, 17:56
Avatar de Joni2Back  
Fecha de Ingreso: marzo-2009
Mensajes: 146
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: Problema con footer

Cita:
Iniciado por baccxus Ver Mensaje
Prueba a usar min-widht:920px.

Si la pantalla donde estén viendo tu página es de resolución menor a 1024, entonces la división llegará hasta 920px y no se achicará, sin embargo tendrás que hacer scroll para poder ver el total de su contenido; si por el contrario, la resolución del monitor de tu usuario es igual o mayor a 1024, entonces esa división ocupará todo el espacio de ancho en esa pantalla.

Código:
footer {
position: absolute;
bottom: 0;
width: 100%;
min-width: 920px;
height:180px;
color:#FFFFFF;
background: url('../images/footer.gif');
background-position:bottom center;
background-repeat: repeat-x;
margin: 0px 0px 0px 0px ; }
Es así como debe ser y es casi lo mismo que te explico Mikmoro.

gracias! con el min-width en el body lo pude resolver
para firefox/safari/ie7 pero no para ie6

hay algun parametro para hacer crossbrowser en este caso?
  #12 (permalink)  
Antiguo 07/04/2009, 18:17
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Respuesta: Problema con footer

Javascript y la librería IE7, algo que personalmente NO RECOMIENDO pues hace lenta la carga en tu página, y me hace cuestionarte SI VALE LA PENA usarlo o sería mejor RECOMENDAR al usuario a que se cambie de navegador.

Saludos
__________________
Al final del día hablar es gratis, codificar no lo es
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 08:06.