www.infowester.com
Páginal inicial 
Hardware
Software
GNU/Linux
Dicas
Tutoriais
Colunas
Web
Notícias
Blog
Newsletter
Fórum
Contato
Shopping Novo!
Notícias Recentes
Últimas do Blog
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ç&otild;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ç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!