[Resolvido] espaço entre <div>'s ?

[- KbeçãO - 0]

Bom dia galera iMasters...

bom..

estou desenvolvendo um site...

e estou usando oq aprendi aqui..

ja estou usando css com float, pading, margin, etc...

coisas q ñ usava antes...

agora preciso de uma ajudinha...

tenho uma div:

 

<div id="menu">
           <div><a href="?pg=empresa">Empresa</a></div>
           <div><a href="?pg=clientes">Clientes</a></div>
           <div><a href="?pg=portifolio">Portifólio</a></div>
           <div><a href="?pg=certificados">Certificados</a></div>
           <div><a href="?pg=premios">Prêmios</a></div>
           <div><a href="?pg=parceiros">Parceiros</a></div>
           <div><a href="?pg=contato">Contato</a></div>
</div>

 

e o css dela :

 

#menu{

float: left;
padding: 5px;
width: 920px;
background: #006;
color: #FFF;

}

#menu div{

float: left;
padding: 5px;
width: 70px;
background: #006;
color: #FFF;
position: relative;
border: none;

}

 

ta bonitim e páh....

mas todas as divs do menu, ficam no canto...

queria que elas se distribuissem por toda a extensao do menu...

como fasso isso?

desde ja agradeço...

^^,

[Francispansa 6]

Kbeção, faz o seguinte, deixa a estrutura do menu assim:

 

<div id="menu">
   <ul>
       <li><a href="?pg=empresa">Empresa</a></li>
       <li><a href="?pg=clientes">Clientes</a></li>
       <li><a href="?pg=portifolio">Portifólio</a></li>
       <li><a href="?pg=certificados">Certificados</a></li>
       <li><a href="?pg=premios">Prêmios</a></li>
       <li><a href="?pg=parceiros">Parceiros</a></li>
       <li><a href="?pg=contato">Contato</a></li>
   </ul>
</div>

 

O css

 

#menu ul{
list-style:none;
}

#menu ul li{
display: inline;
float:left;
margin:5px;
}

 

Agora só estiliza o 'ul li' ao seu gosto, coloquei um margin para separar os li's..

 

Espero que ajude..

 

Abrass

 

PS: O "#menu div", pode tira fora.. :lol:

[- KbeçãO - 0]

cara...

em termos deu certo...

mas a altura do menu ficou mto grande...

ele tem q ser fininho e pah....

sem o mergin os textos ficam colado, mas o tamanho do menu fica certo...

com o margin, os textos ficam separados corretamente mass o menu fica gigante....

[Francispansa 6]

..mass o menu fica gigante

 

Fica gigante em que sentido? altura ou largura?

[- KbeçãO - 0]

altura...

[William Bruno 1501]

se o problema é a margin que tá dando altura, apenas zere uê..

 

margin: 0 5px;

(zero pra cima e pra baixo, e 5 lateralmente)

[- KbeçãO - 0]

o Francis me ajudou...

 

#menu{

float: left;
margin:0 auto;
   width: 930px;
   background: #006;
   height: 30px;
}

#menu ul{

   float: left;
      list-style:none;
      margin: 0;
      padding: 0;
}

#menu ul li{
      display: inline;
      float:left;
      padding:7px 32px;
      border-right: 1px solid #FFF;
}

#menu ul li a{
     color:#FFF;
     text-decoration: none;
}

#menu ul li a:hover{
     color:#CCC;
}

 

TOPICO RESOLVIDO