Pular para o conteúdo
murad.guide

As Três Camadas

Capítulo 7

Navegação e float

4 min de leitura 686 palavras 2 gravuras

Este capítulo transforma a lista do menu numa fileira e coloca uma foto ao lado do texto. O exemplo está em exemplos/07-navegacao/. Abra as quatro páginas e confira qual item do menu está marcado como atual.

Float tira um elemento do fluxo para o texto contornar. Neste volume o float serve só para imagem com texto ao lado. A grade da página — cabeçalho, cartões, rodapé — não usa float.

Trabalhe na cópia inicio desta etapa. Leia e digite o código indicado; mude apenas uma coisa. Antes de recarregar, escreva o resultado que espera. Depois compare com a referência completa ao lado. Se algo falhar, confira primeiro o arquivo salvo e o caminho aberto.

O que você vai aprender

O menu é uma lista

Os destinos do site já são uma ul dentro de nav. O significado não muda quando a fileira fica horizontal. Quem usa leitor de tela ainda ouve uma lista de links.

<nav class="nav" aria-label="Principal">
  <ul>
    <li><a href="index.html" aria-current="page">Início</a></li>
    <li><a href="oficinas.html">Oficinas</a></li>
    <li><a href="sobre.html">Sobre</a></li>
    <li><a href="contato.html">Contato</a></li>
  </ul>
</nav>

list-style: none tira o disco. Sem isso, cada destino ganha uma bolinha ao lado.

.nav ul {
  list-style: none;
  padding: 0;
  margin: 0.8rem 0 0;
}

Pare e experimente. Tire list-style: none. Recarregue. Os discos devem aparecer. Recoloque a regra.

Fileira com inline-block

display: inline-block deixa cada li aceitar margem e sentar na mesma linha.

.nav li {
  display: inline-block;
  margin-right: 1rem;
}

O espaço entre as tags no HTML vira um vão pequeno. Nesta etapa isso é aceitável. O capítulo 8 troca o cabeçalho por Flexbox e o vão some.

Não use float nos itens do menu. O pai perde a altura e o conteúdo seguinte sobe.

Menu horizontal feito de lista, sem discos

A página atual

aria-current="page" marca o item que corresponde ao arquivo aberto. Só um item por página. Em oficinas.html o atributo vai no link Oficinas, não no Início.

.nav a[aria-current="page"] {
  border-bottom: 3px solid #c45c26;
  text-decoration: none;
}

O seletor de atributo escolhe o link que tem esse valor. A pessoa que vê a tela ganha um traço. A pessoa que ouve a página ouve “página atual”.

Erro comum: copiar o menu e esquecer de mover o aria-current. O leitor de tela anuncia o link errado. Em cada arquivo, o atributo acompanha o href daquela página.

Pare e experimente. Abra sobre.html. O traço laranja deve estar em Sobre. Se estiver em Início, o HTML foi copiado sem ajuste.

Float só na imagem com texto

float: left (ou right) tira a imagem do fluxo. O texto seguinte ocupa o espaço que sobra.

<p class="recorte">
  Espaço cultural fictício no Alto da Sé, em Olinda.
  <img src="imagens/oficina-ceramica.png" alt="Bancada de cerâmica com tigelas de barro ainda úmidas." width="800" height="500">
</p>
.recorte img {
  float: left;
  width: 12rem;
  margin: 0 1rem 0.5rem 0;
}
.recorte::after {
  content: "";
  display: table;
  clear: both;
}

clear: both impede que o bloco seguinte suba ao lado da imagem. O ::after no pai “segura” a altura. Sem isso, o rodapé pode encostar na foto.

Imagem à esquerda, texto contornando, clear no fim do recorte

Pare e experimente. Comente o clear: both. Recarregue. O bloco seguinte deve encostar na imagem. Recoloque o clear.

Não flutue a página

Três cartões com float: left parecem uma grade no seu monitor. Em outra largura as alturas quebram e o rodapé invade. O pai flutuado fica com altura zero.

O capítulo 8 coloca os cartões em Flexbox. Hoje eles podem empilhar. Isso é melhor do que um float “quase funcionando”.

Não use float para o cabeçalho, para o menu, para o rodapé nem para as colunas do site. Float resolve um recorte de foto e texto. Só isso.

Atividades

  1. Por que o menu continua sendo uma ul depois de ficar horizontal?
  2. O que aria-current="page" informa, e quantos podem existir por página?
  3. Qual o papel do clear no recorte da home?
  4. No exemplo 07-navegacao, os cartões da home usam float? Por quê?

Respostas comentadas

  1. O significado não mudou: são destinos de navegação. O CSS só muda a disposição.
  2. Informa qual link é a página aberta. Só um por página.
  3. Impede que o próximo bloco (ou o rodapé) suba ao lado da imagem flutuada. O pai recupera a altura.
  4. Não. Float nesta etapa vale só para a foto do recorte. Os cartões esperam o Flexbox.

Referências