Problemas de height

gVenom · #1 (**permalink**) 11/05/2009, 15:44

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#container{
    position:relative;
    width:800px;
    padding:0;
    margin:0 auto;
    overflow:auto;
}
#header{
    position:relative;
    width:799px;
    height:200px;
}
#title{
    position:relative;
    background-image:url(../images/bg-title.jpg);
    background-repeat:repeat;
    height:67px;
    width:799px;
    line-height:120px;
}
#menu{
    position:relative;
    background-image:url(../images/bg-menu.jpg);
    height:51px;}
#content{
    position:relative;
    width:799px;
    height:100&#37;;
}
#box-txt-left{
    position:relative;
    background-color:#fff;
    width:449px;
    top:50px;
    left:50px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius:10px 10px 10px 10px;
    -ms-border-radius:10px 10px 10px 10px;
}
#footer{
    position:relative;
    background-image:url(../images/bg-footer.jpg);
    background-repeat:repeat;
    width:799px;
    height:47px;
}

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>

kseso? · #2 (**permalink**) 11/05/2009, 16:02

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

willyfc · #3 (**permalink**) 11/05/2009, 16:03

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?

gVenom · #4 (**permalink**) 11/05/2009, 16:11

Cita:

Iniciado por kseso?

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.

willyfc · #5 (**permalink**) 11/05/2009, 16:13

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.

kseso? · #6 (**permalink**) 11/05/2009, 16:13

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

gVenom · #7 (**permalink**) 11/05/2009, 16:21

Cita:

Iniciado por kseso?

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.

kseso? · #8 (**permalink**) 11/05/2009, 16:30

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

gVenom · #9 (**permalink**) 11/05/2009, 16:34

Yo tengo las dos guias de Mik, gracias a eso estoy aqui preguntando en css y no en html (con tablas)