Inserindo o menu

Finalmente chegamos ao trecho mais importante do nosso código: o menu propriamente dito.

Vamos começar adicionando o menu no nosso código HTML logo abaixo do cabeçalho:

<div id="menu">
  <ul>
    <li><a href="link1.htm">link1</a></li>
    <li><a href="link2.htm">link2</a></li>
    <li><a href="link3.htm">link3</a></li>
    <li><a href="link4.htm">link4</a></li>
    <li><a href="link5.htm">link5</a></li>
  </ul>
</div>

Sim, nosso menu é uma lista ordenada! Essa é uma amostra de como o CSS e a criatividade podem fazer efeitos incríveis em nossas páginas sem o uso de JavaScript ou Flash.

Sem o CSS, o código acima tem a seguinte aparência:

• link1
• link2
• link3
• link4
• link5

Então vamos adicionar o estilo. Primeiramente, é necessário definir as características do div "menu":

#menu {
	background: #000;
	height: 27px;
	margin: 0; padding: 0;
	}

Em height: 27px; definimos a altura do menu; porém, essa altura vai variar de acordo com a fonte, o espaçamento e outros parâmetros. Nosso exemplo tem 27 pixels de altura, mas talvez você precise ajustar esse valor com "tentativa-e-erro" até chegar num tamanho que gere o mesmo resultado em qualquer navegador.

Como estamos utilizando uma lista ordenada, vamos definir a formatação dela:

#menu ul {
	margin: 0; padding: 0;
	margin-left: 6px;
	}

Aqui, margin-left: 6px; define a distância entre a primeira aba e a borda esquerda do elemento.

Em CSS, se uma propriedade em particular não é definida, o elemento herda essa propriedade do elemento superior. No nosso caso, o tipo de fonte definido no elemento body foi herdado por todos os elementos dentro dele. No cabeçalho, definimos um tamanho de fonte diferente, e foi esse valor que prevaleceu; já no menu, o tamanho da fonte não foi definido, então prevalece o 11px do elemento superior. É por isso que o CSS é chamado folha de estilo em cascata (Cascading Style Sheets).

Agora vamos definir o estilo dos itens do menu:

#menu ul li {
	display: inline;
	}

A propriedade display: inline; é o que define que os itens da lista aparecerão lado a lado, e não um em cada linha.

O próximo passo é definir o estilo das abas. Note que cada aba é um link; portanto, o elemento que vai receber a formatação é o a:

#menu ul li a {
	background: #444;
	color: #FFF;
	border: 1px #FFF solid;
	border-bottom: 1px #000 solid;
	float: left;
	padding: 5px 7px;
	margin: 2px;
	text-decoration: none;
	}

Neste código temos algumas novidades:

• A propriedade border-bottom se refere à borda inferior do elemento. Também existem as propriedades border-top (topo), border-left (esquerda) e border-right (direita). Se você vai definir um estilo específico para um desses valores, sempre faça isso depois que definir a borda geral. Lembra da cascata? Se você definir a borda inferior e depois a borda geral, a segunda irá se soprepor à primeira;


• Em float: left;, definimos o alinhamento do menu à esquerda;
  
• Quando a propriedade padding apresenta dois valores, como em padding: 5px 7px;, o primeiro se refere ao espaçamento horizontal (em cima e embaixo) e o segundo ao espaçamento vertical (do lado esquerdo e do lado direito).;
  
• Provavelmente text-decoration: none; já lhe é familiar: essa propriedade tira o sublinhado do link.

Se você não tem muita experiência com CSS, deve estar se perguntando o que significam tantos elementos. Por partes: #menu é o elemento principal; ul é a lista ordenada; li é o item da lista e a é o link. Pensando na ordem inversa, #menu ul li a define o estilo do link do item da lista do menu. Afinal, se você definisse o estilo somente com a {color: #000;}, isso afetaria todos os links do documento, quando só queremos formatar um link específico de um div.

Realçando a aba

Aqui, uma das partes mais interessantes das abas: quando o usuário passar o mouse por cima de uma, ela fica realçada. Como fazer isso? Simples: acabamos de definir o estilo da aba como um link: agora vamos definir o estilo da aba realçada da mesma maneira que definimos um link realçado, com o atributo a:hover.

No nosso arquivo CSS acrescentamos o seguinte trecho:

#menu ul li a:hover {
	background: #FFF;
	color: #F00;
	border: #F00 1px solid;
	border-bottom: none;
	text-decoration: none;
	}

Nossa aba realçada terá fundo branco e texto e borda em vermelho. A borda inferior continua omitida, assim como o sublinhado do link.

Acrescentando o conteúdo e o rodapé

Finalizando, acrescentaremos o conteúdo e o rodapé do nosso layout.

No arquivo HTML, acrescentamos os divs para os dois elementos:

<div id="conteudo">

   conteúdo

</div>

<div id="rodape">

   rodapé

</div>

Na nossa folha de estilo, definimos a aparência desses dois elementos:

#conteudo {
	clear: both;
	font-size: 12px;
	padding: 5px;
	text-align: center;
	}


#rodape {
	clear: both;
	background: #000;
	color: #FFF;
	padding: 5px;
	text-align: center;
	}

A novidade aqui é o clear: both;, que posiciona o elemento totalmente abaixo do elemento superior (que está sendo alinhado com float). No nosso caso, se tivéssemos definido uma largura de 300 pixels para o menu e de 200 pixels para o conteúdo, como o menu leva o atributo float: left;, o conteúdo seria encaixado à direita dele.

Note que durante todo o tutorial utilizamos codificação no lugar de caracteres acentuados. No meu portfolio você encontra uma lista com todos esses códigos, para ter certeza de que a acentuação do seu site será exibida corretamente em qualquer navegador com qualquer codificação de linguagem.

Veja aqui como ficou nossa página. Você pode baixar o arquivo HTML e o CSS para analisar com calma.

« Página anterior

Erika Sarti é web designer e trabalha como free-lancer desde 2000. É a responsável pelo novo layout do InfoWester, basicamente feito com tableless, um de seus assuntos preferidos. Seu portfólio está em www.erikasarti.net.