Ir para conteúdo

POWERED BY:

Arquivado

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

tony_lu

menu em CSS com Rollover de imagens

Por , em Desenvolvimento frontend

Recommended Posts

tony_lu    1

tony_lu
Postado

Olá pessoal..td legal..?

Estava precisando de um menu em CSS com Rollover de imagens...e consegui... só que estou com um problema.... os botoes do menu estao com um espaço muito grande entre um e outro...eu preciso deles grudados...um abaixo do outro.... mas nao consegui...alguem pode me ajudar....

 

Um exemplo do menu aqui:

 

http://www.mk-tuning-japan.com/teste/teste.htm

 

Passo o cód...se alguém puder me ajudar agradeço

 

<html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">#menur {	width: 180px;}#menur ul {	list-style-type: none;	margin: 0;	padding: 0;	font: bold 9px arial, helvetica, sans-serif; }#menur li {	margin-bottom:0px;}#menur a {	display: block;	padding: 1px 0 1px 25px;	border: 0px solid #000000;	width: 180px;	background-color: #339966;	color: #FFFFFF;	text-decoration: none; 	background-image:url(fundo_1.gif); 	voice-family: "\"}\"";	voice-family:inherit;	width:153px;	}body>#menur a {width:153px;}#menur a:hover {	background-color:#FFFF99;	background-image: url(fundo_2.gif);	color: #000000;}</style></head><body><div id="menur"><ul><li ><a href="#content" >Home Page</a></li><li><a href="#content" >Portfolio</a></li><li><a href="#content" >Equipe tecnica</a></li><li><a href="#content" >Parceiros</a></li><li><a href="#content" >Album de fotos</a></li><li><a href="#content" >Fale conosco</a></li></ul></div>  <p><font size="+1"></font></p></div></body></html>

Agradeço a atenção e aguardo

Compartilhar este post

Link para o post
Compartilhar em outros sites

dmarcosm    0

dmarcosm
Postado

Olá cara. Tudo bem?

 

Dei uma "limpada" no seu código. Mais grudado que isso só com SuperBonder http://forum.imasters.com.br/public/style_emoticons/default/grin.gif ......

 

Dá uma olhada!

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#menur {
width: 180px;
}
#menur a {
display: block;
border: 0px;
padding: 1px 0px 1px 28px;
color: #FFFFFF;
text-decoration: none; 
background-image:url(fundo_1.gif); 
width:180px;
}

#menur a:hover {
background-image: url(fundo_2.gif);
color: #000000;
}
</style>
</head>

<body>
<div id="menur">
<a href="#content" >Home Page</a>
<a href="#content" >Portfolio</a>
<a href="#content" >Equipe tecnica</a>
<a href="#content" >Parceiros</a>
<a href="#content" >Album de fotos</a>
<a href="#content" >Fale conosco</a>
</div>
</body>
</html>

 

ah... As imagens que você usa como fundo do menu são beeeemmmm maiores do que é preciso. Veja se você consegue dar uma diminuida nelas http://forum.imasters.com.br/public/style_emoticons/default/grin.gif . Isso não vai influenciar na apresentação do menu... mas influencia no desempenho do seu site.

 

Espero ter ajudado. Abraço.

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