Uma barra de navegação consiste em uma imagem gráfica colocada em uma linha de células da tabela. Como o uso de tabelas para localizar qualquer conteúdo de página que não seja tabela não é mais recomendado, muitas pessoas que criam a Web estão procurando (novas) maneiras de usar tabelas estruturadas.
Marcação XHTML e formatação CSS para criar barras de navegação.
Uma barra de navegação CSS simples
Talvez a solução mais simples para criar uma barra de navegação de texto no estilo CSS seja colocar todos os links em uma única linha de texto, como no Exemplo A.
Esta abordagem parece razoável e intuitiva. Mas o problema é que colocar todos os links em uma linha de texto dificulta o controle do espaço em branco entre os links e antes e depois deles. Então, para evitar que todos os seus links fiquem amontoados, é melhor
Depois disso, você normalmente terá que inserir barras verticais (barras verticais) e caracteres de espaço em branco que não sejam de nova linha como delimitadores.
Como mostra o código abaixo, o resultado dificilmente é a marcação clara e estruturada que desejamos.
| A seguir está o conteúdo citado: <div id="navbar1"> <a href="link1a.html">Botão 1</a> <a href="link2a.html ">Botão 2</a> | Botão 3</a> </div> |
Barra de navegação CSS baseada em lista Outra maneira de criar uma barra de navegação CSS é usar as tags <ul> e <li> para representar links como uma lista não ordenada.
À primeira vista, usar uma lista não ordenada para uma barra de navegação parece contra-intuitivo, porque estamos acostumados a pensar em uma lista não ordenada como uma lista de itens empurrados verticalmente, com um marcador na frente de cada um. Isto parece inconsistente com a orientação horizontal da barra de navegação.
No entanto, a estrutura lógica de uma lista como uma coleção de itens de lista independentes pode ser aplicada a links na barra de navegação e as regras CSS permitem forçar a substituição da apresentação padrão dos itens da lista, eliminar marcadores e organizar os itens da lista na página; de flutuação abaixo.
Sabendo disso, vamos agora dar uma olhada no Exemplo B, criando uma barra de navegação no estilo CSS e rotulada como XHTML com base em uma lista não ordenada.
Aqui está a marcação XHTML:
| A seguir está o conteúdo citado: <div id="navbar2"> |
Aqui está o código CSS para converter uma lista de links de texto em uma barra de navegação:
| A seguir está o conteúdo citado: div#navbar2 { |