Alto elástico no me funciona

metacortex · #1 (**permalink**) 05/04/2006, 08:57

Ya no sé qué hacer con esta página. Estoy maquetando sólo con CSS, todo iba bien hasta que me tropecé con este problema. Intento hacer que el alto de la página se modifique según vaya agregando contenido pero no lo he logrado. Aquí está la estructura de la misma:

El área color crema son capas inmóviles, esas quedan fijas. La parte inferior (Azul) debe pegarse abajo del div contenedor (Ya lo logré fijando valores para bottom), y la parte verde es la que variará el alto hacia abajo. Cuando le cambio el alto a esa parte central, sobrepasa el div contenedor y la idea es que esa parte inferior quede siempre abajo de todo. Aquí está el esquema de cómo está hecha (Son más divs -23 en total-, pero lo puse así para que la imagen no quedara tan alta):

Si alguien tiene la solución agradezco la respuesta.

Saludos.

#2 (**permalink**) 05/04/2006, 09:16

quizas este articulo te sirva de algo:

http://www.forosdelweb.com/showthrea...etado+perfecto

Saludos.

webosiris · #3 (**permalink**) 05/04/2006, 09:32

Cita:

Son más divs -23 en total-

ojo... eso me hace suponer que te contagiaste de divitis. Acordate que las capas no son tablas, y que por lo tanto no se deben estructurar igual.

metacortex · #4 (**permalink**) 05/04/2006, 09:59

Cita:

Iniciado por webosiris

ojo... eso me hace suponer que te contagiaste de divitis. Acordate que las capas no son tablas, y que por lo tanto no se deben estructurar igual.

Jejeje, es que trabajar con divs me ha resultado tan práctico. La cuestión es que ahora estoy atorado con este problemita.

Rodolfo Israel, el tema que linkeaste es muy interesante y además la segunda página (SolarDream) habla de este asunto. Según entendí hay que hacer 3 estructuras: El contenedor, y el contenido/footer dentro de éste:

Código:

<div id="container-page">
    <div id="container-content">Content</div>
    <div id="container-foot">Foot</div>
</div>

Intentaré hacerlo de esta manera

.

#5 (**permalink**) 05/04/2006, 11:08

de hecho ya probe eso pero lo que no he podido hacer es integrar ambos maquetados, bueno, ya lo hice parcialmente pero cuando logre hacer que funcione en IE en firefox el footer se monta con parte del contenido. No lo pude hacer trabajar en ambos navegadores, sigo en busca de la solucion pero no le he dedicado el tiempo necesario

Saludos.

tunait · #6 (**permalink**) 05/04/2006, 11:17

Holas!

meta, al contenedor verde asígnale un min-height del valor mínimo que deba tener en caso de cargar vacío y después le asignas un height: auto:

IExplorer se pasa el min-height por donde no corre el viento habitualmente así que habrás de darle un height para explorer, y luego si los contenidos superan al contenedor ya le aplica automáticamente el auto.

tunait · #7 (**permalink**) 05/04/2006, 11:20

Etsplicando un poco más....

si el contenedor verde se llama verde y está dentro de otro contenedor que se llama principal podrías pedirle ...

#verde{
height: 120px;
}
#principal > #verde{
min-height: 120px;
height: auto;
}
Explorer ignora el segundo porque no lo entiende

metacortex · #8 (**permalink**) 05/04/2006, 12:51

Bien tunait

. A esta hora ya llevo bastante adelantado. Agregaré esas propiedades tal como dices.

metacortex · #9 (**permalink**) 07/04/2006, 08:45

He estructurado los divs de esta forma (Por favor disculpen lo largo de la imagen):

Los estilos:

El Body:

body {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif
font-size: 10pt
text-align:left
color: #42462C
background-image: url(./Imagenes/back1.png)
margin: 0px
height:100%
}

El contenedor de página:

#contenido {
text-align: center
vertical-align: middle
margin-top: -250px
margin-left: -360px
position: absolute
top: 50%
left: 50%
width: 720px
height: auto !important
}

La capa de contenido:

#Tabla_01 {
position: absolute
padding-bottom: 40px
height: auto
}

El pie:

#pie {
width: 100%
bottom: 0 !important
height: 40px
}

(Lo del explorer pienso ajustarlo de último, por ahora estoy haciendo las pruebas con Firefox)

Miren cómo se ve la página cuando el contenido aumenta. Se desborda sin remedio:

