MadlyLuv.com ♥ Apaixone-se loucamente!

Home » Extras » Tutoriais » Tableless

Layout em Tableless

Nivel: médio ~ tem que saber HTML

» Ai ai, quem não quer que seu blog/site seja visto em todos os tipos de dimensões? Eu queria isso e finalmente consegui, por iso pretendo ensiná-los. Quem não usa tableless (ou tabela) seu blog não é bem visto em dimensões maiores, como 1024x728 px, geralmente ficando no canto na tela e não no meio.
» Normalmente é usado em blogs em PHP, Cutenews, Wordpress... Então fica bem mais chique, né? Hehe.

1º Introdução:
Tableless é exatamente o oposto de um alyout 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 o bloco de notas e copie o seguinte CSS

/* INICIO TABLELESS */
body {
      background-image: url('http:// Sua imagem de fundo');
      font-size: 09px;
      font-family: Verdana;
      text-align: justify;
      color: #cor da fonte;
      margin-top: 0px;
      margin-bottom: 0px;
      padding: 0;
  }

/* layout */
#page {
      /* linha horizontal do layout */
      width: 600px;
      background-image: url('http:// Imagem que aparecerá de uma ponta a outra');
      background-repeat: repeat-y;
      margin-left: auto;
      margin-right: auto;
  }

#header {
      /* imagem principal do layout */
      background: url('http:// Sua imagem') no-repeat top center;
      width: 600px;
      height: 300px;
  }

#sidebar {
      /* dimensoes do perfil */
      width: 155px;
      color: #cor da fonte;
      font-family: Verdana;
      font-size: 09px;
      text-align: justify;
      margin-top: -54px;
      margin-left: 5px;
      float: left;
  }

#content {
      /* dimensoes do post, das paginas */
      width: 445px;
      text-align: justify;
      margin-top: -54px;
      margin-left: 5px;
      float: left;
  }

#footer {
      /* imagem de rodapé do layout */
      background-image: url('http:// Sua imagem do footer');
      background-position: bottom;
      width: 600px;
      height: 40px;
      clear: both;
  }

/* FIM TABLELESS */

3º Customizando: Basicamente, é tudo na base do chute! Dá até para fazer com o photoshop. É só selecionar a parte que vc quer para o perfil/post e colocar as respectivas dimensões no CSS acima e ajustando as margins e as paddings, que afasta ou chega perto nas proximidades da página (que no caso está como 600px de largura). Se quiser, use o Front Page para dar uma visualizada para não ficar atualizando toda hora em seu navegador e acabar de vez com sua transferência de dados.

4º No código HTML: Tem que ser na seguinte ordem:

<html>
<head>
<title>Título do blog<?/title>

<!– Troque o endereco do style.css para o seu CSS hospedado –> <link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>
<body>
<center>

<div id="page">
<div id="header"></div>

<div id="sidebar">
Aqui você coloca o conteúdo do seu perfil, menu, o que quiser
</div>

<div id="content">
Aqui você a parte dos posts e páginas.
</div>

<div id="footer"></div>

</div>

</center>
</body>
</html>

A tag <center> vai direcionar seu lay toda vez para o centro. Se não quiser, é só tirar.

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ês. Dúvidas?? Pergunte-me.

Ajudou? Creditou
tutorial by Ana Flávia Cador
www.MadlyLuv.com © 2008
Apaixone-se Loucamente <3

voltar • atualizar • topo