[Resolvido] Dificuldade menu esticado

[MatheusSilva 0]

ola, tenho um site deste jeito:

 

<div id="box">
.
.
.
</div>

 <div id="menu">
   	<ul>
     	<li><a href="?pag=home" class="separador">Início</a></li>
     	<li><a href="?pag=cursos" class="separador">Serviços</a></li>
     	<li><a href="?pag=metodo" class="separador">Reservas</a></li>
     	<li><a href="?pag=profissionais" class="separador" >Programação</a></li>
     	<li><a href="?pag=empresa" class="separador" >A Empresa</a></li>
     	<li><a href="?pag=localizacao" class="separador" >Localizaçao</a></li>
     	<li><a href="?pag=contato" class="separador" >Contato</a></li>
   	</ul>
 	</div>

<div id="box">
.
.
.

 

esse box esta com width de 992px e o menu esta com width de 100%, beleza, o menu fica com o bg na pagina toda mas o texto fica lá <<<<<<< colado, ja botei padding e margin em tudo e n vai '-'

 

#menu{
background:#008CBB;
float:left;
width:100%;


}
#menu ul {
margin:0;
padding:0;
float:left;
list-style:none;
background-color:#008CBB;

}
#menu ul li {
display: inline;


}
#menu ul li a {
text-decoration:none;
color:#FFF;
font:bold 20px Arial, Helvetica, sans-serif;
float:left;
padding:8px 20px 8px 18px;

}
#menu ul li a:hover{
text-decoration:underline;
}

 

obrigado

[crf_h0m3r 5]

Está colocando o texto entre parágrafos (<p></p>)? Se não, coloque-os e atribua uma classe, exemplo:

<style>
   p.espaco {margin: 0 0 0 20px;}
</style>
<div id="box">
 <p class="espaco">Teste teste</p>
</div>

[MatheusSilva 0]

você n entendeu, o texto do menu esta ficando pra lá <<<<<<<<<<<<<<< e nao sei o que fazer =X

[crf_h0m3r 5]

Você quer colocar ele aonde? :huh:

[MatheusSilva 0]

entao, a div box ta com margin: 0 auto e ta no meio o texto da box, queria botar a mesma coisa com o do menu.

 

ta assim oh

 

[crf_h0m3r 5]

<style>
#menu{
       background:#008CBB;
       float:left;
       width:100%;


}
#menu ul {
       margin:0;
       padding:0;
   text-align:center;
       list-style:none;
       background-color:#008CBB;

}
#menu ul li {
       display: inline;


}
#menu ul li a {
       text-decoration:none;
       color:#FFF;
       font:bold 20px Arial, Helvetica, sans-serif;
       padding:8px 20px 8px 18px;

}
#menu ul li a:hover{
       text-decoration:underline;
}
</style>

 

Coloquei um text-align:center; no menu ul e retirei o float:left do menu ul li a. E você pode adicionar um padding de 3px, por exemplo, no menu para aumentar o espaço do menu e não ficar tão pequeno em cima e embaixo.

[MatheusSilva 0]

obrigado =D