Esta é a área de topo. Ela tem margens (externas) negativas acima, à esquerda
nem à direita, anulando a margem da página para ficar rente à borda da janela.
Tem também magem interna (padding) nas laterais para afastar o texto da borda.
Ideal para barra de título na forma de um banner.
Esta é uma área adequada para um menu horizontal, anulando as margens esquerda e
direita da página.
Aqui fica a coluna da esquerda, de largura fixa, que pode ser usada para menu de
atalhos, índice, informações adicionais etc.
Colunas e faixas em CSS
Márcio d'Ávila, 12 de outubro de 2004.
Revisão 1, 9 de julho de 2005.
Categoria:
Internet: Cliente: DHTML
Como aplicar corretamente estilos CSS para definir áreas do conteúdo (definidas
com elementos DIV) como colunas e faixas, sem recorrer ao uso de tabelas.
Estes exemplos definem um leiaute em duas colunas, acrescido de uma faixa de topo
e outra faixa horizontal logo abaixo, demonstrando boas práticas e técnicas de
uso de estilos CSS.
No atual padrão de HTML, não existe ainda recurso para distribuir
automaticamente o conteúdo da página em colunas. Uma solução é criar manualmente
duas regiões (DIV) e formatá-las adequadamente em CSS para que sejam apresentadas
como duas colunas lado-a-lado. Outra solução seria recorrer ao uso de uma tabela
com uma linha e duas colunas.
A coluna da direita fica aqui, ocupando o restante da largura da janela.
- No BODY, com um pouco de engenhosidade, definimos a aparência
básica para o preenchimento de fundo das duas colunas. A vantagem de definir um
fundo em duas colunas de cor através do BODY é que ele preenche de maneira
uniforme toda a extensão vertical da página, independente do comprimento ocupado
pelo conteúdo de cada coluna. Este BODY tem as seguintes características
de estilo CSS:
margin: 10px;
- Margens à volta da página fixas, de 10 pixels cada.
A definição de valor explícito e arbitrário para a margem do
documento, ao invés de deixar o navegador definir uma margem
padrão, tem como objetivo permitir o controle preciso,
principalmente quando for desejado suprimir alguma das margens
como neste caso.
background: #FFFFF0 url(img/fundo_col_direita.png) repeat-y;
- O fundo do documento define a aparência do fundo das duas
colunas: uma cor sólida para o fundo da maior da página (usado
aqui o bege claro
#FFFFF0
), acrescida de uma imagem
repetida apenas na vertical (eixo Y), que fica exibida por sobre
a cor sólida e define assim a largura (fixa) e aparência do
fundo da coluna esquerda. Neste caso, a imagem mede 150×1
pixels e consiste apenas em uma cor sólida (cáqui escuro).
- Um DIV inicial define uma faixa de topo sem margem com os
limites da janela, definindo para isto os seguintes estilos CSS:
margin: -10px -10px 0 -10px;
- Margens (dadas começando da superior e seguindo no sentido
horário) superior, direita e esquerda, que divisam com as
margens do próprio documento, negativas no mesmo valor que as
margens do BODY, ou seja, -10 pixels. Apenas a margem inferior,
que divisa com o restante do conteúdo do documento, fica
inalterada em zero.
padding: 0 10px;
- Se desejado, um
padding
(margem interna) pode
dar um espaçamento entre o conteúdo dentro da faixa de topo e as
bordas da janela, para compensar a ausência de margens. Aqui foi
definida margem interna lateral de 10 pixels.
background: green;
- Foi definida uma cor de fundo sólida verde neste exemplo.
- Outro DIV em seguida define uma faixa horizontal ideal para
um menu, usando estes estilos CSS:
margin: 0 -10px;
- Margens verticais nulas (zero), não interferindo na faixa de
título acima nem no restante do conteúdo abaixo; e margens
laterais negativas em -10 pixels, anulando as margens do
documento.
background: silver;
- Foi definida uma cor de fundo sólida cinza neste exemplo.
- Um terceiro DIV, este flutuante à esquerda, define o conteúdo
da coluna esquerda e sua largura. Para isso, possui os seguintes estilos CSS:
float: left;
- Torna o bloco flutuante à esquerda.
width: 130px;
- Define uma largura fixa, que deve ser condizente com a
largura da imagem que define seu fundo, no BODY, e com a margem
de espaço reservado para ela deixada no DIV seguinte da coluna
direita. Como o documento define a margem esquerda de 10 pixels
e a imagem de fundo tem largura 150 pixels, restam 140 pixels de
área utilizável; definimos então a largura da coluna em 130
pixels para restar também uma distância de 10 pixels à direita
da coluna, de forma que o conteúdo desta coluna esquerda fica
simétrico à imagem de fundo na horizontal.
background: #999900;
- Foi definida uma cor de fundo sólida
#999900
neste exemplo (um pouco mais clara que a cor da imagem aplicada
no fundo do BODY), apenas para deixar visível a área efetivamente
ocupada pelo DIV.
- O quarto e último DIV que compõe a estrutura básica do texto em duas
colunas define agora a coluna direita, ocupando o restante da largura da janela
do documento. Define apenas este estilo CSS:
margin-left: 150px;
- Define uma margem à esquerda do bloco em 150 pixels, que se
soma à margem de 10 pixels já existe do documento (BODY).
Estes 150 pixels acomodam: a largura de 130 pixels da coluna da
direita, mais 10 pixels que servem de margem direita da primeira
coluna (até o fim da imagem de fundo), mais uma distância de 10
pixels que forma uma margem esquerda efetiva para esta segunda
coluna.
Como exercício, experimente acrescentar uma faixa final de rodapé, após o
conteúdo das colunas principais.
Exemplos adicionais
© 2003-2020, Márcio d'Ávila,
mhavila.com.br, direitos reservados.
O texto e código-fonte apresentados podem ser referenciados, distribuídos e utilizados,
desde que expressamente citada esta fonte e o crédito do(s) autor(es).
A informação aqui apresentada, apesar de todo o esforço
para garantir sua precisão e correção, é oferecida
"como está", sem quaisquer garantias explícitas ou
implícitas decorrentes de sua utilização ou suas
conseqüências diretas e indiretas.