Menu de imagens cobrindo todo o topo
1 message Page 1 sur 1
Menu de imagens cobrindo todo o topo
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])
- Code: Tout sélectionner
<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
- Code: Tout sélectionner
<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)
- Code: Tout sélectionner
#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á.
Page 1 sur 1