«
»

10 Dez

Layout de 3 colunas para Joomla – Introdução

Postado por Muneo em CSS, Joomla.

Estudo avançado sobre como criar um template de 3 colunas para Joomla 1.5

A quem se destina: Desenvolvedores de template
Nível: Médio a Avançado
Requer: Conhecimento de HTML, CSS e Joomla

Veja o seguinte código:

   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2: <html xmlns="http://www.w3.org/1999/xhtml">
   3: <head>
   4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5: <title>Tutorial</title>
   6: <style>
   7: #st-wrapper {
   8:     width: 960px;
   9:     border: 1px solid #000;
  10:     margin: 0 auto;
  11: }
  12: #st-header {
  13:     height: 50px;
  14:     background-color: #0F0;
  15: }
  16: #st-left {
  17:     float: left;
  18:     width: 250px;
  19:     background-color:#CFC;
  20:     height: 200px;
  21: }
  22: #st-right {
  23:     float: right;
  24:     width: 250px;
  25:     background-color:#CFC;
  26:     height: 200px;
  27: }
  28:
  29: #st-footer {
  30:     clear: both;
  31:     height: 50px;
  32:     background-color: #0F0;
  33: }
  34: </style>
  35: </head>
  36: <body>
  37: <div id="st-wrapper">
  38:   <div id="st-header">CABEÇALHO</div>
  39:   <div id="st-left">ESQUERDA</div>
  40:   <div id="st-right">DIREITA</div>
  41:   <div id="st-content">CONTEÚDO CENTRAL</div>
  42:   <div id="st-footer">RODAPÉ</div>
  43: </div>
  44: </body>
  45: </html>

Irá perguntar: Se é um estudo avançado não deveria ir direto no cerne da questão?

O post pretende dar bagagem suficiente para que possa fazer seu template do zero.

O código acima é o básico do básico de layout de 3 colunas e produz o seguinte resultado (No Firefox 3, mas funciona no IE 7 e no Chrome)

sc001

Pergunta: Por quê usei id ao invés de class?

Leia esse ótimo artigo do Bruno Dulcetti.

Como viu, eu não coloquei estilo nenhum no #st-content. Ele representa a área branca vista na imagem acima. Mas o mais avançados irão dizer que esse código tem um problema grave: Se preencher com texto dentro do div#st-content teremos conteúdo vazando pra baixo dos boxes(não atrás) laterais marcados com ESQUERDA e DIREITA.

Assim o resultado ficaria assim:

sc002

Raciocinando: Então, o float fica flutuando? Sim, elementar meu caro Watson…

E ele fica floatuando sobre o #st-content! E o texto faz o “contorno” dos objetos flutuantes.

Até aqui nada de novo, suponho…

Como resolver esse problema?

Colocando no #st-content margens do lado esquerdo e do lado direito.

Nosso código do id #st-content ficará assim:

   1: #st-content {
   2:     margin-left: 260px;
   3:     margin-right: 260px;
   4: }

Como os #st-left e #st-right tem 250px, coloquei em #st-content margens de 260px para não ter o texto colado nos boxes laterais.

O resultado é esse:

sc003

Exatamente o que queriamos. Um layout de 3 colunas!

Por hoje é só, nos próximos artigos irei mostrar como converter esse código para o Joomla.


2 Respostas to this post.

  1. Publicado por Layout de 3 Colunas – Aprofundando no css « [muneo::programação e recreio] em 19/Mar/2009 às 12:34 pm r r

    [...] perdeu o primeiro, clique aqui antes de [...]

    Responder

  2. Publicado por Layout de 3 Colunas – No joomla « [muneo::programação e recreio] em 09/Abr/2009 às 12:01 am r r

    [...] Este é o terceiro da série e que irá mostrar como fica no joomla. Se perdeu os dois primeiros, clique aqui para ler o primeiro post e clique aqui para ler o [...]

    Responder

Responder a esta postagem