[Resolvido] área ativa de botões...

[- KbeçãO - 0]

Salve galera iMasters...

como disse no meu ultimo post, ultimamente eu revi todos os meus conceitos de criação de sites...

então ando apanhando um pouco...

tenho um menu:

 

<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 id="li_cont"><a href="?pg=contato">Contato</a></li>
  </ul>
</div>

 

e no CSS:

 

#menu{

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

#menu ul{

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

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

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

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

 

o menu ta bunitim e pah...

funciona 99%...

a unica coisa que me incomoda nele, é que a área ativa dos botões é somente o texto...

mas queria que fosse toda a extensão de cada <li> como consigo fazer isso?

[Vinicius Weber 0]

Simples, ao invés você deixar o tamanho do li com o tamanho total dos botoes, voce deixa o #menu ul li a{ com o tamanho do li que voce tinha colocado, assim ele pega a area de link na parte inteira, entendeu?

 

Abraços

[William Bruno 1501]

estude sobre elementos inline e elementos nivel de bloco.

 

basicamente, colocar display: block; no a, e setar width e height 100% do LI

[No Rain 0]

Tem sim.

 

Adiciona display block para seu link

 

<style type="text/css">
#menu ul li a{
     display: block;
     color:#FFF;
     text-decoration: none;
}
</style>

[Vinicius Weber 0]

ou mude para isso no seu css

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

#menu ul li a{
     color:#FFF;
     text-decoration: none;
  padding:0px 35px;
}

[- KbeçãO - 0]

nada....

se eu aplicasse imagem no fundo daria certo??

mas ai ficaria "feio" ne???

[Vinicius Weber 0]

Cara, testei aqui e deu certo usando seus arquivos. mudei para isso no css e ficou certinho, tenta ae

 

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

#menu ul li a{
     color:#FFF;
     text-decoration: none;
         padding:0px 35px;
}

[- KbeçãO - 0]

show !!!!

uma ultima coisa...

como tiro a margem direita do ultimo <li> ?

depois q fizer isso ta perfeito meu menu...

^^

[Vinicius Weber 0]

Atualiza esses css aqui.

Por que na verdade isso nao é uma margim e sim o resto do background do #menu, eu retirei o background e coloquei no li entendeu?

#menu{

       float: left;
       margin:0 auto;
   width: 970px;
   height: 30px;

}

#menu ul{

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

#menu ul li{
      display: block;
      float:left;
      padding:7px 0px;
      border-right: 1px solid #FFF;
      background: #006;
}

[William Bruno 1501]

como tiro a margem direita do ultimo <li> ?

sugiro colocar uma class no ultimo item:

 

       <li id="li_cont" class="last"><a href="?pg=contato">Contato</a></li>
  </ul>

 

para assim ter compatibilidade com os seletores do IE:

para os outros browsers modernos use o pseudo-seletor: last-child. Porém não vi onde você aplica margem direita nos itens.

[- KbeçãO - 0]

desculpe..

a resposta "n rolou" foi para o ultimo post do vinicius...

vout estar o ser Willian

 

#menu ul li{
      display: block;
      float:left;
      padding:7px 0px;
      border-right: 1px solid #FFF; // aqui a borda
      background: #006;
}

[Vinicius Weber 0]

Fez ae do jeito que falei?

CSS

#menu{

       float: left;
       margin:0 auto;
   width: 970px;
   height: 30px;

}

#menu ul{

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

#menu ul li{
      display: block;
      float:left;
      padding:7px 0px;
      border-right: 1px solid #FFF;
      background: #006;
}

#menu ul li a{
     color:#FFF;
     text-decoration: none;
  width:100%;
  padding:0 35px;

}

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

 

Menu

<div id="menu">
  <ul>
      <li><a href="">Empresa</a></li>
      <li><a href="">Clientes</a></li>
      <li><a href="">Portifólio</a></li>
      <li><a href="">Certificados</a></li>
      <li><a href="">Prêmios</a></li>
      <li><a href="">Parceiros</a></li>
      <li><a href="">Contato</a></li>
  </ul>
</div>

[William Bruno 1501]

      border-right: 1px solid #FFF; // aqui a borda

ahh tá.. é que ali você falou:

 

como tiro a margem direita do ultimo <li> ?

 

só fazer então:

#menu ul li.last, 
#menu ul li:last-child {
   border-right: none;
}

[- KbeçãO - 0]

Deu certo sua respota Willian..

mais uma vez obrigado...

Tópico Resolvido

 

@Vinicius,

fiz sim, mas ñ deu...

 

codigo do menu para qm quiser:

Lembrando que é um menu horizontal

 

<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 class="last"><a href="?pg=contato">Contato</a></li>
               </ul>
</div>

// CSS
#menu{

float: left;
margin:0 auto;
   width: 970px;
   background: #006;
   height: 30px;
text-align:  center;
}

#menu ul{

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

}

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

#menu ul li a{
     color:#FFF;
     text-decoration: none;
     padding:0px 35px;
  float: left;
  height: 
}


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

#menu .last{

border-right: none;

}