transparencia em sub menu

[Andre Summers 0]

Fiz um menu com sub menu em css e apliquei transparencia no fundo dos sub-menus. No Firefox ta rodando normal, mas no IEnao fica com transparencia. Me ajudem por favor.

 

menu:

<div id="menu">	<dl>		<dt onmouseover="java script:montre();"><a href="index2.php" title="Volta A Página Inicial">Principal</a></dt>	</dl>		<dl>					<dt onmouseover="java script:montre('smenu1');">Quem Somos</dt>			<dd id="smenu1">				<ul>					<li><a href="index2.php?pagina=coordenacao">Coordenação Cientifica</a></li>					<li><a href="index2.php?pagina=empresa">Empresa</a></li>				</ul>			</dd>	</dl>			<dl>			<dt onmouseover="java script:montre('smenu2');">Cursos</dt>			<dd id="smenu2">				<ul>					<li><a href="index2.php?pagina=catalogo">Acervo</a></li>					<li><a href="index2.php?pagina=eventos">Eventos</a></li>					<li><a href="index2.php?pagina=links">Links</a></li>				</ul>			</dd>	</dl>		<dl>			<dt onmouseover="java script:montre('smenu3');">Contato</dt>			<dd id="smenu3">				<ul>					<li><a href="index2.php?pagina=faleconosco">Fale Conosco</a></li>					<li><a href="index2.php?pagina=intercambio">Intercâmbio Cientifico</a></li>				</ul>			</dd>	</dl></div>

Css:

dl, dt, dd, ul, li {margin: 0;padding: 0;list-style-type: none;}#menu {position: absolute;top: 233;left: 310;z-index:100;width: 563px;}#menu dl {float: left;width: 8em;margin: 0 1px;}#menu dt {cursor: pointer;text-align: center;color: #FFF;font-size: 12px;font-family: Verdana, Arial, Helvetica, sans-serif;background: #5B8BEE;border: 1px solid white;}#menu dd {border: 0px solid white;}#menu li {text-align: center;background-color: #5B8BEE;filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;}#menu li a {color: #FFF;font-size: 12px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration: none;display: block;height: 100%;border: 0 none;}#menu dt a{color: #FFF;font-size: 12px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration: none;display: block;height: 100%;border: 0 none;}#menu li a:hover, #menu dt a:hover {background: #99ccff;}#menu li a:visited, #menu dt a:visited {text-decoration: none;font-weight: normal;}

a pagina pode ser visualizada nesse link:

http://www.cursosvideoline.com.br/projeto2/index2.php

[Paulo de Tarso F. M. 24]

O link não existe... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

Mas só pra te avisar, sua declaração de opacidade está errada... Veja como seria o correto:

filter: alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;

E não .50 para o -moz-opacity e para o opacity...

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Andre Summers 0]

Ajeitei o link. No firefox funciona normal, so no IE q nao. Podem ajudar?

[Paulo de Tarso F. M. 24]

Ajeitei o link. No firefox funciona normal, so no IE q nao. Podem ajudar?

Ops... Faltou um outro detalhe... Na propriedade para o IE, faltou colocar as aspas simples no valor da propriedade... Veja como fica:

filter: alpha(opacity='50'); /* IE */

-moz-opacity: 0.5; /* Firefox */

opacity: 0.5; /* Opera */

Agora vai... hehehe http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Andre Summers 0]

Putz. Continua não dando certo. So pega no Firefox... alguma outra ideia?

[Nícolas 4]

cara tem diversas maneiras...

 

Essa com transparencia no estilo é uma que ja usei muito... o ruim é que a transparencia afeta o texto tb...

 

Da uma olhada nesse tópico que postei.

http://forum.imasters.com.br/index.php?showtopic=223512

 

 

Eu utilizei ele em 2 sites de clientes da empresa.

http://www.ct.com.br/teste/mariuzapregnolato/

 

A url do outro não me lembro agora mas funciona bem esse esquema.

 

Mas pelo menos tem esse exemplo...

 

Com esse de CSS tem um exemplo que utilizei no site da empresa que trabalho.

http://www.contactonet.com.br/?cont=contato

 

Na pagina de contato aonda ta seleciona o serviço desejado se você clicar vai ver que os submenus tão transparentes... quando da rollover ele fica com 100% de opacidade =)

 

 

Tem varias maneiras de se utilizar, tem coisas que pra minha necessidade gosto de fazer com png, e outras que gosto com o CSS direto no estilo.

 

 

Da uma olhada no PNG e ve qual o modo que fica melhor pra você =)

[Nícolas 4]

Aproveitando esse seu código...

 

Experimenta trocar esse seu estilo.

#menu li {

text-align: center;

background-color: #5B8BEE;

filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;

}

#menu li a {

color: #FFF;

font-size: 12px;

font-family: Verdana, Arial, Helvetica, sans-serif;

text-decoration: none;

display: block;

height: 100%;

border: 0 none;

}

Por esse

#menu li a {

 

/* DEFINA UM VALOR */

width: 200px;

 

/* DEFINA UMA ALTURA PRA LINHA, ESSE COMANDO É BOM POS AUMENTA A LINHA ALINAHNDO VERTICALMENTE */

line-height: 19px;

 

 

display: block;

 

 

/* ESSE AQUI EU COLOQUEI PORQUE TAVA NA LI */

text-align: center;

 

 

/* APENAS UMA TRATADA PRA REDUZIR A LINHA */

font: normal 12px Verdana, Arial, Helvetica, sans-serif;

 

 

color: #FFF;

border: none;

text-decoration: none;

 

 

 

/* DEIXE TANTO O BACKGROUND QUANTO A TRANSPARENCIA NO LINK NÃO NA LI */

background-color: #5B8BEE;

filter:alpha(Opacity=50);

-moz-opacity : 0.5;

opacity: .5;

}

Dei só um tapinha em uma ou 2 linhas do seu estilo, hehehe

 

O grande espaçamento foi só pra separar bem o que to comentando...

 

E a idéia é colocar a transparencia e o background no link não na li...

 

Testa aee e ve se funciona ;)

[Andre Summers 0]

nao deu certo nao.Nao funciona no IE do mesmo jeito.Eu vi seu exemplo e gostei da ideia do rollover com 100% de opacidade...como faria isso tb?

[Nícolas 4]

Bom cara... posta todo o código html com o CSS junto ou manda o link se tiver na net que fica amis facil de ver.quando a idéia do rollover 100% é facil..Bom ignorando todos os outros comandos que tme dentro que é pra facilitar

#menu li a {background-color: #5B8BEE;filter:alpha(Opacity=50);-moz-opacity : 0.5;opacity: .5;}#menu li a:hover {filter:alpha(Opacity=100);-moz-opacity : 1;opacity: 1;}

=)

[Andre Summers 0]

http://www.cursosvideoline.com.br/projeto2/index2.php

 

vê la o menu...

 

o atual css ta assim:

 

dl, dt, dd, ul, li {margin: 0;padding: 0;list-style-type: none;}#menu {position: absolute;top: 233;left: 310;z-index:100;width: 563px;}#menu dl {float: left;width: 8em;margin: 0 1px;}#menu dt {cursor: pointer;text-align: center;color: #FFF;font-size: 12px;font-family: Verdana, Arial, Helvetica, sans-serif;background: #5B8BEE;border: 1px solid white;}#menu dd {border: 0px solid white;}#menu li {text-align: center;background-color: #5B8BEE;}#menu li a {color: #FFF;font-size: 12px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration: none;display: block;height: 100%;border: 0 none;filter:alpha(opacity='50');-moz-opacity:0.5;opacity:0.5;}#menu dt a{color: #FFF;font-size: 12px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration: none;display: block;height: 100%;border: 0 none;}#menu li a:hover {background: #0000ff;filter:alpha(opacity='50');-moz-opacity:1;opacity:1;}#menu dt a:hover {background: #0000ff;}#menu li a:visited, #menu dt a:visited {text-decoration: none;font-weight: normal;}

[Nícolas 4]

#menu li {text-align: center;background-color: #5B8BEE;}#menu li a {color: #FFF;font-size: 12px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration: none;display: block;height: 100%;border: 0 none;filter:alpha(opacity='50');-moz-opacity:0.5;opacity:0.5;}

Velho eu ja falei... background num pode ta na Li precisa ta no link

#menu li {text-align: center;}#menu li a {color: #FFF;font-size: 12px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration: none;display: block;height: 100%;border: 0 none;background-color: #5B8BEE;filter:alpha(opacity='50');-moz-opacity:0.5;opacity:0.5;}

Se bem que como seu menu só fica em cima de uma área branca nem teria pq se matar com transparencia, era só jogar uma cor mais clara;)

[Andre Summers 0]

agora funcionou. brigadinho

[CuecaX 0]

so uma duvida, eu nao costumo usar isso:

 

-moz-opacity: 0.5;

 

eu uso somente esse e o filter do IE:

opacity: 0.5;

 

mas funciona normalmente aqui no meu firefox (versao 1.5)

 

tem motivo pra eu usar o -moz-opacity?

[Nícolas 4]

Cara.... eu utilizo isso mais por precaução do que qualquer outra coisa.Sei la.. derrepente alguma versão do firefox que eu não saiba não suporta o opacity, ou de algum sistema operacional.