Foros del Web » Creando para Internet » CSS »

Capas Div Tapan Controles Capas Inferiores

Estas en el tema de Capas Div Tapan Controles Capas Inferiores en el foro de CSS en Foros del Web. Hola chicos! Tengo un pequeño problema de compatibilidades con las Div. He mirado por el foro pero no encuentro nada que me sirva de ayuda. ...
  #1 (permalink)  
Antiguo 10/05/2011, 08:37
Avatar de wendo_evm  
Fecha de Ingreso: febrero-2010
Mensajes: 21
Antigüedad: 6 años, 9 meses
Puntos: 0
Capas Div Tapan Controles Capas Inferiores

Hola chicos!

Tengo un pequeño problema de compatibilidades con las Div. He mirado por el foro pero no encuentro nada que me sirva de ayuda. El tema es el siguiente:

He estructurado varias capas Div que se montan las unas a las otras. No se montan en su totalidad, solo tapan pequeñas partes de las Div inferiores. Es decir, que los posibles controles como los de un video de youtube, o unos botones de flash, todo y estar en una Div inferior, dicho control no es tapado por el Div superior.

Todo debería funcionar, pero resulta que solo funciona en IE, en el resto de navegadores es como si un div superior, aunque el tamaño esté restringido, tapa todo lo que hay detrás.

Este es el css que he utilizado:

Código CSS:
Ver original
  1. <style type="text/css">
  2. <!--
  3. body {
  4.     background-image: url(Fondo_HTML.jpg);
  5.     border:0px;
  6. }
  7. .texto {
  8.     position:absolute;
  9.     top:40px;
  10.     left:70px;
  11.     font-family:Verdana;
  12.     font-size:7pt;
  13.     color:#fff;
  14. }
  15. .frontal {
  16.     position:absolute;
  17.     left:50%;
  18.     top:50%;
  19.     width:962px;
  20.     margin-left:-510px;
  21.     height:600px;
  22.     margin-top:-300px;
  23. }
  24. .logo {
  25.     position:absolute;
  26.     left:50%;
  27.     top:50%;
  28.     height:150px;
  29.     margin-top:-45px;
  30.     width:150px;
  31.     margin-left:-500px;
  32.  }
  33. .carrusel {
  34.     position:absolute;
  35.     left:50%;
  36.     top:50%;
  37.     height:400px;
  38.     margin-top:-20px;
  39.     width:900px;
  40.     margin-left:-450px;
  41.  }
  42. .video {
  43.     position:absolute;
  44.     left:50%;
  45.     top:50%;
  46.     height:266px;
  47.     margin-top:-210px;
  48.     width:473px;
  49.     margin-left:-25px;
  50.     padding:5px;
  51.     background-color:#000; 
  52.  }
  53. -->
  54. </style>

Este es el HTML de la colocación de los Div:

