Desenvolvimento

Teste 10 - Estruturação de Páginas com a tag <div>

Esta página está sendo mantida apenas por questão histórica, pois ela foi redigida quando eu ainda não tinha muita idéia do que estava fazendo. Apesar das coisas a seguir não fazerem muito sentido prático hoje, há algumas observações interessantes que quero manter para eventuais consultas desesperadas.

Em algum ponto enquanto eu estudava, eu havia chegado à conclusão de que é fator comum entre os bons webdesigners a preferência pela estruturação de páginas usando tags <div> ao invés de tabelas.

Abaixo estão algumas estruturas de iniciante que na época achei interessantes, com códigos "e talz".

Exemplo 1 - Lay-out '3C' para todas as resoluções de tela I

Código

• Independente do tamanho da tela do browser, a camada <div> do meio fica sempre normalmente espremida entre as camadas <div> direita e esquerda.
• Como não há declaração de tamanho para a camada <div> do meio, ela é expandida contra os limites impostos, inclusive contornando as camadas <div> das extremidades, que são limitadas verticalmente (height: 100px).
• É importante notar que a referência relativa para posicionamento dos demais objetos da página é tomada apenas a partir dos elementos que não possuem o estilo float. Neste caso, este elemento é a camada <div> do meio.

Exemplo 2 - Lay-out '3C' para todas as resoluções de tela II

Código

• As únicas diferenças do código anterior para este são as partes coloridas em azul.
• width: 250px » Apenas este estilo é suficiente para criar o efeito visto, caso o browser utilizado seja o IE. Este estilo define um tamanho horizontal para a tag <div> do meio.
• float: left » É necessário colocar esse estilo na tag <div> do meio para que o Netscape entenda que ela deve ficar após a tag da esquerda. Quando usado, este recurso deve sempre ser acompanhado de uma tag <br> posicionada logo após a camada em questão, para que o restante do código não seja mostrado ao lado da camada.
• <br style="clear: both" /> » O estilo clear aplicado à tag <br> causa uma quebra de linha completa quando seu valor é ajustado em both. Isso faz com que o restante do código apareça de forma ordenada quando executado no Netscape.
• Como visto, a área da tag <div> do meio não mais se expande contra os seus limites, como visto no Exemplo 1.
• Independente do tamanho da tela do browser, as três camadas são mostradas como definido. "Direita" e "Esquerda" ocupando as extremidades da janela e a do "Meio" exatamente ao lado da camada "Esquerda".

Exemplo 3 - Lay-out '3C' para todas as resoluções de tela III

Código

• Em relação ao código utilizado no Exemplo 2, aqui eu simplesmente retirei as propriedades height das camadas das extremidades e a propriedade width da camada do meio, colocando todo o conteúdo das três colunas dentro de uma camada externa com o estilo width: 100%.
• O estilo width: 100% foi acrescentado devido a uma instabilidade do IE, que faz com que um espaço morto de cerca de 20px apareça entre as camadas do meio de da direita.
• Este código não funciona corretamente no Netscape! Neste browser, a camada do meio aparece embaixo da camada da esquerda!!!!
• Definindo-se o estilo width para a camada do meio, o comportamento anômalo do NN é corrigido. No entanto, como a idéia principal é manter a camada do meio expansível horizontalmente, isto criaria problemas com diferentes resoluções de tela.
• Uma das soluções que podem ser utilizadas para o posicionamento correto das camadas é usar JavaScript para detectar o tamanho da tela do browser, calculando então a dimensão horizontal da camada do meio a partir das camadas das extremidades, que possuem tamanho fixo.

Exemplo 4 - Lay-out '3C' para todas as resoluções de tela IV

Código

• Exatamente o mesmo código HTML do exemplo anterior aparece aqui (sem a tag <div> externa, claro). Os estilos width só são definidos para as colunas da esquerda e da direita, enquanto a coluna do meio tem este estilo definido pela função JavaScript mostrada mais abaixo.
• Para o IE, este exemplo não representa nenhuma diferença em relação ao exemplo anterior. A sua implementação foi feita apenas por motivos de compatibilidade com o Netscape.
• O código JavaScript inserido no documento (mostrado abaixo) calcula a largura interna da janela (variável Largura) e subtrai dela as larguras das camadas das extremidades. Também subtraído aparece um valor de '23', necessário porque eu simplesmente não consegui obter os estilos paddingLeft e paddingRight da tag <body>. Isso não representa realmente um problema mas, quando eu conseguir descobrir como obter estes estilos, volto aqui e dou um ajuste fino no código.
  function exemplo4() {
     var Largura; var Largura_E; var Largura_D; var Largura_M
     Largura_E = findDOM('esquerda4',1)
     Largura_D = findDOM('direita4',1)
     Largura_M = findDOM('meio4',1)
     if (window.innerWidth != null) // Para o Netscape
        Largura = window.innerWidth
     if (document.body.clientWidth != null) // Para o Internet Explorer
        Largura = document.body.clientWidth
  
     var str_E = Largura_E.width.substr(0,3)
     var str_D = Largura_D.width.substr(0,3)
  
     var newWidth = Largura - str_E - str_D - 23
     Largura_M.width = newWidth + 'px'
     return newWidth
  }
  window.onresize=exemplo4
