Foros del Web » Creando para Internet » CSS »

altura div con position:absolute

Estas en el tema de altura div con position:absolute en el foro de CSS en Foros del Web. Hola, Tengo un problema a la hora de ajustar la altura de un div. Tengo el siguiente esquema Código: <div id="content"> <div class="content-left">...</div> <div class="content-right">...</div> ...
  #1 (permalink)  
Antiguo 09/11/2010, 05:05
 
Fecha de Ingreso: septiembre-2003
Mensajes: 68
Antigüedad: 20 años, 6 meses
Puntos: 0
altura div con position:absolute

Hola,

Tengo un problema a la hora de ajustar la altura de un div.

Tengo el siguiente esquema

Código:
<div id="content">
<div class="content-left">...</div>
<div class="content-right">...</div>
<div class="content-bottom2">
<div class="mask">
<ul>
<li><img src="images/..." /><h2>...</h2>
<li><img src="images/..." /><h2>...</h2>
<li><img src="images/..." /><h2>...</h2>
<li><img src="images/..." /><h2>...</h2>
<li><img src="images/..." /><h2>...</h2>
</ul>
</div>

</div>
<div class="clearfix"></div> 
</div>
<div class="footer">...</div>
Los estilos de los "content-" són float:left, pero el problema lo tengo con la altura de la div "content-bottom2" que no se me ajusta la altura de la div "mask". Ésta está con posición absoluta respecto a content-bottom2. La altura de "content-bottom2" se tiene que adaptar a la de "mask" ya que los "h2" de la mask pueden ser o muy largos o muy cortos. La div "mask" mediante jquery se moverá a derecha o izquierda (para passar fotos con textos).
Código:
.content-bottom2
{
	float:left;
	width:720px;
	margin-top:30px;
	margin-left:250px;	
	overflow: hidden; 
	white-space:nowrap;
	position:relative;
	background-color:#900;
}
.mask
{
	position:absolute;
	top:0px;
	left:-250px;
}
Si alguien puede ayudarme se lo agredecería...

Muchas gràcias de antemano!
  #2 (permalink)  
Antiguo 09/11/2010, 09:28
Avatar de Paramericano  
Fecha de Ingreso: agosto-2010
Mensajes: 137
Antigüedad: 13 años, 8 meses
Puntos: 8
Respuesta: altura div con position:absolute

Creo que éste es el gran agujero de CSS.
Para ser CSS tal como es, ha tenido que renunciar a las alturas autoajustables de los floats y de los positions.
Por lo que veo sólo se puede autoajustar con overflow:hidden, desde el elemento contenedor (pero eso tú ya lo tienes).
En todo lo demás, hay que hacerlo manualmente.

Mientras nadie dé la solución, yo de momento veo éste tema precisamente como el gran sacrificado para que todo lo demás vaya de maravilla.
  #3 (permalink)  
Antiguo 09/11/2010, 09:49
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 16 años, 2 meses
Puntos: 53
Respuesta: altura div con position:absolute

en vez de usar height, usa min-height, y overflow:hidden, eso hará que se ajuste, en ie6 puedes usar de frente, height y overflow:visible
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #4 (permalink)  
Antiguo 09/11/2010, 10:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: altura div con position:absolute

Deje de usar su desconocimiento como patrón y a este foro de css como púlpito para propagar sus falacias. No se si serán fruto de un afán desmesurado por hacerse notar, meros trolleos que no hacen ya ni pizca de gracia o símplemente que no tiene ni idea de lo que habla.
Aunque intuyo que es una mezcla de todo eso y mucho más.

