Foros del Web » Creando para Internet » CSS »

Transparencias en IE 8 con listas ul y li

Estas en el tema de Transparencias en IE 8 con listas ul y li en el foro de CSS en Foros del Web. Buenas... estoy haciendo un Menu Desplegable, pero quuisiera que el menu tuviese transparencias y logro hacerlo con Firefox pero no co IE8. Aqui esta el ...
  #1 (permalink)  
Antiguo 20/07/2009, 12:32
 
Fecha de Ingreso: noviembre-2008
Mensajes: 89
Antigüedad: 9 años
Puntos: 0
Transparencias en IE 8 con listas ul y li

Buenas... estoy haciendo un Menu Desplegable, pero quuisiera que el menu tuviese transparencias y logro hacerlo con Firefox pero no co IE8.

Aqui esta el codigo.

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
</head>
<script language="JavaScript" type="text/javascript" src="images/menu_desp/menu_scr.js">
</script>

<style>
<!--
body {
background:url(http://i1.tinypic.com/6o101ol.jpg);
	}
ul.menu
{
   list-style:none;
   }
ul.menu a
{ color:#FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   }   
ul.menu li
{
   position:relative; /* Las coordenadas de los ul inferiores serán relativas al <li> que los contiene */
   width:70px;   
   color:#FFF;
   background:#C00;
}
ul.menu ul
{
   position:absolute; /* Esta posición es relativa al <li> que contiene a este <ul> */
   left:30px; /* Para que no monte sobre el <li> */
   top:-1px;
   display:none;
   list-style:none;
}
ul.menu li:hover > ul
{
   display:block;
}	

ul.menu> li > ul /* Solo para los ul debajo de los li de primer nivel. */
{
   position:absolute;
   left:-41px;
   top:19px;
   display:none;
   list-style:none;
}
ul.menu > li /* Sólo para li de primer nivel */
{
   display:inline;
}
-->
</style>
</head>

<body>
<div style="opacity:0.7; filter:alpha(opacity=10)">
<ul class="menu">
<li><a href="#">Enlace1</a></li>
<li><a href="#">Enlace2</a></li>
<li><a href="#">Enlace3</a>
	<ul>
    	<li><a href="#">Enlace 3.1</a></li>
       	<li><a href="#">Enlace 3.2</a>
        	<ul>
            	<li><a href="#">Enlace 3.2.1</a></li>
            </ul>
        </li>
    </ul>
</li>
<li><a href="#">Enlace4</a></li>
</ul></div>
</body>
</html> 
Prubenlo en los dos navegadores y quien pueda ayudarme desde ya, muchas gracias.
  #2 (permalink)  
Antiguo 20/07/2009, 12:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Transparencias en IE 8 con listas ul y li

Si utilizas la propiedad "opacity" tienes que saber que los de Redmond se ha superado a sí mismo.
Ahora para ie8 tienes que usar:
Cita:
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=8 0)”;
además de "filter: alpha(opacity = 80)" para los anteriores.
Vamos, lo que se dice "facilitando el proceso creativo" (te obligan a aprender cosas aun más raras y extrañas)
Un Saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 20/07/2009, 12:52
 
Fecha de Ingreso: noviembre-2008
Mensajes: 89
Antigüedad: 9 años
Puntos: 0
Respuesta: Transparencias en IE 8 con listas ul y li

Has probado lo que quiero como tu me lo has dicho ??

No me funciona aun....

Le he agregado lo que dices en una clase llamada .transparente sigue funcionando en FF y no en IE8. Miralo y pruebalo.

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
</head>
<script language="JavaScript" type="text/javascript" src="images/menu_desp/menu_scr.js">
</script>

<style>
<!--
body {
background:url(http://i1.tinypic.com/6o101ol.jpg);
	}
ul.menu
{
   list-style:none;
   }
ul.menu a
{ color:#FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   }   
ul.menu li
{
   position:relative; /* Las coordenadas de los ul inferiores serán relativas al <li> que los contiene */
   width:70px;   
   color:#FFF;
   background:#C00;
}
ul.menu ul
{
   position:absolute; /* Esta posición es relativa al <li> que contiene a este <ul> */
   left:30px; /* Para que no monte sobre el <li> */
   top:-1px;
   display:none;
   list-style:none;
}
ul.menu li:hover > ul
{
   display:block;
}	

ul.menu> li > ul /* Solo para los ul debajo de los li de primer nivel. */
{
   position:absolute;
   left:-41px;
   top:19px;
   display:none;
   list-style:none;
}
ul.menu > li /* Sólo para li de primer nivel */
{
   display:inline;
}
.transparente {
	opacity:0.6; 
	filter:alpha(opacity=60); 
	-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
	}
-->
</style>
</head>

<body>
<div class="transparente">
<ul class="menu">
<li><a href="#">Enlace1</a></li>
<li><a href="#">Enlace2</a></li>
<li><a href="#">Enlace3</a>
	<ul>
    	<li><a href="#">Enlace 3.1</a></li>
       	<li><a href="#">Enlace 3.2</a>
        	<ul>
            	<li><a href="#">Enlace 3.2.1</a></li>
            </ul>
        </li>
    </ul>
</li>
<li><a href="#">Enlace4</a></li>
</ul></div>
</body>
</html> 
Gracias.

Última edición por ingeday; 20/07/2009 a las 13:04
  #4 (permalink)  
Antiguo 20/07/2009, 13:03
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Transparencias en IE 8 con listas ul y li

Pues no, no lo probé antes, principalmente porque no uso ie8.
Pero tienes mucha información accesible vía google sobre la propiedad opacity e ie8:
un ejemplo
Aquí en el foro

Y como no he podido verificarlo, no se hasta qué punto influirá el hecho de que no has puesto las comillas ("...") del código.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 20/07/2009, 23:13
 
Fecha de Ingreso: julio-2009
Mensajes: 19
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Transparencias en IE 8 con listas ul y li

Es nesesario que sea transparente el div y el contenido? Yo siempre pienso a futuro cuando tengo que diseñar y maquetar. Cuando quiero algo transparente utilizo un png en alpha y listo, no me complico. Cuando es crear efectos en CSS siempre pienso bien el diseño antes de hacerlo y despues buscar la forma de armarlo. Se gana mucho tiempo.
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 01:50.