Espaçamento individual no menu

[Everton Nobre 0]

Galera estou tendo uma dificuldade para fazer o meu menu, pois o fundo dele é uma imagem e quero colocar só os links por cima, sendo que tenho que colocar em lugares específicos e não sei como colocar os links de forma correta tentei alguns modos mas não fica alinhado.

Me ajudem ai.

segue a imagem no spoiler do que tento descrever

 

 

Obrigado

[MafnGamer 13]

Usa text-align: center :thumbsup:

[André do Vale 76]

Posta o código por favor para podermos ajudar melhor. :thumbsup:

[Everton Nobre 0]

HTML

 

<div id="Menu"><!-- Início Menu -->
       	<nav id="divmenu">
       		<ul>
      	  			<li><a href="index.html">Início</a></li>
	  			<li><a href="Campeonatos.html">Campeonatos</a></li>
	  			<li><a href="Encontros.html">Encontros</a></li>
  		 		 	<li><a href="Informaçoes.html">Informações</a></li>
         		</ul>
         	</nav>
 		</div><!-- Fim Menu -->

Style

 

#Menu {
background-image:url(../img/Menu.png);
background-repeat:no-repeat;
background-position:center;
width:990px;
height:110px;
margin-right:auto;
margin-left:auto;
}
#divmenu ul li a {
margin-left:80px;
padding-left:30px;
padding-top:35px;
   float:left;
display:inline;
   /* visual */
font:Georgia, "Times New Roman", Times, serif;
font-size:24px;
   color: #FFF;
   text-decoration: none;
}

[André do Vale 76]

Bom, começando pela marcação HTML, tem tags em excesso. Você pode trabalhar com apenas:

 

<ul id="Menu">
<li><a href="index.html">Início</a></li>
<li><a href="Campeonatos.html">Campeonatos</a></li>
<li><a href="Encontros.html">Encontros</a></li>
<li><a href="Informaçoes.html">Informações</a></li>
</ul>

 

Agora pras imagens, o que você pode melhorar também, é ter um único fundo pra esses links, ao invés de uma imagem com os 4 juntos, beleza?

 

No CSS, pode melhorar assim (usado o HTML proposto acima):

 

#Menu {
width: 990px;
height: 110px;
margin: 0 auto;
background: url(img/imagemDeFundoSemOsBotoes.jpg);
text-align: center;
}
#Menu li {
display: inline-block;
margin: 0 10px; /* substitua 10 pelo valor exato em seu layout */
}
#Menu a {
display: block;
font: 24px/40px Georgia, "Times New Roman", Times, serif;
color: #fff;
text-decoration: none;
text-indent: 30px;
width: 150px /* substitua pela largura dos botões do seu layout */
background: url(fundoDoBotao.jpg) /* é o fundo do link de maneira isolada ;) */
}

 

Boa sorte! :thumbsup:

[Everton Nobre 0]

Ahh obrigado vou fazer desse jeito,vai ser mais rápido.