|
 Já faz um tempão que os webdesigners brigam com as tabelas numa página HTML porque são rígidas, estáticas, chatas de configurar, costumam embaralhar o layout quando se muda o tamanho da janela ou quando se altera a resolução e engessam qualquer impulso criativo. Pois aqui está um tutorial que ensina como se livrar destes monolitos 
Introdução
Apesar das muitas reclamações, as tabelas não têm culpa. É que durante muito tempo estão sendo usadas para uma tarefa para a qual não foram projetadas - tabelas servem para listar dados e não para distribuir os elementos de conteúdo em páginas web. Obviamente, a culpa é dos reclamões 
Este é um tutorial bem simples que ensina como planejar o layout e como criar páginas "boas para os olhos" usando apenas as propriedades de elementos do HTML. Antes de começar com o trabalho propriamente dito, algumas recomendações:
- Faça apenas uma coisa de cada vez. Parece coisa simples, mas a tendência é começar a mudar coisas a torto e a direito e só depois fazer um teste. Caso aparecer um erro ou alguma formatação não sair como desejado... hmmmm... fica difícil encontrar o bug.
- Antes de começar a criar um layout baseado em CSS, decida quais navegadores você pretende (ou precisa) atender. Os mais comuns são o Internet Explorer, Firefox, Opera, Netscape e Mozilla.
- Se puder, faça os testes em vários tipos de browsers. Apesar de existir um padrão definido para o CSS, nem todos os navegadores o obedecem e podem dar resultados imprevisíveis (o pior deles é o IE da MS).
- Faça um esquema do layout. Rabisque numa folha de papel o que você tem em mente, mesmo se você usar uma página como exemplo. Defina bem as áreas e dê um nome para cada uma delas - de preferência use nomes que indiquem a função das mesmas.
 Requisitos: conhecimentos básicos de HTML, conhecimento básico/intermediário de CSS e um pouco de criatividade 
Agora, vamos ao que interessa. Arregace as mangas e siga as etapas.
Esquema de layout
 Layout do exemplo do tutorial Como não sei desenhar direito, fiz um esqueminha do layout que servirá de exemplo para este tutorial. O rabisco mostra o seguinte:
A área em vermelho é a área principal. No topo da área principal fica o cabeçalho. Logo abaixo do cabeçalho fica uma área de navegação. Abaixo da área de navegação, à esquerda fica a área reservada para o texto, o conteúdo da página, com a caixa do menu à direita. Na parte de baixo, a área do rodapé da página.
Definidas as áreas (ou compartimentos), chegou a hora de dar nomes aos bois. Evite nomes em inglês muito comuns para evitar possíveis conflitos com nomes que possam estar em scripts CSS que você eventualmente tenha "emprestado" de outros sites. No nosso caso, vou usar os seguintes nomes:
- principal
- cabeca
- navega
- meu_menu
- texto
- rodape
A página HTML
A primeira coisa é criar o esqueleto da página HTML:
<html>
<head>
<title>Adeus tabelas</title>
</head>
<body>
</body>
</html>
Em seguida, vamos criar as áreas usando elementos <div> com o atributo id (prefira id porque este atributo se sobrepõe ao atributo class). Não se esqueça de que a área principal contém todos os outros elementos:
<html>
<head>
<title>Adeus tabelas</title>
</head>
<body>
<div id="principal">
<div id="cabeca"></div
<div id="navega"></div>
<div id="meu_menu"></div>
<div id="texto"></div>
<div id="rodape"></div>
</div>
</body>
</html>
Posição das áreas <div>
Neste ponto é preciso tomar decisões importantes para "pilotar" o comportamento das áreas na página. Como estas decisões dependem de experiência, talvez esta seja a etapa mais difícil. O que precisa ser decidido é:
- O layout será do tipo auto-ajustável, de largura fixa, baseado na unidade em ou uma combinação destas possibilidades?
- O layout deve ficar no centro da tela?
- Quais áreas devem ser flutuantes?
- Quais são as áreas que ficarão no fluxo normal?
- Será necessária alguma posição absoluta?
Para diminuir sua ansiedade, uma explicaçãozinha rápida: posição absoluta é quando as coordenadas da posição são fixadas, float indica para onde o elemento deve flutuar e inline quando não é uma coisa nem outra - o elemento entra no fluxo normal da página. No caso do float, se o elemento flutuar para a esquerda, ele será "inundado" pelo resto do conteúdo pela direita; se flutuar para a direita, será "inundado" pela esquerda. Com estas informações acho que dá para entender o mapa da mina deste tutorial:
- principal será inline e centrada.
- cabeca será inline.
- navega será inline.
- meu_menu flutuará à direita (float: right).
- texto será inline com uma margem à esquerda para não grudar na área do menu e para dar a impressão de duas colunas.
- rodape será inline com a característica clear (liberar) para que sempre fique abaixo dos elementos flutuantes.
Cores como guia
Para facilitar a localização e observar melhor as alterações que serão feitas em cada uma das áreas do layout, nada como usar algumas cores.
Vamos começar com o área principal e tingi-la de vermelho através do CSS colocado na área <head> da página:
<html>
<head>
<title>Adeus tabelas</title>
<style type="text/css" media="screen">
#principal {
margin: 1em auto;
width: 650px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="principal">
<div id="cabeca"></div
<div id="navega"></div>
<div id="meu_menu"></div>
<div id="texto"></div>
<div id="rodape"></div>
</div>
</body>
</html>
A área do cabeçalho
O CSS da área do cabeçalho é o mostrado abaixo:
<html>
<head>
<title>Adeus tabelas</title>
<style type="text/css" media="screen">
#principal {
margin: 1em auto;
width: 650px;
height: 100px;
background-color: red;
}
#cabeca {
height: 45px;
background-color: fuchsia;
}
</style>
</head>
<body>
<div id="principal">
<div id="cabeca"></div
<div id="navega"></div>
<div id="meu_menu"></div>
<div id="texto"></div>
<div id="rodape"></div>
</div>
</body>
</html>
A área de navegação
O CSS da área de navegação produz o seguinte resultado:
<html>
<head>
<title>Adeus tabelas</title>
<style type="text/css" media="screen">
#principal {
margin: 1em auto;
width: 650px;
height: 100px;
background-color: red;
}
#cabeca {
height: 45px;
background-color: fuchsia;
}
#navega {
height: 25px;
background-color: green;
}
</style>
</head>
<body>
<div id="principal">
<div id="cabeca"></div
<div id="navega"></div>
<div id="meu_menu"></div>
<div id="texto"></div>
<div id="rodape"></div>
</div>
</body>
</html>
A área do menu
O CSS da área do menu produz o seguinte resultado:
<html>
<head>
<title>Adeus tabelas</title>
<style type="text/css" media="screen">
#principal {
margin: 1em auto;
width: 650px;
height: 100px;
background-color: red;
}
#cabeca {
height: 45px;
background-color: fuchsia;
}
#navega {
height: 25px;
background-color: green;
}
#meu_menu {
float: right;
width: 180px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="principal">
<div id="cabeca"></div
<div id="navega"></div>
<div id="meu_menu"></div>
<div id="texto"></div>
<div id="rodape"></div>
</div>
</body>
</html>
A área de texto
O CSS da área do texto produz o seguinte resultado:
<html>
<head>
<title>Adeus tabelas</title>
<style type="text/css" media="screen">
#principal {
margin: 1em auto;
width: 650px;
height: 100px;
background-color: red;
}
#cabeca {
height: 45px;
background-color: fuchsia;
}
#navega {
height: 25px;
background-color: green;
}
#meu_menu {
float: left;
width: 180px;
height: 100px;
background-color: yellow;
}
#texto {
margin-right: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="principal">
<div id="cabeca"></div
<div id="navega"></div>
<div id="meu_menu"></div>
<div id="texto"></div>
<div id="rodape"></div>
</div>
</body>
</html>
A área do rodapé
O CSS da área do rodapé produz o seguinte resultado:
<html>
<head>
<title>Adeus tabelas</title>
<style type="text/css" media="screen">
#principal {
margin: 1em auto;
width: 650px;
height: 100px;
background-color: red;
}
#cabeca {
height: 45px;
background-color: fuchsia;
}
#navega {
height: 25px;
background-color: green;
}
#meu_menu {
float: left;
width: 180px;
height: 100px;
background-color: yellow;
}
#texto {
margin-right: 200px;
height: 200px;
background-color: aqua;
}
#rodape {
clear: both;
height: 20px;
background-color: lime;
}
</style>
</head>
<body>
<div id="principal">
<div id="cabeca"></div
<div id="navega"></div>
<div id="meu_menu"></div>
<div id="texto"></div>
<div id="rodape"></div>
</div>
</body>
</html>
Antes de passar para a próxima etapa, verifique se a aparência do layout é a mesma nos navegadores para os quais ele se destina. Por enquanto, fazer qualquer alteração é muito fácil porque os compartimentos ainda estão sem conteúdo e as cores ajudam muito. Esta técnica de atribuir cores, posicionar e testar pode ser usada durante todo o processo de produção.
O conteúdo
Depois que todas as áreas tiverem sido testadas, tiramos as atribuições de altura (height) e colocamos um conteúdo qualquer em cada uma delas.
Nome do Site
Título aqui
Quinta, 1 de Fevereiro de 2007
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Copyright © Nome do Site 2007
Sobre as fontes
Fontes são, por princípio, um assunto polêmico - cada um tem uma opinião diferente. A vantagem quando não há uma opinião definida é que, seja lá o que fizermos, está certo
Existem duas correntes principais: não definir chongas, deixando a decisão para o navegador ou para folhas de estilo dos usuários, ou usar unidades relativas para definir o tamanho das fontes.
Unidades relativas são fáceis de implementar quando se usa um ou uma combinação dos três métodos a seguir:
Nos compartimentos
Podemos especificar o tamanho da fonte por área ou compartimento, além de determinar o tamanho da fonte para cada um dos elementos do compartimento. Por exemplo:
#texto h1 { font-size: 140% }
#navega h1 { font-size: 120% }
No body
Um tamanho relativo pode ser aplicado ao elemento body fazendo com que todos os outros elementos da página usem esta medida como base.
body { font-size: 85% }
Alguns navegadores não lidam direito com esta regra, principalmente no trato com tabelas.
Nos elementos
Pode-se determinar o tamanho da fonte de acordo com o elemento HTML. Por exemplo:
p { font-size: 85% }
h1 { font-size: 150% }
Este método, porém, pode dar muita dor de cabeça se esquecermos que os elementos herdam características de elementos hierarquicamente superiores. Por exemplo, se fizermos uma lista com uma sub-lista, do tipo
<ul>
<li>...</li>
<ul>
<li>...</li>
</ul>
</ul>
e ul tiver sido definido com tamanho 85%, a sub-lista fará uma tamanho de fonte de 85% do tamanho da lista principal, ou seja, 85% de 85% = 72.25%. Isto pode ser corrigido com a seguinte mandracaria:
ul ul { font-size: 100% }
Em geral, fixar o tamanho da fonte através de compartimentos e elemento body é o mais aconselhável. Feito isto, o tamanho indicado em body serve de base para indicar o tamanho da fonte dos elementos dos compartimentos através de porcentagem ou em em.
O corpo da página
A área principal do nosso layout encontra-se no corpo (body) da página e não a ocupa totalmente. Estabelecemos uma largura de 650 pixels e a altura depende do conteúdo dos compartimentos que ela contém. Com grande probabilidade vamos ter áreas do corpo ao redor do compartimento principal que ficarão expostas. Vamos tratar delas agora e aproveitar para determinar outras características (como o tamanho básico da fonte, por exemplo).
Só para ficar mais evidente, vamos usar uma imagem de fundo que não é lá aquelas coisas - é só pra quebrar um galho.
Nome do Site
Título aqui
Quinta, 1 de Fevereiro de 2007
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Copyright © Nome do Site 2007
O CSS do corpo é o seguinte:
body {
margin: 0;
padding: 0;
font: 85% arial, helvetica, sans-serif;
text-align: center;
color: #333;
background-color: #D6D6D6;
background-image: url(/sua_url/img_39.gif);
}
O compartimento principal
Vamos tratar agora da área principal do nosso layout. O fundo será branco e a cor da borda será trocada:
Nome do Site
Título aqui
Quinta, 1 de Fevereiro de 2007
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Copyright © Nome do Site 2007
#principal {
margin: 1em auto;
width: 650px;
text-align: left;
background-color: #fff;
border: 1px solid #676767;
}
O cabeçalho
O cabeçalho do layout também receberá uma imagem de fundo. O fundo será branco e a cor da borda será trocada:
Título aqui
Quinta, 1 de Fevereiro de 2007
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Copyright © Nome do Site 2007
#cabeca {
height: 45px;
background-image: url(sua_url/header.jpg);
background-repeat: no-repeat;
background-position: 0 0;
border-bottom: 1px solid #fff;
position: relative;
}
A barra de navegação
A barra de navegação do layout recebe um trato especial. Veja abaixo o resultado e o CSS correspondente:
Título aqui
Quinta, 1 de Fevereiro de 2007
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Copyright © Nome do Site 2007
#navega {
background-color: #9FA41D;
color: #272900;
padding: 2px 0;
margin-bottom: 22px;
}
#navega ul {
margin: 0 0 0 20px;
padding: 0;
list-style-type: none;
border-left: 1px solid #C4C769;
}
#navega li {
display: inline;
padding: 0 10px;
border-right: 1px solid #C4C769;
}
#navega li a {
text-decoration: none;
color: #272900;
}
#navega li a:hover {
text-decoration: none;
color: #fff;
background-color: #272900;
}
O menu
O menu do layout deve ter uma linha divisória à esquerda e mais algumas alterações. Veja abaixo o resultado e o CSS correspondente:
Título aqui
Quinta, 1 de Fevereiro de 2007
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Copyright © Nome do Site 2007
#meu_menu2 {
float: right;
width: 165px;
border-left: 1px solid #C5C877;
padding-left: 15px;
}
#meu_menu2 ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
line-height: 165%;
}
O texto
O fundo da área de texto deve ser modificado. Veja abaixo o resultado e o CSS correspondente:
Título aqui
Quinta, 1 de Fevereiro de 2007
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Copyright © Nome do Site 2007
#texto { margin: 0 200px 40px 20px; }
#texto p { line-height: 165%; }
O texto II
Na parte inferior da área do texto há alguns links. Estes também merecem um trato, mas, como não estão num compartimento próprio, terão seu estilo definido através de uma classe que resolvi chamar de ref.
Título aqui
Quinta, 1 de Fevereiro de 2007
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Copyright © Nome do Site 2007
.ref { border-bottom: 1px solid #C5C877; }
.ref ul {
list-style-type: none;
text-align: right;
margin: 1em 0;
padding: 0;
font-size: 95%;
}
.ref li {
display: inline;
padding: 0 0 0 7px;
}
O rodapé
Finalmente o rodapé. Trazendo esta área para um estilo apropriado terminamos o projeto deste layout e o tutorial.
Título aqui
Quinta, 1 de Fevereiro de 2007
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Copyright © Nome do Site 2007
#rodape {
clear: both;
color: #272900;
background-color: #9FA41D;
text-align: right;
padding: 5px;
font-size: 90%;
}
O script CSS completo
body {
margin: 0;
padding: 0;
font-size: 85%;
font-family: arial, helvetica, sans-serif;
text-align: center;
color: #333;
background-color: #D6D6D6;
background-image: url(/sua_url/img_39.gif);
}
a:link { color: #B52C07; }
a:visited { color: #600; }
a:hover, a:active {
color: #fff;
background-color: #B52C07;
}
h2 {
color: #B52C07;
font: 120% georgia, times, "times new roman", serif;
font-weight: bold;
margin: 0 0 2px 0;
}
h2 a { text-decoration: none; }
h3 {
color: #5B5E0E;
font: 106% georgia, times, "times new roman", serif;
font-weight: bold;
margin-top: 0;
border: none;
}
#principal {
margin: 1em auto;
width: 650px;
text-align: left;
background-color: #fff;
border: 1px solid #676767;
}
#cabeca {
height: 45px;
background-image: url(images/stories/info_tuto/header.jpg);
background-repeat: no-repeat;
background-position: 0 0;
border-bottom: 1px solid #fff;
position: relative;
}
#navega {
background-color: #9FA41D;
color: #272900;
padding: 2px 0;
margin-bottom: 22px;
}
#navega ul {
margin: 0 0 0 20px;
padding: 0;
list-style-type: none;
border-left: 1px solid #C4C769;
}
#navega li {
display: inline;
padding: 0 10px;
border-right: 1px solid #C4C769;
background-image: none;
}
#navega li a {
text-decoration: none;
color: #272900;
}
#navega li a:hover {
text-decoration: none;
color: #fff;
background-color: #272900;
}
#meu_menu {
float: right;
width: 165px;
border-left: 1px solid #C5C877;
padding-left: 15px;
}
#meu_menu ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
line-height: 165%;
}
#texto { margin: 0 200px 40px 20px; }
#texto p { line-height: 165%; }
.ref { border-bottom: 1px solid #C5C877; }
.ref ul {
list-style-type: none;
text-align: right;
margin: 1em 0;
padding: 0;
font-size: 95%;
}
.ref li {
display: inline;
padding: 0 0 0 7px;
background-image: none;
}
#rodape {
clear: both;
color: #272900;
background-color: #9FA41D;
text-align: right;
padding: 5px;
font-size: 90%;
}
Observações
Os scripts de CSS muitas vezes ficam grandes demais. Como é bom colocá-los no topo das páginas HTML que escrevemos, quando vamos trabalhar no conteúdo é um tal de rolar a página para cima e para baixo que chega a dar nos nervos. Qual é a saída? Criar um arquivo css independente e incluí-lo na página como mostrado a seguir:
<html>
<head>
<title>Adeus tabelas</title>
<link rel="stylesheet" href="stylesheet1.css" media="screen">
</head>
<body>
...
Existe um jeito mais chique de incluir folhas de estilo - é através de @import, que permite várias sintaxes:
@import url("../stylesheet.css");
@import url(../stylesheet.css);
@import url(../stylesheet.css) screen;
@import "../stylesheet.css";
Um exemplo de inclusão deste tipo pode ser a seguinte:
<style type="text/css" media="screen">@import url("stylesheet2.css");</style>
Acontece que este método só é entendido pelos navegadores mais modernos, ou seja, os mais velhinhos, por não saberem o que fazer, acabam não incluindo a folha de estilo. Ao invés de ser uma desvantagem, esta característica pode ser aproveitada para evitar com que browsers mais antigos leiam folhas de estilo de forma errada e acabem mostrando páginas desfiguradas.
Fontes e Referências
- Um muito obrigada especial vai para Russ Weakley da maxdesign. A idéia das caixas coloridas é dele e o roteiro deste tutorial também. Além do mais, afanei os gráficos do exemplo
 , ou seja, este tutorial é praticamente uma tradução. Não deixem de visitar o site da maxdesign e de ler o tutorial do Russ (em inglês).
- Complete seus conhecimentos no site do Big Bear (em inglês).
- A list apart é outra excelente fonte de tutoriais de altíssima qualidade (em inglês).
- Este site consta apenas porque serviu de referência para o meu. Tenho certeza de que muito poucos vão querer acessá-lo porque está em alemão Aqui está o link para o site do Andreas Kalt".
|
Informática 
3304 registros
6 hoje
9 nesta semana
41 neste mês
