Problema con footer

[Joni2Back]

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:

<div id="general">
  <div id="header"></div>
  <div id="contenido"> </div>
  <div id="footer"> </div>
</div>
 

Código CSS:

html, body, #general {
    min-height: 100%; 
    width: auto;
    height: 100%; 
    margin:0;
    padding: 0; }
    
    
body {
    text-align:center;
    background: #D9F9FF url('../images/bg.png');
    background-position:top center;
    background-repeat: repeat-x;
    font-family:'Palatino Linotype'; }
    
    
html>body, html>body #general { height: auto; }
 
 
 
#general {
    position: absolute;
    width:100%;
    top: 0;
    left: 0;
    text-align:left; }
 
#header {
    background:  url('../images/header.png');
    background-position:top right;
    background-repeat: no-repeat;
    margin:0 auto 0 auto;
    width:850px;
    height:165px;}
    
#contenido {
    width: 920px;
    margin-bottom: 11em;  } 
    
    
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height:180px;
    color:#FFFFFF;
    background: url('../images/footer.gif');
    background-position:bottom center;
    background-repeat: repeat-x;
    margin: 0px 0px 0px 0px ; }
 

[ArturoGallegos]

?¿ 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

[ArturoGallegos]

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

[Joni2Back]

Iniciado por Ag666

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

[ArturoGallegos]

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

[Joni2Back]

Iniciado por Ag666

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

[Mikmoro]

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).

[Joni2Back]

Iniciado por Mikmoro

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

[baccxus]

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.

[Mikmoro]

Si no podemos ver tus pruebas no podemos saber si hay algo que no estás haciendo bien.

[Joni2Back]

Iniciado por baccxus

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?

[baccxus]

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