Antes de seguir intoxicando y confundiendo a los usuarios y visitantes de este foro y tirando por los suelos la calidad que siempre tuvo el de css, debería informarse y formarse algo más.
Comience por el modelo de cajas en que se basa tanto el (x)html y el css.
Modelo que es el que hace que cualquier elemento (etiqueta) tenga unas propiedades inherentes e intrínsecas a él, y por lo tanto un comportamiento en el documento que afecta a él mismo y al resto.
Y qué conlleva asociado para él mismo y para el resto el cambiar algún valor "por defecto" a otros de los posibles.
Cuestiones como cuándo y qué supone sacar un elemento del flujo del documento y cómo afecta al mismo y al resto veo que le son totalmente desconocidas.

Todo lo anterior por burradas como:
Cita:
Para ser CSS tal como es, ha tenido que renunciar a las alturas autoajustables de los floats y de los positions.
...
Mientras nadie dé la solución, yo de momento veo éste tema precisamente como el gran sacrificado para que todo lo demás vaya de maravilla
Y otras aún mayores que anda propagando.

Oblidat:
Tanto posicionar de forma absoluta un elemento como el flotarlo, significan que salen del flujo normal de documento y eso afecta en unos casos a todos los elementos (position) y el otro a su caja padre que se comportan en algunos aspectos como si esos elementos no existiesen.
Así el float no hará crecer a su contenedor y al absolute no lo "ven" el resto y se comportan como si no existiese.

Para todo lo derivado de los floats ya le han indicado una posible solución. Puede ampliar conocimientos buscando cómo "limpiar float"

Para lo concerniente a "position" y sus posibles valores y qué atañe, ver aquí

Compleméntese con las 2 guías de migración de Mikmoro que están en la parte superior de este foro.
  #5 (permalink)  
Antiguo 09/11/2010, 15:29
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 9 meses
Puntos: 361
Respuesta: altura div con position:absolute

Cita:
Iniciado por kseso? Ver Mensaje
Deje de usar su desconocimiento como patrón y a este foro de css como púlpito para propagar sus falacias. No se si serán fruto de un afán desmesurado por hacerse notar, meros trolleos que no hacen ya ni pizca de gracia o símplemente que no tiene ni idea de lo que habla.
Aunque intuyo que es una mezcla de todo eso y mucho más.

Antes de seguir intoxicando y confundiendo a los usuarios y visitantes de este foro y tirando por los suelos la calidad que siempre tuvo el de css, debería informarse y formarse algo más.
Comience por el modelo de cajas en que se basa tanto el (x)html y el css.
Modelo que es el que hace que cualquier elemento (etiqueta) tenga unas propiedades inherentes e intrínsecas a él, y por lo tanto un comportamiento en el documento que afecta a él mismo y al resto.
Y qué conlleva asociado para él mismo y para el resto el cambiar algún valor "por defecto" a otros de los posibles.
Cuestiones como cuándo y qué supone sacar un elemento del flujo del documento y cómo afecta al mismo y al resto veo que le son totalmente desconocidas.

Todo lo anterior por burradas como:

Y otras aún mayores que anda propagando.


  #6 (permalink)  
Antiguo 09/11/2010, 15:33
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 10 meses
Puntos: 177
Respuesta: altura div con position:absolute

Cita:
Iniciado por kseso? Ver Mensaje
Deje de usar su desconocimiento como patrón y a este foro de css como púlpito para propagar sus falacias. No se si serán fruto de un afán desmesurado por hacerse notar, meros trolleos que no hacen ya ni pizca de gracia o símplemente que no tiene ni idea de lo que habla.
Aunque intuyo que es una mezcla de todo eso y mucho más.

Antes de seguir intoxicando y confundiendo a los usuarios y visitantes de este foro y tirando por los suelos la calidad que siempre tuvo el de css, debería informarse y formarse algo más.
Comience por el modelo de cajas en que se basa tanto el (x)html y el css.
Modelo que es el que hace que cualquier elemento (etiqueta) tenga unas propiedades inherentes e intrínsecas a él, y por lo tanto un comportamiento en el documento que afecta a él mismo y al resto.
Y qué conlleva asociado para él mismo y para el resto el cambiar algún valor "por defecto" a otros de los posibles.
Cuestiones como cuándo y qué supone sacar un elemento del flujo del documento y cómo afecta al mismo y al resto veo que le son totalmente desconocidas.

