locaweb
43
Na página, pode-se destacar
quatro grupos de informações
importantes: o cabeçalho, que
chamaremos de header no código;
o menu da esquerda, menu1 no
código; o da direita, menu2; o
conteúdo, content; e o rodapé, que
representaremos como footer.
Crie um div para cada uma dessas
regiões e depois coloque tudo em um
div maior, com nome de container. Esse
último div pode parecer desnecessário,
mas com ele pode-se usar o CSS e
controlar vários aspectos gerais da
página, sem que haja a necessidade de
configurar div por div. Transformando
toda a discussão acima em código,
obtém-se o seguinte HTML.
<html>
<head>
<link rel="stylesheet" type="text/css"
href="tableless.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Bem vindo...</h1>
</div>
<div class="menu1">
Entradas</br>Pratos quentes</
br>Petiscos
</div>
<div class="content">
Conteúdo do site aqui.
</div>
<div class="menu2">
Cervejas belgas</br>Vinhos
italianos</br>Uísques escoceses
</div>
<div class="footer">
<b>Pé do site</b></div>
</div>
</body>
</html>
A primeira coisa que se pode notar
nesse código é o quão legível ele é em
comparação com o outro. Note também
que, apesar de o código não dizer nada
sobre o posicionamento dos objetos,
ele deixa bem claro qual é o conteúdo
relevante e os classifica de maneira
inteligente.
Mas se você escrever esse código
e olhar o resultado em seu navegador,
vai perceber que a página está bem
feia. Vamos então aprender como fazer
com que o HTML acima fique o mais
parecido possível com a página que
tínhamos feito anteriormente.
A tabela anterior inteira ocupava
600 px de largura. A ideia então é
configurar container para ter esse
mesmo tamanho. Os menus tinham
130 px de largura. Serão mantidos esses
tamanhos também nas classes menu1
e menu2.
Outro detalhe desejado são as cores,
então configure header, content e footer
para ficarem cinza.
A parte mais importante agora é
entender o posicionamento dos objetos.
Para os objetivos do tutorial, basta dizer
qual menu ficará à esquerda e qual à
direita. Isso é feito usando o atributo
“float” com a opção “right” ou “left”.
Transformando a explicação acima
em CSS e acrescentando algumas
outras informações de formatação,
obtém-se o seguinte código:
.container
{
width: 600px;
}
h1 { margin-bottom: 0; }
.header {
background-color: #EEEEEE;
text-align: center; }
.menu1 {
width: 130px;
float: left; }
.content {
background-color: #EEEEEE;
height: 200px;
width: 340px;
float: left; }
.menu2 {
width: 130px;
float: right; }
.footer {
background-color: #EEEEEE;
clear: both;
text-align: center; }
Se você rodar em seu navegador,
notará que o resultado final ficou
praticamente idêntico ao que
conseguiu-se com tabelas, tendo um
posicionamento diferente por uns
poucos pixels de diferença. É claro
que seria possível deixar o layout
exatamente igual, mas isso não foi feito
para manter o código mais simples e
fácil de entender.
Acima, o endereço do
W3C a respeito do
Tableless (
.
to/12d), datado de 2005
design
Tableless
Web
Designer
