Alinhar Texto a BG

[Neri Junior 0]

Bom dia, tarde ou noite para vocês é o seguinte estou fazendo um menu em CSS utilizando o <li> e <ol>

ok até ai tudo bem o menu ficou cetinho coloque ele na vertical porem gostaria de saber como coloco o texto no centro desta imagem que será o botao do menu:

[Neri Junior 0]

Ok e como fasso para que apareça a imagem inteira? pois ela está aparecendo apenas no meio!

[Neri Junior 0]

Ele está ficando assim:

 

 

xHtml:

<div align="center" id="Menu">
	<ul>
	  <li><a href="home.php">Home</a></li>
	  <li><a href="njgaleria/index.php">Galeria</a></li>
	  <li><a href="estudio.php">Estudio</a></li>
	  <li><a href="equipe.php">Equipe</a></li>
	  <li><a href="modelos.php">Modelos</a></li>
	  <li><a href="contato.php">Contato</a></li>  
		</ul>
  </div>

CSS:

body{
background-color:123456;
}

#menu ul {
		padding-left:5px;
		margin:0px;
		float: inherit;
		width: 100%;
		height:40px;
		background-color: #CCCCCC;
		list-style:none;
}

#menu ul li { 
		display: inline;
}

#menu li{
		text-align:center;
}

#menu ul li a {
		padding: 2px 10px;
		float:inherit;
		/* visual do link */
		background-image:url(botao/inteiro.png);
		background-position:center;
		color: #656565;
		height: 34px;
		text-decoration: none;
		text-align:center;
		border: none;
}

#menu ul li a:hover {
		background-color:#D6D6D6;
		color: #FFF;
		border-bottom:3px solid #EA0000;
}

[brcontainer 16]

voce na verdade quer alinahmento MIDDLE que é um alinhamanto vertival

use para isso margin-top:; ou line-height:;

 

;)

 

ps.: porem seu layout esta funcionando no IE mas não corretamente no Firefox =/

[Neri Junior 0]

como poderia arrumar ele para firefox?

[brcontainer 16]

mais ou menos assim ;)

ja melhora seu código

*{
margin:0px;
padding:0px;
list-style:none;
}
#menu ul {
		padding-left:5px;
		width: 100%;
		height:40px;
		background: #CCCCCC;
}
#menu ul li {
		text-align:center;
		float:left;
}
#menu ul li a {
		display:block;
		padding: 2px 10px;
		background-image:url(botao/inteiro.png);
		background-position:center;
		color: #656565;
		height: 34px;
		text-decoration: none;
		border: none;
}
#menu ul li a:hover {
		background-color:#D6D6D6;
		color: #FFF;
		border-bottom:3px solid #EA0000;
}

explicação o FLOAT:LEFT; deve ir no <LI> para ficar um <LI> do lado do outro

o DISPLAY:BLOCK; é para a TAG <A> 'funcionar melhor' com o CSS

 

isso: *{}(asterisco) é para aplicar efeito em todos elementos da página

é um efeito "GLOBAL" ;)

[Neri Junior 0]

Vlw kra