Ir para conteúdo

POWERED BY:

Arquivado

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

PatrickPC

Menu CSS com imagem

Por , em Flash, ActionScript e tecnologias Adobe

Recommended Posts

PatrickPC    0

PatrickPC
Postado

Boa tarde a todos,

 

Gostaria de saber se alguem sabe como posso deixar o menu do site da forma desta imagem: imgtopo_forum.png

 

Já usei o background-image com uma fatia da imagem, porem gostaria que aparecece a imagem toda para aparecer os cantos para que não fique um botão quadrado.

 

E por ultimo o botão que for acionado fique como está o botão home mais claro.

 

Aguardo a ajuda de vcs.

 

Vlw

Patrickpc

Compartilhar este post

Link para o post
Compartilhar em outros sites

Spoock    0

Spoock
Postado

Amigo, pelo que eu entedí você quer criar um menu com varios botões e cantos arredondados? Bom o código que fiz ficou assim:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Studio de Tatuagens</title>
</head>
<style type="text/css">
.Menu {
margin: 0 auto;
width: 900px;
height: 40px;
}
.Item {
background-image:url(/*Aqui vai sua imagem*/);
margin-left: 5px;
width: 140px;
height: 40px;
float: left;

}
.Text {
margin-top: 10px;
height: 20px;
text-align: center;
}
</style>
<body>
<div class="Menu">
 <div class="Item"><div class="Text">Home</div>
 </div>
 <div class="Item"><div class="Text">Tatuagens</div>
 </div>
 <div class="Item"><div class="Text">Body Piercing</div>
 </div>
 <div class="Item"><div class="Text">Eventos e Congressos</div>
 </div>
 <div class="Item"><div class="Text">Contato</div>
 </div>
</div>
</body>
</html>

No trecho onde coloquei /* Aqui vai sua imagem */ você irá inserir a imagem de fundo com os cantos arredondados e todos os efeitos que você desejar. Cada DIV Item e Text nova adicionada será um novo botão, basta inserir os links nos textos que estão dentro a DIV Text. Espero que tenha ajudado. Abraço e Boa sorte com o uso do DW!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Flash, ActionScript e tecnologias Adobe
×

Informação importante

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

  Aceito