Webstandards, o sacrifício inicial

Buenas povo, entre um script e outro para o And After estou escrevendo para contar a emocionante história de madrugadas sem sono para conseguir migrar para o tão falado tableless.

Eu era uma pessoa doente por tabelas, por isso foi sofrido, mas existem várias razões para usar o tableless então resolvi me dedicar um pouco e corri atrás de tutoriais, o resultado vocês estão vendo aqui.

O passo inicial
Acredito que o caminho mais fácil é começar do zero a página, e não utilizar as tabelas já montadas e ir "adaptando". Gabiarra não, gente.

O método que eu utilizava para montar as tabelas não me permitiu usar as mesma imagens, então tive que cortar o .psd denovo pensando nos webstandards e não nas tabelas como de costume. Estudei antes e entendi como funcionava, fui cortando as imagens e montando o css ao mesmo tempo.

Com o dreamweaver criando o CSS e o arquivo .asp (ou html, ou o que for) e no photoshop com o PSD pronto para ser cortado de acordo com as necessidades e método que eu usaria na folha de estilos.

 

Criando o CSS

* {
margin: 0px;
padding: 0px;
}

Esse código zera a o margin e padding de todos os elementos da página.

body {
padding: 0px 0px 30px;
background: #FFFFFF url(../images/bg.gif) repeat-y center;
font: 11px/130% Verdana, Arial, Helvetica, sans-serif;
}

Agora defini as configurações de todas as páginas, como o background e configurações de tamanho de fontes. Nesse caso o fundo é branco, a imagem de fundo vai ser centralizada e repetir apenas no eixo Y, ou seja, o vertical.

#page {
margin: 0px auto;
width: 761px;
}
#topo {
height: 70px;
position: relative;
padding: 0px;
margin: 0px;
}

Está aí em cima a estrutura onde vai o conteúdo (page) com as limitações de tamanho e alinhadas ao centro, e também o topo do site, onde inseri o logo do And After e a direita alguns links e o formulário de busca (que veremos logo). Com as configurações da página e o topo definifo, criei as configurações para a imagem:

#logotopo {
width: 400px;
padding: 10px 0px 0px 10px;
float:left;
margin: 0px;
}

Optei por não usar a imagem como background, então ela está inserida no outro arquivo (html). O comando float faz a div flutuar, neste caso pela esquerda. Isso significa que posso inserir depois dela outra dic e não haverá quebra de linha, a próxima div ficará na direita desta.

O arquivo html está da seguinte forma:

<div id="page">
   <div id="topo">
      <div id="topo">
         <div id="logotopo">
         <a href="http://andafter.com.br"><img src="images/logo.gif" alt="Ir para página inicial" width="202" height="59" border="0" />
         </a>
         </div>
      </div>
   </div>
</div>

O resultado disso é o topo do And After, ainda sem os links e o campo de busca na direita.

#menutop {
    float:right;
    margin: 10px 25px 0px 0px;
    padding: 0px;
}

Esta é a div que fica dentro da div topo, logo depois da div do logo. O código anida não ficou compacto como deveria, a div topo por exemplo poderia ser deletada com adaptações da logotopo e da menutop.

O conteúdo é divido em duas colunas:

#direita {
    float: left;
    width: 520px;
    overflow: hidden;
}

#esquerda {
    float: left;
    width: 220px;
    overflow: hidden;
}

Essas duas divs ficam dentro da div page, isso cria o menu a esquerda e a página de conteúdo a direita.
Para a melhor fluência do html (carregar o conteúdo antes do menu) estou estudando alterações nisso. Será necessário a div da direita aparecer no html antes da div da esquerda, provavelmetne com um espaçamento "puxando" ela para o lado direito e a esquerda com o espalamento puxando para o lado direito.

Para não me extender muito, paro por aqui. Vou deixar aqui alguns estilos do CSS do And After que foram bastante úteis para mim.

CSS

.esquerda {
    float: left;
}

Criei um estilo para divs que flutuam pela esquerda, evitando repetição de código desnecessário.

img { border: none; }

Tira a borda de todas as imagens

p {
    padding: 0px 0px 15px;
    margin: 0px;
}

Formatação do espaçamento do parágrafo

Back to Top