[Resolvido] Como fazer esse efeito?

[corcova 0]

Olá, pessoal. Na realidade não sei se esse eh o local certo para a postagem dessa dúvida mas vamos lá.

 

 

sou dono do site http://www.oblogdasdicas.com

 

gostaria de colocar nos intens do menu esquerdo as lnhas que estão presentes em baixo do itens do menu como nesses dois sites

 

http://www.procurandovagas.org/

http://usuariocompulsivo.blogspot.com/2007...no-blogger.html

 

já tentei a tag <hr> mas ela não eh boa pois cada browser a exibe de um jeito...

 

 

se alguem puder lançar uma, pois não consegui descobrir como reproduzir!

 

 

 

muito obrigado gente

[William Bruno 1501]

você poderia fazer um border-bottom no teu LI de cada item..

ou diretamente no <a> dependendo de como você estruturou o menu..

[corcova 0]

desculpe a ignorancia mas como aplico um border-bottom em LI ou em A?

[William Bruno 1501]

Fiz o seguinte, defini um id para a UL do menu...

<ul id="menu">
<li>
<a dir='ltr' href='http://www.oblogdasdicas.com/search/label/Cultura%20e%20Informa%C3%A7%C3%A3o'>
Cultura e Informação
</a>

e coloquei isso no style:

#menu li {
	border-bottom: 1px solid #fff;
}

Entendeu?

[corcova 0]

entendi, testarei logo logo! muito obrigado pela ajuda!

 

deu certo! alias, tem como eu diminuir o tamanho da linha??? isso seria importante

[William Bruno 1501]

Oque que você queria?

A borda embaixo da palavra, do item do menu, em todos os momentos ou apenas no passar do mouse?

 

se for, aplique apenas no :hover

#menu li a:hover {
 border-bottom: 1px solid #f00;
}

Ou era um underline que você queria?

a:hover {
text-decoration: underline;
}

Você tem que ser mais específico para que possamos entender oque você quer.

Não faça posts seguidos assim, se tiver algo à acrescenter, e não houver nenhuma postagem entre as suas, apenas edite o post de cima.

 

Veja que aplicamos uma borda inferior no LI... ele tá pegando a largura toda do LI. Para diminuir, você teria que diminuir o tamanho do LI.

[corcova 0]

olá willian,

 

o que eu queria é extamente o que você falou do primeiro jeito e funcionou. ficou perfeito. não tem nada a ver com passar o mouse.

 

só queria saber o seguinte: se puder olha no site. a linha está ocupando toda o menu (200px) gostaria de saber se é possível fazer que a linha fique menor. entendeu?

 

 

edit: consegui, fazer é soh por um width normalmente.. assunto encerrado ahuea.. muito obrigado pela ajuda.

 

 

desculpe pelas postagens seguidas.

[William Bruno 1501]

^^ tranquilo... olha fiz um teste aqui assim tb:

#menu li {
border-bottom: 1px solid #666666;
width: 90%;
}

Funciona tranquilamente...

o importante é que resolveu!

 

Força ae :lol: