Querendo ou não, um site feito em tableless é outra história quando se trata de programação, sem contar que fica muito mais fácil editar pelo CSS do que na própria tabela. Acredite, ainda há muitos sites assim e nunca é demais ensinar o básico para quem quer aprender HTML e CSS.
1) Introdução:
Tableless é exatamente o oposto de um layout em tabelas. Usa-se apenas das tags <div>. Sem as <tr>, <td> e <table> da vida, fica tudo mais fácil pois tudo é feito por CSS!
2) Base: Abra seu editor de HTML (indico o Sublime Text ou o Dreamweaver) e copie o seguinte CSS
/*** Config básico ***/
body
{background-image: url('https://imagem.jpg'); /*Imagem que se repetirá de uma ponta a outra no topo da página*/
font-size: 10px;
background-repeat: repeat-x; /*quer dizer que se repetirá apenas na horizontal*/
font-family: Tahoma;
text-align: justify;
color: #COR DA FONTE;
}
/* layout */
#page {
/*** linha VERTICAL do layout ***/
width: 980px; /*melhor largura para tela 800x600 px*/
background-image: url('https://imagem.jpg); /*Imagem de fundo que desce de maneira vertical dando continuação aos posts e sidebar*/
background-repeat: repeat-y; /*quer dizer que se repetirá apenas na vertical*/
margin-left: auto; /*se ajustará no centro de acordo com a tela*/
margin-right: auto;
}
#header {
/*** Topo do layout! ***/
background: url('https://layout.jpg') no-repeat top center; /*ficará no centro, no topo e não se repetirá*/
width: 980px; /*largura da imagem*/
height: 300px; /*altura da imagem*/
}
#sidebar {
/*** Sidebar é a coluna do perfil do layout ***/
width: 300px; /*ou a largura que você escolher*/
color: #COR DA FONTE;
font-family: Tahoma;
font-size: 10px;
text-align: justify;
padding: 0px; /* espaço do texto entre a width imposta */
float: left; /*alinhado a esquerda*/
margin-top: -10px; /*ajuste para a direita, esquerda e para baixo, para cima são valores negativos*/
}
#content {
/*** conteudo dos posts e das paginas ***/
width: 640px;
text-align: justify;
float: right; /*alinhado à direita*/
}
#footer {
/*** imagem rodapé do layout ***/
background-image: url('https://imagem.jpg'); /*Imagem do rodapé da página*/
background-position: bottom; /*posição para baixo*/
width: 779px; /*largura da imagem*/
height: 30px; /*altura da imagem*/
clear: both !important; /*quer dizer que não importa o tamanho dos posts e sidebar, sempre aparecerá abaixo deles de maneira alinhada, é crucial para deixar que a imagem apareça!*/
}3) Customizando: Basicamente, é tudo questão de lógica! Para ter uma ideia melhor da densidade de pixels, pense em seu layout no photoshop ou em qualquer editor de imagem que dá a dimensão de uma determinada área que você seleciona. De acordo com as medidas que você vê no photoshop (com o comando F8) você irá ajustando no CSS nos locais indicados nas descrições acima.
4) No código HTML: Tem que ser na seguinte ordem:
<html> <head> <title>Título do seu blog</title> <!– SEU CSS - TROQUE A URL DO STYLE.CSS PELO SEU CSS HOSPEDADO –> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="page"> <div id="header"></div> <div id="sidebar"> <!– CONTEUDO DO PERFIL –> Tudo sobre você aqui<br> Tudo sobre você aqui<br> Tudo sobre você aqui<br> <!– FIM DO CONTEUDO –> </div> <div id="content"> <!– CONTEUDO DO POST E PAGINAS –> Aqui você coloca os códigos do seus post quando for UOL, BLOGGER etc.. ou coloque a include do cutenews caso use. <!– FIM DO CONTEUDO –> </div> <div id="footer"></div> </div> </body> </html>
Até que não foi tão difícil assim. Várias pessoas me perguntaram como fazer lay em tableless e como tinha bastante código, nunca dava para explicar. Então resolvi criar este tutorial. Espero que deu para entender, eu apenas dei o primeiro chute. Agora, o resto é com você. Dúvidas?