• Para que a camada do meio seja redimensionada quando a página for carregada ou o tamanho da janela for alterado, foi incluída a linha de comando window.onresize=exemplo4, que chama a função que executa o redimensionamento desejado. Nota: o W3C não reconhece o event hander onResize quando aplicado à tag <body>!

Exemplo 5 - Lay-out centralizado, com tamanho fixo

Código

• A 'mágica' por trás deste código está no uso dos valores auto para os estilos margin-right e margin-left, além do uso duplo do estilo text-align.
• A camada <div> interna possui os três estilos mencionados, especificando para text-align o valor left. A verdade é que, para o NN, bastaria este código apenas para obter-se o comportamento desejado. No entanto, um bug no IE faz com que o browser ignore as especificações de margem e jogue toda a camada para a esquerda.
• A solução é colocar a camada principal dentro de uma camada externa. Esta camada externa possui então a definição center para o estilo text-align, o que faz com que todos os itens contidos nela sejam centralizados. Para sobrepujar este efeito dentro da camada interna, basta usar o já mencionado estilo text-align: left.
• Numa nova página, o que pode ser feito para evitar criar duas camadas é atribuir o estilo text-align: center à tag <body>, colocando todo o conteúdo da página na camada centralizada (neste exemplo, centerFrame).
• O método do exemplo 4 pode ser combinado com este para produzir um lay-out centralizado de três colunas, com uma delas completamente expansível!

Exemplo 6 - Texto com figuras

O objetivo deste texto é simplesmente testar as diferentes opções de formatação dentro de uma camada <div> centralizada, utilizando figuras e outras camadas <div>.

Esta camada, de cor cinza, não possui nenhuma definição para o estilo padding, ou seja, o texto e todos os elementos internos 'encostam' nas bordas da camada.

Alinhado a este segundo parágrafo, e declarado antes dele, está a foto do pôster do filme O Grito, cujo único fã parece ser apenas eu mesmo. A tag <img> está dentro de uma tag <div> com estilo float: right. Nesta camada não foi aplicado nenhum estilo margin ou padding.

Já a camada da nossa querida e finada mutante telecinética Carrie recebeu o estilo padding-right: 20px que, como pode-se perceber, funciona perfeitamente. Interessante notar que, na parte superior, o espaçamento fornecido pela tag <p> já provê uma boa distância do texto superior. Com o fim da foto de O Grito, agora o texto volta a ser mostrado até o canto direito da tela, significando que podemos fazer mais uma experiência com o posicionamento por estilo float.

Freddy e Jason aparecem como cobaias de uma foto à qual foi atribuído o estilo padding: 10px. 10 ou 15 pixels parece ser o valor adequado para incluir áreas ou figuras dentro de textos.

Ho-ho-ho

À esquerda aparece uma camada de 50 × 60 pixels, com os principais itens de formatação já aplicados. Não foi definida nenhuma margem, mas o preenchimento foi aplicado com padding: 10px. Aqui, o pequeno quadro ao lado apresenta-se de forma distinta nos dois browsers mais utilizados, o IE e o Netscape.

Isso ocorre porque esta página não utiliza nenhuma declaração DOCTYPE, ou seja, é carregada em 'quirks' ou 'non-compliant mode'.

Hi-hi-hi

Já esta outra camadinha tem como diferença a aplicação das margens apenas aos lados esquerdo (margin-left: 15px) e direito (margin-right: 15px).

As diferenças entre o IE e o NN neste caso podem ser eliminadas usando-se uma declaração DOCTYPE no início do documento, tornando-o assim compatível com o padrão W3C (standards-compliant). Como o Netscape já utiliza este padrão automaticamente, as camadas mostradas terão ao final a aparência que possuem quando visualizadas no NN.