Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

falcao544

Botões para a barra de menus

Por , em Desenvolvimento frontend

Recommended Posts

falcao544    11

falcao544
Postado

Olá pessoal, bom eu não sei nada de CSS e XHTML, só um pouquinho, quase nada, de HTML! Bom minha dúvida é a seguinte como se faz esses botões que tem na barra de navegação de um site? Tipo o do IMasters, que fica lá em cima: Fórum, Membros, iMasters. Como que faz com que essa imagem tenha esse texto no mei e que isso seja um link?

Por exemplo, hoje eu peguei meu livro (Use a Cabeça HTML com CSS & XHTML) e fui ver uma parte de CSS! Aí peguei criei um link (<a href="#">Teste</a>) e salvei o arquivo .html! Bom nisso eu já tinha criado uma imagem, um retângulo com as bordas arredondadas e amarelo! E coloquei um código CSS no meu arquivo HTML. Esse é o meu arquivo teste.html:

 

<html>
<head><title>teste</title></head>
<body>
<div class="teste">
<a href="#">Teste</a>
</div>
</body>
</html>
<style type text="css">
body{
padding: 100px;
margin-right: 120px;
margin-bottom: 35px;
text-align: center;
background-image: url(Icone.jpg);
background-repeat: no-repeat;
background-position: center;
}
</style>

Bom a minha intenção era criar esses botões que a gente vê nos sites por ai! Só que lógico, ficou horrível! Porque quando eu clicava no link ele ficava roxo depois! E como eu não tinha idéia de como procurar por isso no GOOLE, eu resolvi postar aqui! Então como eu crio um botão que têm um texto dentro na cor que eu quiser e quando eu clicar, ele não fica roxo? Vocês criam uma imagem para isso (Um retangulo com um texto)?

 

Bom, se puderem me ajudar valeu!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eliseu M.    2

Eliseu M.
Postado

Hmm, existem vários maneiras de se fazer uma barra de navegação. E não será da noite para o dia que você irá aprender :S

 

Algumas dicas:

 

- Utilize listas para fazer a barra, e não somente links;

- Veja o tópico Repente CSS - [Menus];

- Procure utilizar o menor número de imagens possíveis;

- Exemplos em http://www.dynamicdrive.com/style/csslibrary/category/C1/.

 

Falou!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito