Tutorial Avançado de CSS – Layout da Página

20 07 2008

Exemplo de página dividida em seções

Construir layouts com CSS é fácil. Se você está acostumado a desenhar suas páginas com tabelas, no começo usar CSS pode parecer difícil, mas não é, é apenas diferente e na verdade faz bem mais sentido.

Você precisa ver cada parte da página como um pedaço individual que você pode empurrar em qualquer lugar que você quiser. Você pode posicionar esses pedaços de modo aboluto ou em relação a outro pedaço.

Posicionamento

A propriedade position é usada pra definir se um elemento está posicionado de forma absoluta (valor absolut), relativa (relative), estática (static) ou fixa (fixed).

O valor static é o valor padrão e renderiza os elementos na ordem normal, como eles aparecem no HTML.

relative é bem parecido com static, mas os elementos podem ser deslocados de sua posição original com as propriedades top (topo), right (direita), bottom (inferior) e left (esquerda).

absolute empurra um elemento pra fora do fluxo normal do HTML e o coloca em seu próprio mundo. Em seu pequeno e louco mundo, o elemento absoluto pode ser colocado em qualquer lugar na  página usando top, right, bottom e left pra definir a distância de cada lado.

fixed funciona como absolute, mas o elemento vai ser posicionado em relação à janela e não em relação à página, então, teoricamente, um elemento fixado deve ficar exatamente onde ele está na tela mesmo quando a página é rolada. Por que teoricamente? Pelo motivo de sempre – isso funciona perfeitamente em navegadores como Mozilla e Opera, mas no IE não funciona de jeito nenhum.

Layout usando posicionamento absoluto

Você pode criar um layout tradicional com duas colunas usando posicionamento absoluto se você tem algo como o HTML seguinte:

<div id="navegacao">
  <ul>
    <li><a href="esse.html">Esse</a></li>
    <li><a href="aquele.html">Aquele</a></li>
    <li><a href="oOutro.html">O Outro</a></li>
  </ul>
</div>

<div id="conteudo">
  <h1>Ra ra banjo banjo</h1>
  <p>Bem-vindo à página Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
  <p>(Ra ra banjo banjo)</p>
</div>

E se você aplicar o CSS abaixo:

#navegacao {
	position: absolute;
	top: 0;
	left: 0;
	width: 10em;
}

#conteudo {
	margin-left: 10em;
}

Você vai ver que isso vai levar a barra de navegação pra esquerda e modificar a largura pra 10 em’s. Porque a navegação está posicionada absolutamente, ela não tem nada a ver com o fluxo do resto da página, e por isso é necessário definir a margem esquerda da área de conteúdo como sendo igual a largura da barra de navegação.

Fácil até demais. E você não está limitado a essa abordagem de duas colunas. Com um posicionamento mais engenhoso, você pode dispor de quantos blocos você quiser. Se você quisesse adicionar uma terceira coluna, por exemplo, você poderia adicionar o pedaço ‘navegacao2’ no seu HTML e mudar seu CSS para:

#navegacao {
  position: absolute;
  top: 0;
  left: 0;
  width: 10em;
}

#navegacao2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 10em;
}

#conteudo {
  margin: 0 10em; /* definindo as margens superior e inferior pra 0 e a esquerda e direita pra 10em */
}

A única desvantagem de elementos posicionados absolutamente é que eles vivem num mundo próprio, não existe nenhum jeito preciso de determinar aonde eles vão parar. Se você for usar os exemplos acima e todas as suas páginas têm barras de navegação pequenas e áreas de conteúdo grandes, tudo bem. Mas, especialmente quando usar valores relativos para larguras e tamanhos, você geralmente tem que abandonar qualquer esperança de posicionar qualquer coisa, como um rodapé, embaixo desses elementos. Se você quiser fazer algo assim vai ser necessário flutuar todos os seus pedaços, ao invés de posicioná-los absolutamente.

Flutuando

Flutuar um elemento vai deslocá-lo para a direita ou esquerda de uma linha, com o conteúdo fluindo ao seu redor.

Flutuar normalmente é usado para posicionar elementos menores em uma página (Veja o exemplo :first-letter na página sobre Pseudo Elementos), mas também pode ser usada para porções maiores, como colunas de navegação.

Usando o HTML do exemplo acima, você pode aplicar o CSS seguinte:

#navegacao {
  float: left;
  width: 10em;
}

#navegacao2 {
  float: right;
  width: 10em;
}

#conteudo {
  margin: 0 10em;
}

Se você não quer que o póximo elemento envolva os elementos flutuando, você pode aplicar a propriedade clear (limpar). clear: left vai limpar elementos flutuados para a esquerda, clear:right vai limpar elementos flutuados para a direita e clear: both vai limpar elementos flutuados para a esquerda e direita. Então se, por exemplo, você quiser um rodapé na sua página, você pode usar um pedaço de HTML com a id ‘rodape’ e adicionar o CSS seguinte:

#rodape {
	clear: both;
}

E aí está. Um rodapé que vai aparecer debaixo de todas as colunas, independente do tamanho de qualquer uma delas.

Essa foi uma introdução geral sobre posicionamento e flutação, com ênfase nos ‘pedaços’ maiores de uma página, mas lembre-se que esses métodos podem ser aplicados também em qualquer elemento dentro desses pedaços. Com uma combinação de posicionamento, flutuação, margens, paddings (enchimentos) e bordas, você pode representar QUALQUER design web.

Qualquer coisa que puder ser feita com tabelas pode ser feita melhor com CSS. A ÚNICA razão para usar tabelas na construção do layout é se você está tentando acomodar navegadores anciãos, que não suportam CSS.

Para se aprofundar na construção de layouts com CSS, é altamente recomendado que você acompanhe o tutorial “Criando um Layout com CSS a partir do zero“, feito pelo Subcide e traduzido pelo Café com Gelo. E não esqueça de conferir o código-fonte dos exemplos dessa página – é importante!

É aqui que CSS mostra mesmo suas vantagens – ele resulta numa página altamente acessível com apenas uma pequena fração do peso de uma página equivalente baseada em tabelas.

Páginas Relacionadas

Exemplos

Referência

Esse material é uma adaptação do CSS Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Anúncios

Ações

Information

7 responses

20 07 2008
Tutorial Avançado de CSS: A propriedade Display « Codando

[…] Próxima Página: Layout de Página […]

20 07 2008
Tutorial Avançado de CSS: Regras @ « Codando

[…] Página Anterior: Layout da Página […]

20 07 2008
Tutorial Avançado de CSS « Codando

[…] Layout de Página – Construindo uma página sem tabelas. […]

18 11 2008
LeoReis

Se você colocar uma div absoluta dentro de uma relativa, a absoluta vai passar a estar no mundo da relativa… =)

21 09 2011
Guilherme Aguiar

Olá! Teria como trocar o posicionamento da coluna na parte inferior do site, aonde estão localizados os widgets, para a parte de cima do site? Agradeceria muito se você pudesse me ajudar.

Site: http://revistapittacos.org/

3 10 2014
pablo henrique

ola ! estou com problemas no css com pixels não tenho muita ideia de pixels me ajude porfavor !!!

16 03 2016
JadenZ

Podes ir tentando,pixel por pixel ou de 50 em 50…mas você sempre achará a resposta,esses códigos é erro e acerto…aprenda com o erro re tente u-u

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: