TUTORIAL CSS LAYOUTS CSS          8 de 9

Vamos examinar, de início, os tipos de layouts CSS. Vejamos quais são:

a. Layout de Largura Fixa

b. Layout Líqüido

c. Layout Elástico

d. Layout Híbrido

Vamos estudar cada uma destas estruturas mais gerais e abordaremos, oportunamente, o estudo de estruturas diferenciadas (encontradas com menor freqüência). A importância deste tema se faz salientar, principalmente, em função do surgimento de monitores com resolução cada vez maior e, por conseguinte, impondo aos desenvolvedores uma preocupação adicional de oferecer possibilidade de acesso a usuários que utilizam equipamentos com inúmeras e distintas configurações.

Tema a este conexo, e com ele intimamente relacionado, é o das medidas utilizadas em CSS, agrupadas em absolutas e relativas, que será objeto de estudo em nosso próximo tutorial.

LAYOUT CSS DE LARGURA FIXA

A página e suas colunas têm uma largura fixa cuja medida, regra geral, é definida em pixels. Esta proposta não contempla a preocupação com a aparência do documento web sob o enfoque da diversidade de resolução do monitor ou o tamanho da janela do navegador: sua aparência não será variável e, não raro, em monitores de resolução menor o navegador apresentará uma barra de rolagem horizontal (parte inferior da tela) que deverá ser utilizada para permitir a visualização da área que permanece, naturalmente, fora da área de visão.

Veja a imagem do template abaixo (resolução 1261 x 596):

Esta é a imagem de um site cuja largura da área de conteúdo - simplificadamente a área central de fundo branco - tem uma largura (width) de 718px.

Esta imagem exibida em uma resolução de 1261 x 596 foi reduzida proporcionalmente em suas dimensões para 55% (704 x 324), exclusivamente para fins de exibição neste tutorial. A imagem nos mostra que o conteúdo do site é exibido em sua integralidade, exibindo ainda duas colunas laterais simétricas, que nos mostram "sobras" - representadas pelas "colunas" azuis, em cada um dos lados.

Veja agora esta outra imagem (resolução 640 x 480):

A exibição do mesmo site em uma janela de tamanho consideravelmente menor - 640 x 480 - torna necessária a barra de rolagem horizontal para exibição de todo o conteúdo do site: a dimensão do conteúdo que fica escondido do lado direito corresponde à 78 pixels, ou seja, a diferença entre a largura da área de conteúdo do site, 718px e a largura de exibição da janela, 640px.

A despeito da restrição de exibição de conteúdo no plano da altura, será objeto exclusivo de nossa atenção a questão relacionada à largura, na exata medida em que os padrões de desenvolvimento atuais comportam a barra de rolagem vertical.

Por todo o exposto, fica estabelecido que o layout de largura fixa apresenta restrição de acesso em função do tamanho da janela do navegador ou da resolução do monitor utilizado pelo usuário.

LAYOUT CSS LÍQÜIDO

O layout líqüido (também chamado de fluido) tem suas larguras definidas em porcentagem, o que permite uma otimização do espaço horizontal.

Todavia, a utilização deste tipo de layout pode trazer o inconveniente de tornar as linhas de texto demasiadamente extensas, a ponto de dificultar a leitura.

Para afastar tal problema a solução clássica é centralizar o layout e definir sua largura total para, por exemplo, 80% (oitenta por cento) da janela, obtendo como resultado duas margens laterais de 10% (dez por cento) cada uma, minimizando o problema das linhas muito extensas.

Veja este exemplo de layout líquido.

Há que se considerar a possibilidade de encontrar a melhor disposição do conteúdo em 2 ou 3 colunas de maneira a evitar linhas muito longas e, por outro lado, em janelas demasiadamente pequenas, uma exibição totalmente verticalizada, com linhas curtíssimas, o que além de produzir um resultado visualmente negativo, torna a consulta de um texto, por exemplo, praticamente inviável.

LAYOUT CSS ELÁSTICO

O layout elástico é aquele cujas medidas são definidas em relação ao tamanho da fonte. Imperativo considerar, particular e especialmente para este tipo de layout, as características da unidade de medida utilizadas em sua construção.

Nesta espécie de layout as medidas são definidas com base no tamanho da fonte: isto se dá com a utilização de medida "em" que se baseia no tamanho da fonte.

Tenha sempre em mente que tal unidade de medida é relativa, variando em função do tamanho de fonte especificado para determinado seletor. Assim, 1 (uma) unidade de medida "em" pode assumir diferentes valores correspondentes em relação a outras unidades de medida. Veja a renderização das seguintes regras css:

<style type="text/css">

h1 {
padding: 1em;
}

h2 {
padding: 1em;
}



</style>
 

<h1>Exemplo de Unidade "em" para "h1"</h1>
<h2>Exemplo de Unidade "em" para "h2"</h2>

Observe o espaçamento entre o primeiro caractere de cada linha (h1 e h2) e a margem esquerda. O espaçamento é distinto para cada um dos seletores, a despeito da medida de padding ser idêntica para ambos: 1em

Os valores para h1 e h2 não foram declarados e, portanto, são renderizados pelos valores-padrão estabelecidos pelo navegador para estes seletores, respectivamente 32 e 24 pixels e o valor padding de h1 e h2 ambos definidos em 1em apresentam, em pixels, valores distintos.

Tem-se então, por óbvio, que o valor padding para h1 é igual a 32 pixels e o valor padding para h2 é igual a 24 pixels. Em síntese:

a. padding de 1em para h1 é igual a 32 pixels

b. padding de 1em para h2 é igual a 24 pixels

Uma observação importante é que se a unidade de medida "em" for declarada para a propriedade font-size referencia-se ao elemento fonte do elemento pai e se for declarada para o elemento raiz (html) referencia-se ao valor inicial do tamanho da fonte.

LAYOUT CSS HÍBRIDO

O layout híbrido, como indica o próprio nome, combina as medidas "em" e "%": define-se a largura da página em % (porcentagem) e uma largura máxima em "ems" ou vice-versa.

Este tipo de layout permite evitar o aparecimento de barra de rolagem horizontal ou da inconveniência de linhas muito longas, mediante definição das propriedades CSS min-width e max-width. Todavia, o uso de tais propriedades apresentam problemas quando o layout é exibido em nagadores IE 6.0 e anteriores.

e-mail para contato: Caso queira, disponibilizamos endereço eletrônico para contato. Alertamos para o fato de que nem todos os e-mails recebidos serão respondidos de maneira individualizada, sendo certo, contudo, que todos serão atenciosamente lidos e examinados. Fale conosco através do e-mail tutoriaiscss@emprimeiro.com.br que estará disponível até o dia 31 de dezembro do ano corrente.

Publicado: 08/08/2008 - Atualizado em: 09/08/2008.