Foros del Web » Creando para Internet » CSS »

Problemas de height

Estas en el tema de Problemas de height en el foro de CSS en Foros del Web. Saludos. Tengo una web que no me esta creciendo en el height cuando el contenido es mas grande, eso que hablan de los div padres ...
  #1 (permalink)  
Antiguo 11/05/2009, 16:44
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Problemas de height

Saludos.

Tengo una web que no me esta creciendo en el height cuando el contenido es mas grande, eso que hablan de los div padres y esas cosas. Generalmente uso el mismo sistema de armar mis web y todo anda normal, pero ahora no se que pasa que no crece el div central con el contenido.

La estructura va asi:
container= contiene todo lo que hay en la página
header= tiene tamaño definido y es la cabecera de mi web
content= aqui va el contenido central de la página, y es el que me esta dando problemas
footer= el pie de página.

el preview de la página se ve aqui, el codigo va abajo.

Código CSS:
Ver original
  1. #container{
  2.     position:relative;
  3.     width:800px;
  4.     padding:0;
  5.     margin:0 auto;
  6.     overflow:auto;
  7. }
  8. #header{
  9.     position:relative;
  10.     width:799px;
  11.     height:200px;
  12. }
  13. #title{
  14.     position:relative;
  15.     background-image:url(../images/bg-title.jpg);
  16.     background-repeat:repeat;
  17.     height:67px;
  18.     width:799px;
  19.     line-height:120px;
  20. }
  21. #menu{
  22.     position:relative;
  23.     background-image:url(../images/bg-menu.jpg);
  24.     height:51px;}
  25. #content{
  26.     position:relative;
  27.     width:799px;
  28.     height:100%;
  29. }
  30. #box-txt-left{
  31.     position:relative;
  32.     background-color:#fff;
  33.     width:449px;
  34.     top:50px;
  35.     left:50px;
  36.     -moz-border-radius: 10px 10px 10px 10px;
  37.     -webkit-border-radius:10px 10px 10px 10px;
  38.     -ms-border-radius:10px 10px 10px 10px;
  39. }
  40. #footer{
  41.     position:relative;
  42.     background-image:url(../images/bg-footer.jpg);
  43.     background-repeat:repeat;
  44.     width:799px;
  45.     height:47px;
  46. }

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css/txt-style.css" type="text/css" />
<link rel="stylesheet" href="css/div-style.css" type="text/css" />
</head>

<body>
<div id="container">
	<div id="header"><div id="title"><img src="images/title.gif" alt="Title" width="431" height="33" style="margin-top:15px;" /></div>
	</div>
    <div class="menu" id="menu">
      <p><a href="#">ABOUT US</a> | <a href="#">PHOTO GALLERIES</a> | <a href="#">DONATIONS</a> | <a href="#">SEMINARS &amp; 			            CONFERENCES</a> | <a href="#">LEADERS TRAINING COURSES</a></p>
    </div>
    <div id="content">
    <div id="box-txt-left">
      <p><strong>Welcome to our  website!&nbsp; </strong>We exist as a Christ  centered ministry to minister and impart the love of Father God into the hearts  of people through leadership training, seminars, retreats, conferences,  crusades, and social outreach. </p>
      <p>The passion of this ministry is to release into the lives of men  and women the knowledge that Father God loves them and His love is everlasting  without conditions.&nbsp; Imparting into them the absolute truth that they are  valued and God holds them close to His heart causing the sick to be healed, the  bound to be set free and the broken hearted to be restored.&nbsp;&nbsp; </p>
      <p>We desire to ignite a passion  for Father’s love in local leaders and pastors by building relationships and  serving them to help in the ministry of receiving love and giving it away.</p>
    </div>
    
    </div>
<div id="footer"></div>
</div>
</body>
</html> 
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #2 (permalink)  
Antiguo 11/05/2009, 17:02
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problemas de height

Un vistazo rápido sin estudiar tu código y con firebug en tu página:
Si te crece #content pero #footer se superpone a él. Si añades un margin-top a #footer lo verás
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 11/05/2009, 17:03
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Problemas de height

tienes ese problema por que el contenedor de texto es relativo, prueba a dejarlo así:

Código:
#box-txt-left{
	padding:50px 0 0 50px;/*o quiza margin*/
    background-color:#fff;
    width:449px;
    height:auto;overflow:auto;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius:10px 10px 10px 10px;
    -ms-border-radius:10px 10px 10px 10px;
}
Edito:choque con K?
__________________
WFC
codigo82

Última edición por willyfc; 11/05/2009 a las 17:08
  #4 (permalink)  
Antiguo 11/05/2009, 17:11
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Pregunta Respuesta: Problemas de height

Cita:
Iniciado por kseso? Ver Mensaje
Si te crece #content pero #footer se superpone a él. Si añades un margin-top a #footer lo verás
Cierto

Cita:
tienes ese problema por que el contenedor de texto es relativo
Si, asi si funciona como debe. Dime, llevo poco en css, no se supone que los div, para que sigan el flujo de la página deben de ir en position:relative? De ahi que todo lo pongo con relative, para ir con el flujo de la página. Que me puedes decir al respecto.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #5 (permalink)  
Antiguo 11/05/2009, 17:13
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Problemas de height

no, no necesariamente, hay ocasiones para utilizarlos y creo que este no es el caso. hasta donde lo vi ninguno debería o no tiene por que ser relativo.
__________________
WFC
codigo82
  #6 (permalink)  
Antiguo 11/05/2009, 17:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problemas de height

No es por ser relativo.
Estás sacando del flujo del html el #box-txt-left al marcarle una posición con top y left. Si los suprimes te irá a su posición "natural".

Como comentario, gVenom:
Veo que eres muy reiterativo al declarar a todos los div "position: relative". Si recuerdas el tema de la "herencia" en css verás que te puedes ahorrar muchas declaraciones redundantes e innecesarias.

Un saludo

Edito: esto comencé a escribirlo a continuación del primer comentario de Willyfc
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 11/05/2009, 17:21
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Problemas de height

Cita:
Iniciado por kseso? Ver Mensaje
Estás sacando del flujo del html el #box-txt-left al marcarle una posición con top y left. Si los suprimes te irá a su posición "natural".
Ahh, eso me quedo muy claro

Cita:
C
Veo que eres muy reiterativo al declarar a todos los div "position: relative". Si recuerdas el tema de la "herencia" en css verás que te puedes ahorrar muchas declaraciones redundantes e innecesarias.
y pues de ahi salio mi otra pregunta sobre los flujos, pero creo que ya les comprendí mejor el punto. Por lo menos ya avance de poner todo en position:absolute a ponerlos en relative , lo proximo será usarlos cuando se debe.

Gracias señores. Que tengan un buen dia.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #8 (permalink)  
Antiguo 11/05/2009, 17:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problemas de height

gVenom ¿te he comentado alguna vez de lo bien "explicadito" que tiene Mikmoro las propiedades y características de las distintas "position" en su guía de migración?

Ya me extraña que se me haya pasado
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 11/05/2009, 17:34
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Problemas de height

Yo tengo las dos guias de Mik, gracias a eso estoy aqui preguntando en css y no en html (con tablas)
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
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 04:58.