Centralizar o menu horizontalmente

[Martinsrj 0]

Olá pessoal, boa tarde!

 

Estou com dificuldade em colocar as li centralizado horizontalmente na barra preta.

Vejam como está: http://desenvolvimento.ntl.com.br/homepages/parkavenue/4/

 

Abaixo segue o código do css e tb do html.

 

Arquivo CSS: http://pastebin.com/fdmxmzCM

Arquivo html: http://pastebin.com/VXbdtDxv

 

Abs.

[Evandro Oliveira 331]

utilize a propriedade line-height. Faça com que ela tenha o mesmo valor da altura:

 

li { height: 30px; line-height: 30px; }

[Martinsrj 0]

Evandro,

 

Funcionou em parte, pois o background do efeito hover está centralizado, mas as palavras continua.

 

Veja nesse link: http://martinsrj.com/teste/4/

 

Inseri no código do CSS isso:

.menuhorizontal li{ 
display: inline;
float: left;
/*	padding:0px;
margin: 0;*/
width: 120px;
/*line-height:68px;*/
/*border-left: #666666 thin solid;*/
height: 68px; line-height: 68px; 
}

[Evandro Oliveira 331]

Pra que tanta DIV???

 

<div class="menu">
	<!-- Home | Empresa | Serviços | Nossos Clientes | Teste de Nivelamento | Contato -->
	<div class="menu_esquerdo">
		<div class="menu_direito">
			<div class="menu_central"> 
				<ul class="menuhorizontal">
					<li class="btnesquerdo"><a href="#">Home</a></li>
					<li><a href="#">Empresa</a></li>
					<li><a href="#">Serviços</a></li>
					<li><a href="#">Nossos Clientes</a></li>
					<li><a href="#">Nivelamento</a></li>
					<li><a href="#">Contato</a></li>
				</ul>

			</div>
		</div>
	</div>

</div>

 

precisa funcionar no IE 6?

[Martinsrj 0]

Mas qual seria a sua solução?

 

Seria diminuir o numero de divs? Caso sim, quais as divs atuais que irão continuar na pagina e se irá ter necessidade em reformular as classes para essas divs.

 

Desde agradeço pelos esclarecimentos.

[Evandro Oliveira 331]

O elemento <ul> faz tudo que um <div> faz e até mais, visto que não se pode colocar <li>'s dentro de <div>

 

A própria lista pode ser o contêiner, receber o background, a borda, o efeito, etc. Para mais informações e exemplos, consulte a nossa lista de menus propostos e suas respectivas soluções.

 

Veja que em sua maioria, os menus são feitos sem uso de <div>'s

 

Para o seu caso, é até simples:

 

Eu utilizaria esta imagem como plano de fundo repetida horizontalmente:

 

<ul id="menu">
   <li><a href="#">Home</a></li>
   <li><a href="#">Empresa</a></li>
   <li><a href="#">Serviços</a></li>
   <li><a href="#">Nossos Clientes</a></li>
   <li><a href="#">Nivelamento</a></li>
   <li><a href="#">Contato</a></li>
</ul>

 

#menu { 
   background: url('bg.jpg') repeat-x;
   border-radius: 5px;
   height: 40px;
   width: 100%;
}

#menu li {
   float: left;
   list-style: none;
}

#menu a {
   color: #fff;
   display: inline-block;
   height: 40px;
   line-height: 40px;
}

[Martinsrj 0]

Valeu Evandro pela ideia!

 

Irei efetuar o teste e logo em seguida postarei se foi com sucessou ou não.

 

Abraços.

[Martinsrj 0]

Evandro, peço desculpas pela ignorancia, mas veja como ficou o meu

CSS:

http://pastebin.com/M0Ffnsdu

/*---------MENU---------*/
#menu {  
   background: url(../images/bg_menu.png) repeat-x; 
   border-radius: 5px;     
   width: 100%; 
margin-top: 5px;
margin-bottom: 5px;	
height:73px;
text-align: center;

} 

#menu li { 
   float: left; 
   list-style: none; 
height: 68px; line-height: 68px; 	
width: 120px;
display:inline;
} 

#menu a { 
   color: #fff; 
   display: inline-block; 
   height: 68px; line-height: 68px; 	
text-decoration: none;
font:bold 13px Arial, Helvetica, sans-serif;	
}

#menu :hover{
text-decoration: none;
color: #FFFFFF;
/*height: 40px;
line-height: 40px;*/
background-image: url(../images/menu_over.jpg);
background-repeat: no-repeat;
background-position: center top;
} 

 

Aqui o código HTML:

http://pastebin.com/MfGWSqqP

 

Gostaria o meu menu ficasse identico conforme a imagem abaixo:

http://martinsrj.com/teste/4/images/exemplo_de_menu.jpg

 

Obrigado

[Evandro Oliveira 331]

Defina uma largura específica para as LI's e posicione os A's relativamente, definindo-os como blocos e dando o plano de fundo adequado.

 

Ficaria semelhante a este molde:

 

<ul id="menu">
<li><a href="#">Teste</a></li>
<li><a href="#">Teste</a></li>
<li><a href="#">Teste</a></li>
<li><a href="#">Teste</a></li>
<li><a href="#">Teste</a></li>
<li><a href="#">Teste</a></li>
</ul>

 

#menu {
background: #000;
border-radius: 6px;
height: 75px;
}

#menu li {
float: left;
text-align: center;
width: 16.6%;
}

#menu a {
border-radius: 6px;
color: #fff;
display: inline-block;
height: 85px;
line-height: 85px;
position: relative;
top: -5px;
width: 100%;
}

#menu a:hover {
background-color: #00f;
}

 

Edit: Pelo CSS postado, as únicas edições que faltam são adicionar o position:relative aos <a>'s e aumentar a respectiva altura e line-height.

[Martinsrj 0]

Evandro, consegui fazer dessa forma:

.menu_central{
background:url(../images/submenu_center.jpg) repeat-x scroll 0;
height:73px;
line-height:73px;
}

.menu_direito{
margin-top: 5px;
margin-bottom: 5px;
}


#menu {  
   border-radius: 5px;     
   width: 100%; 
height:73px;
line-height:73px;
text-align: center;
vertical-align:middle;		
} 

#menu li { 
   float: left; 
   list-style: none;  
height: 68px; 
line-height: 68px;
width: 130px;	
display: block;
text-align:center;
} 

#menu a { 
   color: #fff;  
text-decoration: none;
font:bold 13px Arial, Helvetica, sans-serif;
position: relative; 
height: 68px; 
line-height: 68px;

}

#menu :hover{	
text-decoration: none;
color:#fff;
background:url(../images/menu_over.jpg) no-repeat top;
}

 

Veja neste link: http://martinsrj.com/teste/5/index.html

 

A minha dificuldade é o seguinte:

quando se posiciona o cursor no mouse em cima da palavra aparece uma tarja cinza.

[Evandro Oliveira 331]

remova o plano de fundo dos elementos 'a' e 'a:hover'