Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá,
No meu arquivo html construí um menu, a seguir meu código:
<div id="mini-menu">
<ul>
<li id="busca"> <a href="busca.php" title="Busca no Site"> Buscar</a> </li>
<li id="home"> <a href="index.htm" title="Página Inicial"> Home</a> </li>
<li id="duvidas"> <a href="duvidas.htm" title="Dúvidas Debate"> Dúvidas</a> </li>
<li id="contato"> <a href="contato.htm" title="Entre em contato conosco"> Contato</a> </li>
<li id="tempo"> <a href="tempo.htm" title="Previsão de Tempo"> Tempo</a> </li>
<li id="login"> <a href="login.htm" title="Faça seu login"> Login</a> </li>
</ul>
</div>
Coloquei cada um com "id" pois no CSS vou colocar uma imagem para cada e dar um text-indent e overflow para fazer sumir o texto e colocar uma imagem no lugar.
A seguir o CSS:
#mini-menu {position:absolute; margin-top:-180px; margin-left:460px;}
#mini-menu ul{margin:0; padding:0;list-style:none;}
#mini-menu li{float:left; padding:5px;}
#mini-menu li a{text-decoration:none; text-indent:-9000px; display:block;}
#mini-menu li#busca{background:url(Imagens/busca.png) no-repeat; width:35px; height:35px; padding-right:40px;}
#mini-menu li#home {background:url(Imagens/home.png) no-repeat; width:35px; height:35px;}
#mini-menu li#duvidas {background:url(Imagens/duvidas.png) no-repeat; width:35px; height:35px;}
#mini-menu li#contato {background:url(Imagens/contato.png) no-repeat; width:35px; height:35px;}
#mini-menu li#tempo {background:url(Imagens/tempo.png) no-repeat; width:35px; height:35px;}
#mini-menu li#login {background:url(Imagens/login.png) no-repeat; width:35px; height:35px;}Ao testar no Firefox: Tudo Correto.Ao testar no Internet Explorer 7: O texto realmente some com o text-indent e overflow, as imagens também aparecem PORÉM não ficam clicáveis, ou seja, links, mãozinha, coisa e tal...rssss
Alguém pode me ajudar?
Desde já mto obrigada e Parabens to aprendendo mto com vcs =)
Carregando comentários...