Depois do post motivacional para iniciar o recorte Tableless, vamos agora entender como pensar.

Abstraindo a estrutura

Uma das capacidades mais importantes para um desenvolvedor/programador, é a habilidade de abstrair.

Você deve ser capaz de olhar para uma estrutura complexa, e quebrar esta em diversas partes. Resolva cada uma das partes, cada um dos “probleminhas menores”, e então no final você terá resolvido o todo.

Não desperdice elementos

Nem sempre precisamos de mais marcação html para resolver um efeito de layout.

Um elemento muito bom que temos “de graça” na nossa marcação é o <body>, use!

Ele ocupa por default 100% da largura da viewport do browser. Ele sempre estará lá, e por trás de todo e qualquer elemento novo que adicionemos.

Logo, a escolha óbvia para esse elemento, é que ele receba um **background-image color:** do fundo do site. Pode parecer básico para alguns, mas frequentemente navego em sites, em que seus DEVs, criaram um outro elemento apenas para o fundo, em vez de utilizar o body.

A nossa escolha mais óbvia para o bg image do <body> é aquele degradê azul ali no fundo. Sim, começamos montando o palco, e então vamos vindo para frente.

Note que é este filete que coloquei de imagem aqui do lado direito:

Este filete pode ser tão fino quanto quisermos, 1px de largura basta, pois o efeito de degradê está na orientação vertical.

Outras variações, seriam um fundo com linhas diagonais, degradê invertido(mais claro no topo)…

Identificando as partes grandes

Por mais complexo que seja, inicie do simples, de fora para dentro.[ regra da cadeia ]

Olhe para o todo, e veja quais partes são “independentes” e até “imutáveis”. Nessa etapa, você vai dar uma borrada mental no conteudo, e enxergar mais ou menos assim:

Resolvido o fundo, vamos para os proximos blocos

Aqui vejo 2 prioridades:

topo em 100% de largura(um pouco mal feito no site atual), e rodapé 100% largura.

Uma técnica que tenho gostado bastante de utilizar é a seguinte:

<div id="header">
    <div class="content">
        aqui dentro o conteudo do topo
    </div><!-- /content -->
</div><!-- /header -->
...


<div id="footer">
    <div class="content">
        aqui dentro o conteudo do topo
    </div>

<!-- /content -->
</div><!-- /footer -->

sendo a class .content, a nossa div responsável por centralizar o conteudo, e as externas #header, e #footer, os elementos que vão ter o nosso background 100% de largura.

.content {
    width: 960px;
    margin: 0 auto;
}

ok ? repetimos o mesmo processo anterior para definir o filete de bg do rodapé, e temos q usar uma imagem gigantesca em largura para o fundo do topo. Atenção para usá-la, com background-position: center top;

O miolo

aqui, tem aquela sidebar laranja, que pede obviamente um float : left; e o restante na direita.

<div id="content" clas="content">
    <div id="sidebar">
        conteudo da sidebar laranja
    </div><!-- /sidebar -->
    <div id="main">
        aquelas 3 caixinhas, o produto em destaque(slideshow)..
    </div><!-- /main -->
</div><!-- /content -->

Note que idento corretamente meu HTML, e uso um comentário para marcar o final de cada bloco.

Essa é a estrutura simples e básica que precisamos para o “palco” do nosso recorte. Em cima disso, vamos montando cada parte, repetindo os passos que aqui fizemos, e adicionando algumas particularidades.

É muito importante entender bem os conceitos de box model, só usar position qndo realmente necessário, e se vc souber como fazê-lo(assunto extenso, então depois falo sobre isso especificamente), evitar hacks e tb propriedades com valores gigantescos, como: margin-left: 500px;..

Esse tipo de declaração, geralmente deve ter um cheiro ruim para você.. indicando que algo provavelmente está errado.

Bom, é isso.