Problema de movimento quando faço hover no menu

[Gregorcs 1]

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;

}
#menu ul li a:hover{
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

[Evandro Oliveira 331]

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

[Gregorcs 1]

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

[Evandro Oliveira 331]

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.

[Thiago Moraes 32]

coloca essa regra no hover e ve se ameniza:

 

 font-size: 12px; 

[CarlosCx 1]

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!

[Gregorcs 1]

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