ir para o conteúdo | ir para o menu | sobre os links "ir para"

InfoWester

www.infowester.com

Notícias

No blog

Tamanho
do texto

Aumentar o tamanho do texto Diminuir o tamanho do texto

Web

Menu em abas em CSS num layout tableless

Por Erika Sarti, em 31/10/2006.

O menu em abas é uma das tendências atuais do web design. A maioria dos sites com esse recurso segue a mesma estrutura: cabeçalho, menu, conteúdo e rodapé utilizando o modo tableless (ou seja, sem tabelas) de organizar esses elementos. Provavelmente você já viu muitos sites que utilizam esse esquema, e este tutorial ensinará como montar o seu.

HTML e CSS

Aqui usaremos dois arquivos: pagina.htm, com o código HTML, e style.css, com a folha de estilo. A estrutura básica do nosso código HTML é a seguinte:

<html>

<head>
<title> Menu em abas em CSS num layout tableless </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
(conteúdo)
</body>

</html>

Note que não está sendo usando um Doctype ou meta-tags, mas você deve adicionar esses complementos depois.

No nosso arquivo style.css, vou começar pelo estilo da tag body:

<!--
	body { background: #EEE;
	color: #000; font-size: 11px;
	font-family: Verdana, sans-serif;
	margin: 0; padding: 0;
	text-align: center;
	}
	-->

Nele, foi definido que a cor de fundo será cinza claro, o texto será na cor preta, o tamanho será de 11 pixels e a fonte utilizada na página será Verdana. Se o computador do usuário não tiver essa fonte instalada, será utilizada a segunda opção: uma fonte genérica sem serifa.

Já a linha margin: 0; padding: 0; determina que não haverá margem ou espaçamento no corpo do documento. Na prática, o nosso conteúdo ficará "colado" ao topo da página, sem nenhum espaço. Notou que junto com os valores não há unidade de medida (px, pt)? Isso acontece porque o valor é zero - quando você utilizar qualquer outro valor, não esqueça de determinar a unidade!

O text-align: center; é um truque para centralizar o conteúdo da nossa página, que continua no próximo elemento.

O div externo

Agora sim, vamos à formatação propriamente dita. Começando com um div centralizado com 750 pixels de largura, o que assegura que a página estará adequada às resoluções 800x600 e 1024x768 pixels.

No arquivo HTML, basta acrescentar duas linhas: a tag de abertura e a de fechamento do div, que será identificado como "tudo":

<body>

<div id="tudo">

</div>

</body>

É no arquivo CSS que vamos definir as propriedades desse elemento:

#tudo {
	background: #FFF;
	border: #000 1px solid;
	width: 750px;
	margin: auto;
	text-align: left;
	}

Aqui definimos o que o fundo será branco, a borda será preta com 1 pixel de largura e com linha sólida e a largura do div será de 750 pixels. O atributo margin: auto; é utilizado como um truque para alinhar o elemento no centro da página: como a margem é automática, o navegador vai distribuí-la igualmente dos dois lados do elemento, centralizando-o.

Já o text-align: left; é a segunda parte do truque para centralizar o conteúdo: sem esse atributo, todo o texto da página ficaria centralizado quando ela fosse exibida no Internet Explorer. Isso se chama herança, assunto a ser abordado mais adiante.

Inserindo um cabeçalho

Vamos agora inserir o cabeçalho. No seu código HTML, você vai acrescentar:

<div id="tudo">

<div id="cabecalho">

   cabe&ccedil;alho

</div>

</div>

Aqui vamos colocar apenas a palavra "cabeçalho", mas você pode utilizar esse espaço para inserir um logotipo, banner, etc.

No nosso arquivo de estilos, damos a formatação ao elemento:

#cabecalho { background: #CCC; font-size: 18px; text-align: 
        center; padding: 30px; }

Aqui utilizamos um cinza para o fundo, fonte no tamanho 18 pixels, alinhamento centralizado do texto e um espaçamento de 30 pixels, para deixar o cabeçalho alto. Todos esses valores podem e devem ser adaptados ao seu layout a partir do CSS e da sua criatividade!

Próxima página »