Marcus VBP

Faz muito tempo que eu não escrevo sobre CSS ou mesmo tutoriais de caráter geral no blog.

Parte da culpa disso é o tempo, mas também tem o fato que hoje, layouts utilizando CSS são a norma, e não há tanta necessidade de divulgar os Padrões Web. Além disso, existe material extenso espalhado pela rede, e não quero ficar replicando este conteúdo.

Contudo, esta semana eu parei para estudar um tema do meu gerenciador de conteúdo preferido (sim, é o Drupal), pois descobri que um problema que acontece eventualmente em meus layouts CSS, não ocorre no tema.

Existe várias maneiras de se resolver o mesmo problema usando CSS, e provavelmente o meu problema não afeta todos os desenvolvedores de internet. Contudo, a minha forma de criação de layouts de 3 colunas é uma das mais comuns, então esse problema eventual (que na verdade não é um problema, é o comportamento esperado, mas é um pé no saco) deve afetar várias pessoas

Que problema seria este? É que quando você cria um layout de três colunas (duas menores laterais e 1 central, mais larga), você pode colocar elementos com a propriedade clear:both na coluna central, ou seu layout irá quebrar.

Descrição do problema passo-a-passo

1. Você cria um layout simples em CSS, de três colunas, que tem a seguinte estrutura:

e utilizando o seguinte CSS para formatar:

O resultado até agora pode ser visto aqui.

2. Você adiciona uma caixa, feita com uma div de dimensões fixas e com float: left. Só que como é uma div flutuante, a caixa excede as dimensões do seu container. Veja um exemplo aqui.

3. Eu não quero que isso aconteça. Quando você não quer que um elemento flutuante invada ou ultrapasse um elemento, você pode usar a propriedade clear. clear: left impede elementos flutuantes à esquerda do elemento formatado, clear: right à direita, e both de ambos os lados. Eu posso aplicar clear: both (ou left, ou right) a por exemplo, àquela linha "hr" que sucede a caixa. Só que isso faz com que o hr seja exibido apenas depois das colunas laterais (que são posicionadas com float), gerando um buraco enorme na página. Veja um exemplo.

Uma solução alternativa seria definir uma altura mínima à div que engloba a caixa, mas esta solução não é muito boa, especialmente se você está lidando com elementos de tamanho variável.

A solução Passo-a-Passo

A solução é bem simples. Em vez de simplesmente tentar contornar o problema, vamos mudar a forma como a página é construída. O resultado vai ser o mesmo.

1. Pegue a mesma estrutura da página utilizado nos exemplos 1, 2 e 3, e adicione mais uma div, englobando a coluna central. Eu chamei esta div de "center".
2. Posicione as colunas laterais naturalmente, ou seja, utilizando float.
3. Aplique uma margem negativa esquerda e direita à div center equivalente às larguras totais das divs laterais. Aplique também à esta div a propriedade float: left e width: 100%.
4. Na div da coluna central (que eu chamei de conteudo), adicione uma margem esquerda e direita equivalente às larguras totais das divs laterais.

Basicamente só seria necessário este procedimento para que o layout funcione certinho, mas infelizmente devido à interpretação equivocada do modelo de caixa do IE6, talvez seja necessário adicionar um CSS Hack, que pode ser feito colocando um "_" no início da propriedade, ou o mais recomendado, utilizar um arquivo à parte e usar comentários condicionais para inserí-lo na página. Antes que eu esqueça, vejam o resultado no exemplo 4.

Obviamente, ambas as formas de criar o layout estão corretas, e possuem as suas vantagens e desvantagens. A que eu utilizava anteriormente é muito mais simples de ser feita, mas apresenta seus problemas com elementos com clear. A segunda é mais complexa, requer mais divs e mais linhas de CSS, mas não tem problema com clear. Fica como mais uma opção para desenvolver o layout.

A sim, antes que eu esqueça, a solução apresentada aqui funcionou em todos os navegadores (testado usando o site Browsershots), e também funciona com layout fluido e com layout de apenas duas colunas.

Um relatório de estágio é algo muito próximo de uma monografia. A diferença entre ambos é que a monografia é a defesa de uma tese, algo que não é necessariamente aplicado na prática.

Já um relatório de estágio, descreve justamente os processos de desenvolvimento de algum projeto, realizado durante o estágio obrigatório para a conclusão do Curso Superior de Tecnologia em Web Design. Este, no caso, é essencialmente prático, mesmo que o projeto não tenha sido publicado ou concluído.

Inicialmente eu pretendia publicar este relatório apenas como páginas, no blog, com o objetivo de ficarem mais acessíveis para visitantes vindo de buscadores.

Contudo, a versão online possui algumas desvantagens evidentes, como por exemplo não estar disponível offline. Também tive que reduzir as imagens que faziam parte do relatório em favor de manter o layout do blog organizado.

Além destes motivos, também tem o fato de que o conteúdo reproduzido aqui é apenas parte do trabalho (a mais importante, evidentemente). Como qualquer trabalho acadêmico, precisa seguir as regras da ABNT, e isso não seria possível no blog.

Por estes motivos, resolvi disponibilizar o relatório completo em formato PDF, para download. Espero que seja útil a estudantes, como uma fonte de pesquisa, ou mesmo um modelo pelo qual se basear.

Seguindo Padrões, más pero no mucho...

Todo o projeto foi realizado seguindo dois padrões, os Padrões Web da W3C, e padrões internos da empresa.

Sobre os Padrões Web, eu fiz meu possível. Evidentemente o site não valida, por vários motivos. O primeiro que alguns componentes utilizados no site (desenvolvido em ASP.Net) infelizmente não se preocupam em manter um código conciso, apesar de que não posso reclamar dos resultados.

Os Padrões da empresa, que eu ajudei a criar e ainda ajudo a manter, nada mais é que uma série de padronizações na escrita do XHTML e do CSS. É algo que não é perfeito, mas está sendo continuamente aperfeiçoado.

Por exemplo, a forma que inserimos CSS, assim como a forma que era organizado o CSS, foi alterada desde o projeto do Paraíba Jovem.

Durante o projeto, dividíamos o CSS em vários arquivos, uma para cada área da página, tínhamos os arquivo topo.css, rodape.css, conteudo.css... A idéia era boa, mas foi aplicada errada.

Percebemos que esta forma de divisão não era muito prática, pois o posicionamento de um elemento pode ser modificada para que ele permaneça em qualquer lugar da página, independente do fato dele fazer parte do topo, rodapé ou conteúdo da página...

Então mudamos e tornamos a coisa mais prática... Agora dividimos o CSS por "módulo", assim fica fácil migrar e adaptar um CSS e um bloco de código HTML de um projeto para outro.

Bom, é isso, espero que apreciem o meu trabalho.Caso alguém se interesse, a nota do Relatório foi 10.

Nota: Como o Capítulo "Anexo", da versão impressa é composto por várias imagens, achei mais prático disponibilizar esta parte em um arquivo PDF, para download. É necessário um leitor de PDF para abrí-lo. Para sistemas Windows recomendo o Foxit Reader. Para fazer o download do arquivo, clique sobre o link abaixo.