Menu horizontal com listas e CSS
Uma das coisa que sempre me tirava do sério, eram as listas, principalmente se fosse para fazer menus horizontais. Bom, sempre que você tem um menu de navegação, ou uma barra de navegação, querendo ou não (como diz Diego Eis), você vai ter que coloca-los em uma lista de links.
A minha dúvida era para fazer com que uma lista, onde os itens normalmente estão um embaixo do outro, ficar na horizontal, mas sem retirar as tags <li>, o que prejudicaria a semântica do código.
Então vamos la! Primeiro vamos criar uma página com uma lista de links:
<html>
<head>
<title>Menu horizontal com listas</title>
</head>
<body>
<div id="menuhorizontal">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Notícias</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>
</body>
</html>
Agora vamos ao CSS. As propriedades que serão usadas são Display e Padding. O display:inline; servirá para fazer com que os itens da lista, que normalmente são elementos em “bloco”, se comportem como elementos “inline”, e o padding:10px; servirá para separar os elementos uns dos outros.
Veja como fica:
<style type="text/css">
#menuhorizontal li{
display:inline;
padding:10px;
border:#000 1px dotted;
}
</style>
Prontinho, agora é só ir adicionando mais estilos e deixar o menu do jeito que você quiser.
Lembrando que o CSS vai dentro das tags <head>.
Pra todos um abraço e até a próxima!
Cara…
muito 10 essa matéria!
Flow
Valeu!
Com certeza você já deve conhecer, mas apenas para citar mais uma referência, um site que me ajudou muito quando aprendi um pouco sobre a dupla XHTML+CSS foi o http://www.maujor.com, tem muita coisa interessante sobre o assunto por lá. Vale a visita.
Até mais!
[...] quem gostou do meu Menu com listas e CSS, vale a pena [...]