Comunidad de diseño web y desarrollo en internet online

superponer divs con float y que funcione en explorer

Citar            
MensajeEscrito el 26 Ene 2010 01:12 pm
Hola, necesitaría ayuda en lo siguiente:
Tengo un diseño en el que hay dos divs que se deben superponer. Lo he he conseguido haciendo flotar uno de ellos y el otro no. Todo se ve perfecto en Safari y firefox. Pero en Explorer no consigo que se superpongan. He estado probando con display: inline; pero no me funciona. ¿Alguien me podría ayudar? Está colgado aquí. www.domomedia.com/clientesdomo/apamontealto

Por lamarula

7 de clabLevel



 

safari
Citar            
MensajeEscrito el 26 Ene 2010 05:53 pm
No alcanzo a comprender tus intenciones (qué quieres hacer exactamente) y la página que enlaza tampoco me despeja dudas.
Pero ya que hablas de la propiedad float, te resultará de ayuda este artículo de SmashingMagazine sobre el "flotado".
Aunque creo que lo que necesitas más bien es utilizar "position" (relative y absolute) junto a márgenes para lograr superponer una caja sobre otra.

Saludos

Por DvillB

118 de clabLevel



 

firefox
Citar            
MensajeEscrito el 27 Ene 2010 09:00 am
Gracias DvillB por tu respuesta. He seguido tu consejo de utilizar posición absoluta y relativa. Ahora las cajas se ven bien colocadas en el explorer, pero el problema que me surge ahora es que la que tiene posición absoluta, al crecer, no empuja el pie de la página. ¿Sabes cómo se podría solucionar? He subido los cambios a: www.domomedia.com/clientesdomo/apamontealto.

Saludos.

Por lamarula

7 de clabLevel



 

safari
Citar            
MensajeEscrito el 27 Ene 2010 11:26 am
En realidad mi nueva pregunta es ¿es posible poner un div encima de otro sin utilizar la posición absoluta?

Por lamarula

7 de clabLevel



 

safari
Citar            
MensajeEscrito el 27 Ene 2010 09:29 pm
NO:
Resumiendo:
En html todos y cada uno de los elementos tienen unas propiedades intrínsecas (per sec) y se comportan de acuerdo a ellas.
Además un mismo espacio no puede ser ocupado por dos elementos distintos, para evitar colapsos.

Para alterar el comportamiento/propiedades inherentes a cada elemento hay que definir un valor distinto al "normal" (por defecto).
El valor para las cajas (divs) por defecto en display es "block" y position: static; lo que significa que no permiten posicionarse en su misma línea horizontal a ningún otro elemento (fuerzan un salto de línea) y mucho menos sobre ellos (en el plano perpendicular a la pantalla).
Así que para que dos elementos ocupen simultáneamente la misma posición en la horizontal es necesario sacar uno de ellos del flujo del documento, y la mejor manera es haciendo que el resto se comporte como si ese elemento no existiese (position: absolute o fixed).

Saludos.

Por DvillB

118 de clabLevel



 

firefox
Citar            
MensajeEscrito el 28 Ene 2010 11:41 am
Gracias por tu explicación tan detallada. Al final lo he conseguido haciendo una mezcla...
Le he puesto al div que quiero que está debajo

#menu_activ {
width: 421px;
position: absolute;
top: 75px;
left: -180px;
}

Al div que quiero que está arriba le he puesto

#contenido {
width: 440px;
float: left;
position: relative;
z-index: 2;
}

Lo he subido a la misma dirección por si quieres verlo.
Saludos.

Por lamarula

7 de clabLevel



 

safari

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.