Código HTML:
Ver original
  1. <!-- CONTENEDOR -->
  2. <div>
  3. <!-- CAPA VIDEO POSICIÓN 0 - (FONDO) -->
  4. <div class="video">
  5. <iframe width="473" height="266" src="http://www.youtube.com/embed/z1DD1pQmXP0?wmode=opaque" frameborder="0" allowfullscreen></iframe>
  6. </div>
  7. <!-- CAPA FLASH (CARRUSEL) - POSICIÓN 1 -->
  8. <div class="carrusel">
  9. <script language="JavaScript" type="text/javascript">
  10.     AC_FL_RunContent(
  11. 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0','width', '900','height', '400','src', 'Carrusel','quality', 'high','pluginspage','http://www.adobe.com/go/getflashplayer_es','align', 'middle','play', 'true','loop', 'true','scale', 'showall','wmode', 'window','devicefont', 'false','id', 'Carrusel','bgcolor', '#333333','name', 'Carrusel','menu', 'true','allowFullScreen', 'false','allowScriptAccess','sameDomain','movie', 'Carrusel','wmode','transparent','salign', ''); //end AC code
  12.     <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="900" height="400" id="Carrusel" align="middle">
  13.     <param name="allowScriptAccess" value="sameDomain" />
  14.     <param name="allowFullScreen" value="false" />
  15.     <param name="wmode" value="transparent"
  16.     <param name="movie" value="Carrusel.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#333333" />    <embed src="Carrusel.swf" quality="high" bgcolor="#333333" width="900" height="400" name="Carrusel" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_es" />
  17.     </object>
  18. </div>
  19. <!-- CAPA IMÁGEN (LOGO IMCTOYS) - POSICIÓN 2 -->
  20. <div class="logo">
  21. <img src="IMC_logo_2010.png" alt="IMC Toys" width="150" height="150" border="0">
  22. </div>
  23. <!-- CAPA IMÁGEN (COHE Y LOGO CARS 2) ESTÁ RECORTADO EN 3 PARTES PARA QUE NO "TAPEN" LOS CONTROLES DEL VIDEO DE YOUTUBE - POSICIÓN 3 -->
  24. <div class="frontal">
  25.     <div class="texto">CARS TM & ©. All Rights Reserved.</div>
  26.     <div style="width:481px; height:371px; position:absolute; top:0px; left:0px"><img src="Marco_01.png" width="481" height="371"></div>
  27.     <div style="width:127px; height:255px; position:absolute; top:0px; left:481px"><img src="Marco_02.png" width="127" height="255"></div>
  28.     <div style="width:354px; height:130px; position:absolute; top:0px; left:608px"><img src="Marco_03.png" width="354" height="130"></div>
  29. </div>
  30. <!-- CAPA IMÁGEN (IMAGEN TRANSPARENTE) COMO IMÁGEN COCHE TAPA LOGO, HE COLOCADO DIV CON IMÁGEN TRANSPARENTE PARA PODER HACER UN LINK - POSICIÓN 4 -->
  31. <div class="logo">
  32.   <a href="http://www.imctoys.com" target="_blank"><img src="Transparente.png" alt="IMC Toys" width="150" height="150" border="0"></a>
  33. </div>
  34.  
  35. </div>

Y este es el link para que podáis testearlo en IE9 y FF4 para que me entendáis mejor:

[URL="http://http://www.imctoys.com/Promo/Cars2/"]http://www.imctoys.com/Promo/Cars2/[/URL]

Muchas gracias por todo de antemano.
  #2 (permalink)  
Antiguo 11/05/2011, 04:14
Avatar de yonaida  
Fecha de Ingreso: marzo-2011
Ubicación: Barcelona
Mensajes: 123
Antigüedad: 5 años, 8 meses
Puntos: 20
Respuesta: Capas Div Tapan Controles Capas Inferiores

utiliza la propiedad z-index para los divs, mientras mayor sea el index, mas delante se vera la capa.

z-index: 1;
z-index: 15; (esta se vera delante de la otra)

salu2
__________________
Everybody Else It's Doing It, So Why Can't We?
  #3 (permalink)  
Antiguo 11/05/2011, 04:22
Avatar de wendo_evm  
Fecha de Ingreso: febrero-2010
Mensajes: 21
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Capas Div Tapan Controles Capas Inferiores

Hola Yonaida, gracias por contestar

El tema es que antes lo tenía con la propiedad Z-index, pero como se colocan en su posición correcta sin necesidad de utilizar dicha propiedad, pos simplemente la deseché.

Igualmente lo volveré a probar, haber si de esa manera se soluciona el problema.

¿Has podido testear el link en IE9 y FF4?

En cuanto coloque el tema de los Z-index y testee comento el resultado.

Hasta pronto!!
  #4 (permalink)  
Antiguo 11/05/2011, 04:30
Avatar de wendo_evm  
Fecha de Ingreso: febrero-2010
Mensajes: 21
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Capas Div Tapan Controles Capas Inferiores

Bueno, pues ya he colocado la propiedad z-index, las capas están colocadas perfectamente pero sigo con el mismo problema, en IE9 funciona todo perfectamente y en FF4 las capas inferiores quedan inutilizadas.

Ya no sé si el tema es que falla en el resto de navegadores, o lo que para mí funciona ok es un error de IE9...

Esto de la compatibilidad entre navegadores me está volviendo majara!!!!
  #5 (permalink)  
Antiguo 11/05/2011, 05:54
Avatar de wendo_evm  
Fecha de Ingreso: febrero-2010
Mensajes: 21
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Capas Div Tapan Controles Capas Inferiores

Problema Solucionado:

La Div superior era contenedor de otras 3 Divs con una imagen cada una de diferentes tamaños.
Estas 3 Divs no se solapaban con los controles de los contenidos de las Divs inferiores, pero la superficie del Div que hacía de contenedor sí que se solapaba.

El tema es que mientras que IE9 ignora las áreas bacías (sin contenidos) de las Div, el resto de navegadores detecta una Div como un objeto en sí misma, por lo que el contenido que se encuentra en Divs inferiores queda inutilizado.

IE tiene cosas malas, pero en este tema le da un repasito a los demás.

Gracias a todos!!!!

Saludos!!!!
  #6 (permalink)  
Antiguo 11/05/2011, 05:58
Avatar de yonaida  
Fecha de Ingreso: marzo-2011
Ubicación: Barcelona
Mensajes: 123
Antigüedad: 5 años, 8 meses
Puntos: 20
Respuesta: Capas Div Tapan Controles Capas Inferiores

majara!!!!!! bienvenido al club hahahaah este es el tipico problema de la gran mayoria.

no se a que te refieres cuando dices que en firefox las capas inferiores quedan inutilizadas.
he probado en varios navegadores, ahi te dejo screenshots de lo que veo yo, a simple vista funciona igual en todos. no tengo posibilidad de mirar en ie9 ahora.

si dejaras un screenshot estaria bien.

Crome 11 : http://imageshack.us/photo/my-images/96/chrome11.png/
FF 4.1 : http://imageshack.us/photo/my-images/202/ff41.png/
safari : http://imageshack.us/photo/my-images/819/safarig.png/
opera 11.10 : http://imageshack.us/photo/my-images/814/opera1110.png/

aqui te dejo este enlace que nos recomiendand varias webs y aplicaciones para testear webs.
http://www.elwebmaster.com/articulos...en-navegadores
__________________
Everybody Else It's Doing It, So Why Can't We?
  #7 (permalink)  
Antiguo 11/05/2011, 06:02
Avatar de yonaida  
Fecha de Ingreso: marzo-2011
Ubicación: Barcelona
Mensajes: 123
Antigüedad: 5 años, 8 meses
Puntos: 20
Respuesta: Capas Div Tapan Controles Capas Inferiores

umm veo que llegue tarde con el post hahahaaha bueno, a veces los problemas mas simples tienen soluciones complejas o viceversa. lo de los navegadores es de caerse de pie.

yo doy gracias a que existe firebug para ir mirando la estructura de las paginas y el diseño que pilla cada cosa, sino es que es imposible.

weno suerte con eso. salu2
__________________
Everybody Else It's Doing It, So Why Can't We?
  #8 (permalink)  
Antiguo 12/05/2011, 01:53
Avatar de wendo_evm  
Fecha de Ingreso: febrero-2010
Mensajes: 21
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Capas Div Tapan Controles Capas Inferiores

Muchas gracias por la aportación!! Aunque justo ayer por la mañana lo pude solucionar.

Suerte a ti también!!! Hasta la próxima!!!!
  #9 (permalink)  
Antiguo 28/08/2011, 12:43
 
Fecha de Ingreso: agosto-2011
Mensajes: 1
Antigüedad: 5 años, 3 meses
Puntos: 0
Pregunta Respuesta: Capas Div Tapan Controles Capas Inferiores

Cita:
Iniciado por wendo_evm Ver Mensaje
Muchas gracias por la aportación!! Aunque justo ayer por la mañana lo pude solucionar.

Suerte a ti también!!! Hasta la próxima!!!!
Por favor comparte la solucion...

Etiquetas: Ninguno
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 08:32.