Entrar | Registrar | FAQ
Anonymous

Menu de imagens cobrindo todo o topo

+ Postar uma resposta

1 Mensagem Página 1 de 1


Menu de imagens cobrindo todo o topo

por eniocsj » Ter Out 31, 2017 12:20 am

Bom pessoal, minha dúvida parece simples, mas está me dando uma dor de cabeça imensa. Pretendo colocar um número x de imagens como menu fixo no topo da página, ocupando toda largura da mesma, e que fiquem divididas igualmente, como no menu mobile do Facebook. Ja tentei com li{display:inline;width:x%} div, nav, th{width:x%;} e nada. Onde será que estou errando?
Com div's (ou trocando os div's por li [dentro de um ul])
Código: Selecionar tudo
<nav id="menu">
   <div class="item">
      <a href=".">
         <img class="mbtn" src="house.svg"/>
      </a>
   </div>
   <div class="item">
      <a href=".">
         <img class="mbtn" src="envelope.svg"/>
      </a>
   </div>
   <div class="item">
      <a href=".">
         <img class="mbtn" src="link.svg"/>
      </a>
   </div>
   <div class="item">
      <a href=".">
         <img class="mbtn" src="avatar.svg"/>
      </a>
   </div>
</nav>

Com tabelas
Código: Selecionar tudo
<table>
   <tr id="menu">
      <th class="item">
         <a href=".">
            <img class="mbtn" src="house.svg"/>
         </a>
      </th>
      <th class="item">
         <a href=".">
            <img class="mbtn" src="envelope.svg"/>
         </a>
      </th>
      <th class="item">
         <a href=".">
            <img class="mbtn" src="link.svg"/>
         </a>
      </th>
      <th class="item">
         <a href=".">
            <img class="mbtn" src="avatar.svg"/>
         </a>
      </th>
   </tr>
</table>

O css (ignore o display:inline; quando com tabelas)
Código: Selecionar tudo
#menu{
   width:100%;
   position:fixed;
}
.item{
   display:inline;
   width:25%;
}

Como são quatro ícones, a área (div, li ou th) de cada um deveria ocupar 25% da largura da página, no entanto não é isso que ocorre. Não posso usar {em, rem, px, pc} pois a largura variará.
Avatar de usuário

eniocsj

  • Mensagens: 1
  • Data de registro: Seg Out 30, 2017 11:52 pm


+ Postar uma resposta

Página 1 de 1