Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Galera, criei um menu com 4 links segue código abaixo
#menu ul{
padding:1px;
list-style:none;
margin:100px 36px 0 0 ;
}#menu ul li{
display:inline;
}#menu ul li a{
text-decoration:none;
font:13px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#4b4747;
}#menu ul li img{
margin:-3px 2px;
}font-weight:bold;
color:#8ac53e;
position:static;
}O problema é que quando acontece o hover ele muda a cor e tal, mas o texto se mexe, todo o bloco se movimenta....
mas só quando aplico o font-weight: bold.... tem alguma forma de aplicar o BOLD no hover da fonte sem ele se movimentar????
vlw
abraços
show...vou tentar e já falo se deu certo!!!
vlw!!!
Não funcionou, mesmo colocando 20px....exagerado é claro para testar só....não rolou, o efeito de movimentação é o mesmo com o font-weight bold.
alguma outra opção para resolver??
vlw
consegui um comportamento bem aproximado aqui:
a { letter-spacing: 0.3em; }
a:hover { font-weight: bold; letter-spacing: 0.1em; }
Depende muito da fonte que você está usando, de quanto ela "engorda" quando está negritada.
Você pode definir os links com o display em inline-block e dar uma largura fixa, de modo que sempre sobre espaço para a fonte crescer à vontade.
coloca essa regra no hover e ve se ameniza:
font-size: 12px;
Amigo é simples.
em sua "#menu ul li a" , defina uma largura ,altura , e um display block.E claro mantenha o que já obtinha , apenas incremente o meu exemplo.
veja o exemplo
#menu ul li a{width:70px;height:40px;display:block;}
lembrando que a largura e a altura fica a seu gosto de acordo com o layout. Abraços!
não rolou, acho que alguma outra configuração do css ta ferrando essa aplicação!!!
vou continuar tentando aqui e se achar uma solução aviso!! vlw!! abraços
Você vai ter que adicionar um letter-spacing dentro das regras de
#menu ul li a
e ir ajustando os valores até chegar num ponto onde não haja movimentação