Foros del Web » Creando para Internet » CSS »

Alto elástico no me funciona

Estas en el tema de Alto elástico no me funciona en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/04/2006, 09:57
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Alto elástico no me funciona

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)  
Antiguo 05/04/2006, 10:16
Rodolfo Israel
Invitado
 
Mensajes: n/a
Puntos:
quizas este articulo te sirva de algo:

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

Saludos.
  #3 (permalink)  
Antiguo 05/04/2006, 10:32
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
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.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #4 (permalink)  
Antiguo 05/04/2006, 10:59
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
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)  
Antiguo 05/04/2006, 12:08
Rodolfo Israel
Invitado
 
Mensajes: n/a
Puntos:
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.
  #6 (permalink)  
Antiguo 05/04/2006, 12:17
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
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.
  #7 (permalink)  
Antiguo 05/04/2006, 12:20
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
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
  #8 (permalink)  
Antiguo 05/04/2006, 13:51
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Bien tunait . A esta hora ya llevo bastante adelantado. Agregaré esas propiedades tal como dices.
  #9 (permalink)  
Antiguo 07/04/2006, 09:45
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
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.
  #10 (permalink)  
Antiguo 07/04/2006, 17:52
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Hola metacortex, ¿podrias poner el código xhtml tambien? así quizás veamos mejor el problema

  #11 (permalink)  
Antiguo 07/04/2006, 23:18
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
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 .
  #12 (permalink)  
Antiguo 08/04/2006, 07:45
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
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
  #13 (permalink)  
Antiguo 08/04/2006, 10:18
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
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.
  #14 (permalink)  
Antiguo 08/04/2006, 18:14
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
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
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 20:19.