Foros del Web » Creando para Internet » CSS »

Problema con div "contenedor"

Estas en el tema de Problema con div "contenedor" en el foro de CSS en Foros del Web. Saludos a todos y gracias de antemano por estar leyendo el post. Mi problema consiste en que tengo una web con varios divs pero son ...
  #1 (permalink)  
Antiguo 22/01/2010, 13:40
Avatar de Mahishasura  
Fecha de Ingreso: enero-2010
Ubicación: En las profundidades del cosmos
Mensajes: 58
Antigüedad: 7 años, 10 meses
Puntos: 4
Pregunta Problema con div "contenedor"

Saludos a todos y gracias de antemano por estar leyendo el post.
Mi problema consiste en que tengo una web con varios divs pero son dos con los que tengo problemas, el contenedor y el footer.

El div contenedor carga una página PHP (por medio de include) y el footer un mensaje "X". Cuando la página que carga tiene muy poco contenido, el div contenedor se escala de modo que sobra mucho espacio entre el footer y dicha capa. Lo que quiero es que sin importar cuanto contenido tenga esta div, siempre esté pegada con la parte superior del footer, pero el problema es que el footer queda pegado al bottom del navegador, pero cuando bajo el scrollbar queda arriba.
Lo que tengo es lo siguiente:

Código CSS:
Ver original
  1. #contenido {
  2.     position:relative;
  3.     left:50%;
  4.     width:1000px;
  5.     margin-left:-500px;
  6.     top: 125px;
  7.     max-width:980px;
  8.     background-image:url(../images/content_bg.png);
  9.     background-color:#E4E4E4;
  10.     background-position:center;
  11.     background-repeat:no-repeat;
  12.     padding-left:10px;
  13.     padding-right:10px;
  14.     padding-top:10px;
  15.     padding-bottom:20px;
  16. }
  17.  
  18. #footer {
  19.     position:absolute;
  20.     bottom:0px;
  21.     text-align:center;
  22.     width:90%;
  23.     margin-left:-45%;
  24.     left:50%;
  25.     height:20px;
  26.     color:#999999;
  27.     font-size: 12px;
  28.     font-family: Arial, Helvetica, sans-serif;
  29. }
La estructura de la página es esta (mas o menos):
Código HTML:
Ver original
  1. <div id="contenido">
  2.   <p>
  3. <?
  4. if($_GET['go'] == "home") { include("./sections/home.php"); }
  5. else { include ("./sections/home.php"); }  
  6. ?>
  7.   </p>
  8. </div>
  9. <div id="footer" align="center"><? echo $_foot ?></div>

Agradecería sugerencias, críticas, soluciones, etc :D
  #2 (permalink)  
Antiguo 22/01/2010, 15:54
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema con div "contenedor"

cito="el problema es que el footer queda pegado al bottom del navegador"

#footer {
position:absolute;
bottom:0px; /*tu footer irá subiendo a medida que aumentes este valor*/}

cito="el div contenedor se escala de modo que sobra mucho espacio entre el footer y dicha capa"

Yo no utilizaría position:absolute; para el footer, ya que con ello se quita al div del flujo normal del documento. Más bien, utilizaría un div contenedor para tus dos divs, "contenido" y "footer" respectivamete. Algo así:

<div id="contenedor">
<div id="contenido"> ... </div>
<div id="footer"> ... </div>
</div>


El problema está en:

#footer {
position:absolute;
bottom:0px;

text-align:center;
width:90%;
margin-left:-45%;
left:50%;
height:20px;
color:#999999;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}


quítalo ...

#footer {
text-align:center;
width:90%;
margin-left:-45%;
left:50%;
height:20px;
color:#999999;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}


... y maqueta con un contenedor (<div id="contenedor"> aquí el contenido, en tu caso los dos divs </div>)

cito="pero el problema es que el footer queda pegado al bottom del navegador, pero cuando bajo el scrollbar queda arriba."

Puedes mirar el código de este ejemplo de mikmoro.

Pruebalo y luego nos cuentas! Saludos!

Última edición por cristian_cena; 22/01/2010 a las 16:01
  #3 (permalink)  
Antiguo 22/01/2010, 17:04
Avatar de Mahishasura  
Fecha de Ingreso: enero-2010
Ubicación: En las profundidades del cosmos
Mensajes: 58
Antigüedad: 7 años, 10 meses
Puntos: 4
Respuesta: Problema con div "contenedor"

Muchas gracias cristian_cena, pero debo informar que no ha funcionado como quiero, pero de todas formas aproveché de maquetar la página con el div "contenedor" y la verdad es que ha quedado muy bien ordenado.

La solución que le di a este problema, fue darle un alto a una capa div que está en la página principal (la que se carga con include) que se muestra, de modo que quede "justo" en el bottom. Con esto cuando hay poco contenido, el alto de la capa div, será el justo para que no quede espacio en blanco.

Muchas gracias por la idea.
  #4 (permalink)  
Antiguo 23/01/2010, 13:35
 
Fecha de Ingreso: marzo-2009
Ubicación: Uruguay
Mensajes: 128
Antigüedad: 8 años, 9 meses
Puntos: 8
Respuesta: Problema con div "contenedor"

Deberías colocarle al footer clear:both, y el div del html por fuera de "contenido" :).

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 00:39.