Todo lo anterior por burradas como:

Y otras aún mayores que anda propagando.
Sin palabras...

Cita:
Tu debes de esparcir algo de Karma a otros usuarios antes de darle otra vez a kseso?.
FUCK!
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #7 (permalink)  
Antiguo 09/11/2010, 15:35
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 16 años, 2 meses
Puntos: 53
Respuesta: altura div con position:absolute



Say no more...
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #8 (permalink)  
Antiguo 10/11/2010, 06:14
 
Fecha de Ingreso: septiembre-2003
Mensajes: 68
Antigüedad: 20 años, 6 meses
Puntos: 0
Respuesta: altura div con position:absolute

Gracias por las respuestas!
Al final lo he solucionado con jquery canviando la altura del "content-bottom2" según la altura de "mask", que no sé si es la manera más óptima, pero de momento me funciona.
  #9 (permalink)  
Antiguo 10/11/2010, 09:37
Avatar de Paramericano  
Fecha de Ingreso: agosto-2010
Mensajes: 137
Antigüedad: 13 años, 8 meses
Puntos: 8
Respuesta: altura div con position:absolute

Claro, con javascript, porque con CSS es imposible.

Jajaja, ¿qué estoy diciendo? Pobre de mí, lo que me espera...
Pero intento ser sincero. Yo quiero como vosotros que el diseño web sea tan fácil com sea posible, pero siendo realista y reconocimiento las limitaciones.
Primero hay que reconocer las limitaciones para luego poderlas superar.
Y si sólo puedes hablar bien de una cosa eso suena a tiranía.

Quizás a veces me precipito en responder, pero todos necesitamos una dosis de humildad y de realismo: no todo es un camino de flores en el lenguaje CSS. Precisamente estamos aquí para hacer que sea mejor.
  #10 (permalink)  
Antiguo 10/11/2010, 09:43
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 10 meses
Puntos: 177
Respuesta: altura div con position:absolute

Cita:
Iniciado por Paramericano Ver Mensaje
Claro, con javascript, porque con CSS es imposible.

Jajaja, ¿qué estoy diciendo? Pobre de mí, lo que me espera...
Pero intento ser sincero. Yo quiero como vosotros que el diseño web sea tan fácil com sea posible, pero siendo realista y reconocimiento las limitaciones.
Primero hay que reconocer las limitaciones para luego poderlas superar.
Y si sólo puedes hablar bien de una cosa eso suena a tiranía.

Quizás a veces me precipito en responder, pero todos necesitamos una dosis de humildad y de realismo: no todo es un camino de flores en el lenguaje CSS. Precisamente estamos aquí para hacer que sea mejor.
sinceramente, aburrís.
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #11 (permalink)  
Antiguo 10/11/2010, 12:05
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 16 años, 2 meses
Puntos: 53
Respuesta: altura div con position:absolute

Cita:
Iniciado por Paramericano Ver Mensaje
Claro, con javascript, porque con CSS es imposible.

Jajaja, ¿qué estoy diciendo? Pobre de mí, lo que me espera...
Pero intento ser sincero. Yo quiero como vosotros que el diseño web sea tan fácil com sea posible, pero siendo realista y reconocimiento las limitaciones.
Primero hay que reconocer las limitaciones para luego poderlas superar.
Y si sólo puedes hablar bien de una cosa eso suena a tiranía.

Quizás a veces me precipito en responder, pero todos necesitamos una dosis de humildad y de realismo: no todo es un camino de flores en el lenguaje CSS. Precisamente estamos aquí para hacer que sea mejor.
Se han dado varias soluciones que funcionan es que demonios no lees lo que ponen?
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.

Etiquetas: altura
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 19:45.