Un detalle importante: Los divs que están encerrados en el contenedor #pie tienen posiciones absolutas con top y left definidos. Sé que ese es el problema, pero si los dejo "sueltos" se van para arriba sin hacer caso a que están contenidos por ese #pie. Webosiris me dijo que los divs no se gestionan al igual que las tablas, es verdad y ya tengo días estancado con esto. Lo curioso es que en Google no me ha salido ninguna solución que responda a esto. Quizás no he estado buscando con las palabras adecuadas.

Saludos.

kahlito · #10 (**permalink**) 07/04/2006, 16:52

Hola metacortex, ¿podrias poner el código xhtml tambien? así quizás veamos mejor el problema

metacortex · #11 (**permalink**) 07/04/2006, 22:18

Cita:

Iniciado por kahlito

Hola metacortex, ¿podrias poner el código xhtml tambien? así quizás veamos mejor el problema

Cómo no hermano; subí el archivo aquí. A esta hora aún estoy "peinando" el google pero nada todavía

.

tunait · #12 (**permalink**) 08/04/2006, 06:45

Cita:

Iniciado por metacortex

Sé que ese es el problema, pero si los dejo "sueltos" se van para arriba sin hacer caso a que están contenidos por ese #pie.

Hola meta

Para que las posiciones de uno o varios contenedores sean relativos al contenedor padre debes asignarle a éste (el padre) un posicionamiento de tipo relativo.

Igual, he estado dándole vueltas y vueltas a la maquetación tal y como la tienes y no le veo solución. Un contenedor con posicionamiento absoluto nunca podrá empujar a su contenedor padre ni al abuelo. Mientras el contenedor que quieras que crezca tenga un absolute los contenedores padre ni se inmutarán y serán desbordados aunque tengan asignados un height con auto y un !important.

Cuando finalmente encontré la fórmula para que crecieran ocurría que los bordes laterales no crecían al ser imágenes incrustadas, por lo tanto quedaban los bordes laterales cortados.

Tal como lo tienes está muy atado con hilos y te va a dar muchos quebraderos de cabeza, por no mencionar los bytes innecesarios contenidos en tanta imagen y el abuso del uso de imágenes incrustadas que no forman parte de los contenidos del documento, si no que son meras imágenes decorativas.

Me he permitido re-maquetarlo todo a ver si te sirve al menos de orientación para hacer lo que pretendes. El sentido semántico seguramente se puede mejorar; eso con paciencia y una caña lo puedes retocar.

Si tiens dudas sobre el por qué algo está de alguna manera me preguntas nomás

http://www.tunait.com/pruebas/meta/meta.asp

un saludillo

metacortex · #13 (**permalink**) 08/04/2006, 09:18

Caramba tunait, qué clase magistral me has dado hoy amiga. Tengo ya un rato viendo cada código tanto del HTML como del CSS que tan pulcramente has elaborado y no puedo más que sentirme pequeñito ante lo que queda por aprender. Esto derrumba todo lo que hasta ahora he hecho en cuanto a la página pero me siento muy bien al haber descubierto de repente y por medio de tu gentileza una perspectiva tan amplia para proceder en tal sentido. No tienes ni idea de lo agradecido que me siento con lo que hiciste hoy, por el tiempo invertido y por compartir tus conocimientos de forma tan desprendida.

Cita:

Iniciado por tunait

El sentido semántico seguramente se puede mejorar; eso con paciencia y una caña lo puedes retocar.

No sólo retocar. Aprovecharé esta lección para reconstruir todo el trabajo desde cero.

Cita:

Iniciado por tunait

Si tiens dudas sobre el por qué algo está de alguna manera me preguntas nomás

Sólo un detalle que pude observar: ¿Cómo fue posible que el contenedor se pudiera centrar si no se le definió una alineación? (A mí me costó un mundo

).

Igualmente agradezco mucho a los amigos Rodolfo Israel, Webosiris y Kahlito por su acertada participación en este tema. Tengan buen día, que el mío comenzó con muy buen pie.

Saludos.

tunait · #14 (**permalink**) 08/04/2006, 17:14

Caramba, gracias por los halagos ... estoy que no 'cabo' en la silla

jé...

Cita:

Iniciado por metacortex

Sólo un detalle que pude observar: ¿Cómo fue posible que el contenedor se pudiera centrar si no se le definió una alineación? (A mí me costó un mundo

).

Ah, es sencillo, para centrar un elemento de bloque dentro de su contenedor (aunque el contenedor sea e body) basta con asignarle un margin-left y margin-right con un valor de auto

Oye, pues me alegra mucho si te ha ayudado el ejemplo que puse. Cualquier duda me preguntas nomás

Un saludillo