Seções iMasters
HTML + Web Standards

Posicionamento e Layouts (Parte 02)

Dando continuidade ao artigo anterior, mostrarei
agora alguns exemplos de dúvidas freqüentes nas criações
de layouts. É bem simples, é só estudar bem
e modificar o código com implementações próprias
para treinar e enriquecer seu conhecimento. Qualquer dúvida
é só entrar em contato.

- Layout
fixo na esquerda.
- Layout
fixo na direita.
- Layout
fixo no centro.
- Layout
líquido com duas colunas.
- Layout
líquido com três colunas.

Layouts Fixos

Layouts fixos são mais fáceis, simples
de serem implementados, produzidos, menos complexos.

O tamanho pode variar, mas como a resolução
800×600 ainda é maioria para os usuários domésticos,
é recomendado utilizar no máximo 780px na largura,
que somando com os 20px da barra de rolagem, totaliza 800px, tamanho
da largura na resolução. Eu utilizo no máximo
770px no máximo, por segurança, mas cada um é
cada um, cada caso é um caso e cada desenvolvedor desenvolve
como quer.

Abaixo um layout fixo com alinhamento à
esquerda (clique
aqui para ver online
):

* { margin: 0; padding: 0;
} /* Zerando as margens e preenchimentos de todas as tags */

#lateral, #conteudo, #menu,
#rodape, #topo { font: 7.5pt Verdana, Tahoma, Arial; } /* Definindo
a fonte Verdana com tamanho 7.5 pt para as divs #lateral, #conteudo,
#menu, #rodape, #topo */

#geral {
background-color: #8DC37E; /* Definindo o mesmo verde que o das
divs #menu e #lateral para a cor de fundo do geral */
width: 770px; /* definindo 770px de largura , tornando o layout
fixo */
}

#topo {
background-color: #1C8000; /* definido cor de background para
o topo */
height: 100px; /* definindo altura de 100px */
}

#menu, #lateral {
width: 150px; /* definindo 150px de largura para as divs #menu
e #lateral */
background-color: #8DC37E; /* definindo cor de background para
as divs #menu e #lateral */
padding: 10px; /* definindo 10px de padding para as divs #menu
e #lateral */
}

html>body #menu, html>body
#lateral { width: 130px; } /* hack para q o FF, Opera, etc, deixem
o tamanho correto do layout, pois não colocando ele adicionaria
+ 20px aos 150px das divs, totalizando 170px, que iria bagunçar
o layout */

#menu { float: left; } /*
definindo float: left para o menu, para que fique grudado à
esquerda do conteúdo */
#lateral { float: right; } /* definindo float: right para a lateral,
para que fique grudado à direita do conteúdo */

#conteudo {
background-color: #FFFFFF; /* como o geral está com o fundo
verde, defino aqui um branco para o fundo do conteúdo.
*/
margin: 0 150px; /* definindo margem 0 para a base e o topo e
150px para esquerda e direita */
padding: 10px; /* definindo 10px de padding */
}

#rodape {
background-color: #1C8000; /* definindo cor de background */
height: 40px; /* definindo altura de 40px */
clear: both; /* não permitindo que objetos “flutuantes”
obstruam o rodapé. */
}

Topo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus arcu urna, mollis sed, auctor eget, aliquam ac, lectus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus arcu urna, mollis sed, auctor eget, aliquam ac, lectus.
Vestibulum vel justo. Nunc tempus, orci tristique consequat auctor,
ante dolor pharetra neque, id laoreet augue nunc at orci. Nam
aliquam, dui quis rutrum vulputate, tellus metus luctus dui, et
scelerisque urna ligula sit amet magna. Quisque volutpat, ligula
vitae vehicula gravida, quam magna rutrum sapien, facilisis condimentum
sapien pede id arcu. Proin quis augue ut lectus feugiat malesuada.
Fusce rhoncus. Sed auctor ultricies nisl. Fusce sapien sapien,
pretium sit amet, semper in, porta quis, ligula. Quisque tincidunt.
Integer condimentum, massa a bibendum interdum, felis elit luctus
tortor, et ullamcorper risus risus in nisi. Proin pharetra eleifend
arcu. Fusce eros. Curabitur eu ipsum sed ligula hendrerit pellentesque.
Nullam at elit. Vivamus orci. Morbi rhoncus, enim ut mattis malesuada,
pede ipsum mattis dolor, vitae semper nulla turpis eu eros.

Morbi pretium. Maecenas ut lorem vel felis malesuada
rutrum. Vestibulum laoreet eleifend massa. Aenean dignissim arcu.
In massa. Sed non risus sit amet est condimentum pretium. Nullam
sollicitudin dui ut augue. Duis vulputate hendrerit pede. Phasellus
ornare ultricies nisi. In molestie fermentum magna. Curabitur
elit purus, ultricies imperdiet, fermentum eu, posuere eget, elit.
Donec aliquet dignissim odio. Ut lobortis, justo in laoreet lobortis,
lacus augue fringilla felis, vel interdum quam risus ut est. Nullam
fermentum faucibus metus. Nullam posuere. Ut imperdiet. Nulla
id magna sodales dolor ultrices tempor. Pellentesque aliquam nisl
sit amet velit. Phasellus porta sem et nisi dignissim vulputate.

Rodapé

Abaixo um layout fixo com alinhamento no centro
(clique
aqui para ver online
):

* { margin: 0; padding: 0;
} /* Zerando as margens e preenchimentos de todas as tags */

body { text-align: center;
} /* definindo o alinhamento do texto para o centro */

p { margin: 0 0 15px 0; }
/* definindo a margem dos parágrafos */

#lateral, #conteudo, #menu,
#rodape, #topo {
font: 7.5pt Verdana, Tahoma, Arial; /* Definindo a fonte Verdana
com tamanho 7.5 pt para as divs #lateral, #conteudo, #menu, #rodape,
#topo */
text-align: left; /* definindo o alinhamento do texto para esquerda
*/
}

#geral {
background-color: #8DC37E; /* Definindo o mesmo verde que o das
divs #menu e #lateral para a cor de fundo do geral */
width: 770px; /* definindo 770px de largura , tornando o layout
fixo */
margin: auto;
}

#topo {
background-color: #1C8000; /* definido cor de background para
o topo */
height: 100px; /* definindo altura de 100px */
}

#menu, #lateral {
width: 150px; /* definindo 150px de largura para as divs #menu
e #lateral */
background-color: #8DC37E; /* definindo cor de background para
as divs #menu e #lateral */
padding: 10px; /* definindo 10px de padding para as divs #menu
e #lateral */
}

html>body #menu, html>body
#lateral { width: 130px; } /* hack para q o FF, Opera, etc deixem
o tamanho correto do layout, pois não colocando ele adicionaria
+ 20px aos 150px das divs, totalizando 170px, que iria bagunçar
o layout */

#menu { float: left; } /*
definindo float: left para o menu, para que fique grudado à
esquerda do conteúdo */
#lateral { float: right; } /* definindo float: right para a lateral,
para que fique grudado à direita do conteúdo */

#conteudo {
background-color: #FFFFFF; /* como o geral está com o fundo
verde, defino aqui um branco para o fundo do conteúdo.
*/
margin: 0 150px; /* definindo margem 0 para a base e o topo e
150px para esquerda e direita */
padding: 10px; /* definindo 10px de padding */
}

#rodape {
background-color: #1C8000; /* definido cor de background */
height: 40px; /* definindo altura de 40px */
clear: both; /* não permitindo que objetos “flutuantes”
obstruam o rodapé. */
}

Abaixo um layout fixo com alinhamento à
direita (clique
aqui para ver online
):

* { margin: 0; padding: 0;
} /* Zerando as margens e preenchimentos de todas as tags */

p { margin: 0 0 15px 0; }
/* definindo a margem dos parágrafos */

#lateral, #conteudo, #menu,
#rodape, #topo {
font: 7.5pt Verdana, Tahoma, Arial; /* Definindo a fonte Verdana
com tamanho 7.5 pt para as divs #lateral, #conteudo, #menu, #rodape,
#topo */
text-align: left; /* definindo o alinhamento do texto para esquerda
*/
}

#geral {
background-color: #8DC37E; /* Definindo o mesmo verde que o das
divs #menu e #lateral para a cor de fundo do geral */
width: 770px; /* definindo 770px de largura , tornando o layout
fixo */
position: absolute; /* primeiro passo para alinhas à direita.
Definindo o posicionamento como absoluto */
right: 0; /* último passo. Com o posicionamento absoluto,
você pode definir as propriedades left, top, right e bottom.
Definindo o right como 0 (zero), faz com que o div fique grudado
à direita */
}

#topo {
background-color: #1C8000; /* definido cor de background para
o topo */
height: 100px; /* definindo altura de 100px */
}

#menu, #lateral {
width: 150px; /* definindo 150px de largura para as divs #menu
e #lateral */
background-color: #8DC37E; /* definindo cor de background para
as divs #menu e #lateral */
padding: 10px; /* definindo 10px de padding para as divs #menu
e #lateral */
}

html>body #menu, html>body
#lateral { width: 130px; } /* hack para q o FF, Opera, etc deixem
o tamanho correto do layout, pois não colocando ele adicionaria
+ 20px aos 150px das divs, totalizando 170px, que iria bagunçar
o layout */

#menu { float: left; } /*
definindo float: left para o menu, para que fique grudado à
esquerda do conteúdo */
#lateral { float: right; } /* definindo float: right para a lateral,
para que fique grudado à direita do conteúdo */

#conteudo {
background-color: #FFFFFF; /* como o geral está com o fundo
verde, defino aqui um branco para o fundo do conteúdo.
*/
margin: 0 150px; /* definindo margem 0 para a base e o topo e
150px para esquerda e direita */
padding: 10px; /* definindo 10px de padding */
}

#rodape {
background-color: #1C8000; /* definido cor de background */
height: 40px; /* definindo altura de 40px */
clear: both; /* não permitindo que objetos “flutuantes”
obstruam o rodapé. */
}

Coloquei somente o CSS, pois o conteúdo
do xhtml é o mesmo. Analisaremos o código:

Esquerda:

Neste exemplo, em questão de alinhamento,
como o posicionamento à esquerda é padrão,
não precisa de nada misterioso, não mexemos em nada
sobre alinhamento.

Vendo a parte de estruturação do
layout, colocamos todo código dentro de uma div #geral,
para englobar o layout inteiro. Aí vocês perguntam
“Por que isso?” simplesmente para o posicionamento
ficar muito mais fácil, dependendo somente deste div para
alinharmos. Se não utilizássemos, ficaria mais complicado
para posicionarmos, precisaremos utilizar position, left, etc…
E isso é um pouco complicado, pois pode afetar os elementos
“filhos”, “pais”, etc… Então
pra quê complicar não é verdade?

Perceberam que não declarei width para o
topo e o rodapé? Lembram que no artigo anterior citei que
o padrão na largura é 100%? Por isso, não
declarei, com isso eles ficam com a largura do seu “pai”,
que é o #geral, que está recebendo 770px. Com isso,
eles automaticamente ficam com o tamanho 770px. Poderíamos
colocar o width 770px neles, mas caso precise modificar o tamanho,
teríamos que modificar nas três divs. Vamos sempre
tentar facilitar as coisas certo?

Centralizado:

A diferença neste exemplo fica no body e
no #geral. Acrescentei um text-align: center no body, que atribui
o alinhamento ao centro no conteúdo do body. No i.e. bastava
somente isso, mas no FF, Opera, etc, você precisa complementar
com um margin: auto na div geral, que vai fazer com que a div
se alinhe de acordo com o text-align: center do body.

Direita:

Este exemplo mexe com as propriedades mostradas
no artigo anterior. Pequenas mudanças também neste
exemplo, mas somente a #geral foi modificada. Foi adicionado um
position: absolute, tornando o posicionamento absoluto de acordo
com seu “pai”. Como seu pai é o body, então
ele se baseará no corpo da página. Adicionamos o
right: 0, com isso ele cola na direita do seu “pai”,
que é o , então ficando colado à
direita no corpo da página.

Nos 3 exemplos, a parte de estruturação
é a mesma, só sendo alterado a parte de alinhamento,
por isso, nos layouts ao centro e à direita, é só
seguir como falei no alinhamento à esquerda.

Layouts Líquidos

Uma das grandes dores de cabeça de muitos
desenvolvedores. Uma opção mais trabalhosa, mais
chatinha, mas que não chega a ser um bicho de sete cabeças.
Não sou muito a favor de layouts líquidos, recomendo
somente para sites de grande conteúdo, pois possuir pouco
conteúdo, uma resolução de 1280×1024, por
exemplo, fará o site aparentar ter um conteúdo ainda
menor, ficando um pouco pobre. Mas isso não quer dizer
que portais de grande conteúdo necessitam ter um layout
líquido, o iMasters por exemplo, um portal de grande conteúdo
é feito com uma largura fixa e não acarreta problema
nenhum nisso.

Não estou aqui para mostrar qual a melhor
opção, somente expressei minha opinião e
meu ponto de vista sobre o assunto. Então vamos lá.

Primeiro ponto que citarei e que muitos desconhecem,
é que o padrão de largura no css é líquido,
ou seja, não declarando um width, automaticamente o elemento
ficará com a largura de seu “pai”, e se o body
for seu “pai”, então ele ocupará o corpo
inteiro da página. Isso logicamente pode variar de acordo
com os valores das margens, paddings, etc.

Clique
aqui para ver o exemplo.

Passando este ponto, fica mais fácil e claro.
Muitos colocam 100% no valor do width, o problema é que
ao setar este valor, automaticamente o elemento considera o 100%
do (isso logicamente no div “pai”, que
estiver acima de todos e abaixo somente do ), e com
isso, se a margem do elemento não estiver zerada, ganhamos
de presente a desagradável barra de rolagem horizontal.
Isso logicamente nos browsers Firefox, Opera, etc.

Clique
aqui para ver o exemplo.

Obs.: Como eu disse, o padrão de tamanho
dos elementos é líquido, ou seja, estende-se ao
final de seu “pai”. Mas isto não se atribui
nos elementos com floats. Caso possua, o tamanho do elemento ficará
de acordo com seu conteúdo.

Clique
aqui para ver o exemplo.

Reparem que no exemplo não setei um valor
para largura, como padrão deveria ocupar toda a tela, mas
com o float: left, ele só estende-se de acordo com seu
conteúdo.

2 Colunas

Vamos ver agora, um exemplo de layout líquido
com duas colunas. Logo abaixo comentarei sobre o código
(clique
aqui para ver online
):

CSS:

* { margin: 0 } /* zerando
a margem de todas as tags */

body { padding: 0; } /* zerando
o padding do body */

p { margin: 0 0 15px 0; }
/* definindo a margem dos parágrafos */

#lateral, #conteudo, #menu,
#rodape, #topo {
font: 7.5pt Verdana, Tahoma, Arial; /* Definindo a fonte Verdana
com tamanho 7.5 pt para as divs #lateral, #conteudo, #menu, #rodape,
#topo */
}

#geral, #menu { background-color:
#8DC37E; } /* Definindo o mesmo verde para as divs #menu e #geral
para que sempre que o conteudo for maior que o menu, o menu acompanhar
na altura. */

#topo {
background-color: #1C8000; /* definido cor de background para
o topo */
height: 100px; /* definindo altura de 100px */
}

#menu {
width: 150px; /* definindo 150px de largura para as divs #menu
e #lateral */
padding: 10px; /* definindo 10px de padding para as divs #menu
e #lateral */
float: left; /* definindo que o menu fique colado à esquerda
dentro do div #conteudo */
}

html>body #menu { width:
130px; } /* hack para q o FF, Opera, etc deixem o tamanho correto
do layout, pois não colocando ele adicionaria + 20px aos
150px das divs, totalizando 170px, que iria bagunçar o
layout */

#conteudo {
background-color: #FFFFFF; /* como o geral está com o fundo
verde, defino aqui um branco para o fundo do conteúdo.
*/
margin-left: 150px; /* definindo um valor de 150px para a margem
esquerda do #conteudo */
padding: 10px; /* definindo 10px de padding */
}

#rodape {
background-color: #1C8000; /* definido cor de background */
height: 40px; /* definindo altura de 40px */
clear: both; /* não permitindo que objetos “flutuantes”
obstruam o rodapé. */
}

HTML:

Topo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus arcu urna, mollis sed, auctor eget, aliquam ac, lectus.
Vestibulum vel justo. Nunc tempus, orci tristique consequat auctor,
ante dolor pharetra neque, id laoreet augue nunc at orci. Nam
aliquam, dui quis rutrum vulputate, tellus metus luctus dui, et
scelerisque urna ligula sit amet magna. Quisque volutpat, ligula
vitae vehicula gravida, quam magna rutrum sapien, facilisis condimentum
sapien pede id arcu. Proin quis augue ut lectus feugiat malesuada.
Fusce rhoncus. Sed auctor ultricies nisl. Fusce sapien sapien,
pretium sit amet, semper in, porta quis, ligula. Quisque tincidunt.
Integer condimentum, massa a bibendum interdum, felis elit luctus
tortor, et ullamcorper risus risus in nisi. Proin pharetra eleifend
arcu. Fusce eros. Curabitur eu ipsum sed ligula hendrerit pellentesque.
Nullam at elit. Vivamus orci. Morbi rhoncus, enim ut mattis malesuada,
pede ipsum mattis dolor, vitae semper nulla turpis eu eros.

Morbi pretium. Maecenas ut lorem vel felis malesuada
rutrum. Vestibulum laoreet eleifend massa. Aenean dignissim arcu.
In massa. Sed non risus sit amet est condimentum pretium. Nullam
sollicitudin dui ut augue. Duis vulputate hendrerit pede. Phasellus
ornare ultricies nisi. In molestie fermentum magna. Curabitur
elit purus, ultricies imperdiet, fermentum eu, posuere eget, elit.
Donec aliquet dignissim odio. Ut lobortis, justo in laoreet lobortis,
lacus augue fringilla felis, vel interdum quam risus ut est. Nullam
fermentum faucibus metus. Nullam posuere. Ut imperdiet. Nulla
id magna sodales dolor ultrices tempor. Pellentesque aliquam nisl
sit amet velit. Phasellus porta sem et nisi dignissim vulputate.

Rodapé

Nada de muito complicado. Um topo e um rodapé,
que expliquei mais sobre eles lá em cima um div #menu e
outro #conteudo, todos englobados pelo #geral. O menu recebe um
float: left, para que fique grudado à esquerda, tem 150px
de largura e com 10px de padding. Aí que entra um grande
macete, o uso de hacks, mais especificamente sobre box models.

A interpretação do I.E. é
errada para a utilização de paddings, bordas, etc.
Quando você têm um div com 150px, que é o caso
do #menu e adiciona 10px no padding em todos os lados, que o caso
de agora, automaticamente o div adiciona 20px de largura (10px
da esquerda + 10px na direita), ficando com 170px (150px + 20px).
Isso porque como você definiu 150px no tamanho, é
o correto ele manter isso. Mas o i.e. não interpreta deste
modo, ele diminui 20px do tamanho total do div, ficando com 130px
no total (150px – 20px = 130px). Como eu queria totalizar
o div com 150px, incluindo os paddings, então tenho que
colocar um hack com o tamanho real. Neste meu caso preferi utilizar
pro FF, Opera, mas poderia ter usado pro i.e. e no código
sem hack poderia ter setado o valor do FF, Opera, etc. Veja mais
sobre Box Models clicando
aqui
.

Temos no div #conteudo um valor pra margem esquerda
de 150px, mesmo valor da largura do #menu. Tem que ser sempre
assim, mudou a largura do #menu, mude a margem no #conteudo, isso
logicamente se você quiser que fique um do lado do outro,
totalmente, como é o caso atual.

Temos um pequeno problema. O menu tem menos conteúdo
que o #conteudo e como possui o float: left, acaba não
acompanhando o div conteúdo em altura. Mas como tem gambiarras
para tudo, utilizei uma aqui. Setei a mesma cor de background
para o #menu e o #geral, assim, sempre que o conteúdo for
maior que o menu, o geral vai descendo junto, e como possui a
mesma cor que o menu, camufla este “bug” do css.

Caso seja ao contrário, é só
retirar a cor de fundo do geral, ou deixar na mesma cor do conteúdo.
Se o site for dinâmico, você não souber quando
irá ser maior, qual será maior, a melhor solução
é a utilização da técnica faux columns.
Mais
sobre Faux Columns
.

3 Colunas

Vamos ver agora, um exemplo de layout líquido
com três colunas. Logo abaixo comentarei sobre o código (clique
aqui para ver online
):

CSS:

* { margin: 0 } /* zerando
a margem de todas as tags */

body { padding: 0; } /* zerando
o padding do body */

p { margin: 0 0 15px 0; }
/* definindo a margem dos parágrafos */

#lateral, #conteudo, #menu,
#rodape, #topo {
font: 7.5pt Verdana, Tahoma, Arial; /* Definindo a fonte Verdana
com tamanho 7.5 pt para as divs #lateral, #conteudo, #menu, #rodape,
#topo */
}

#geral, #menu, #lateral {
background-color: #8DC37E; } /* Definindo o mesmo verde para as
divs #menu, #lateral e #geral para que sempre que o conteudo for
maior que o #menu ou o #lateral, eles acompanhem na cor de fundo
na altura. */

#topo {
background-color: #1C8000; /* definido cor de background para
o topo */
height: 100px; /* definindo altura de 100px */
}

#menu, #lateral {
width: 150px; /* definindo 150px de largura para as divs #menu
e #lateral */
padding: 10px; /* definindo 10px de padding para as divs #menu
e #lateral */
}

#menu { float: left; } /*
definindo que o #menu fique colado à esquerda dentro do
div #geral */

#lateral { float: right;
} /* definindo que o #lateral fique colado à direita dentro
do div #geral */

html>body #menu, html>body
#lateral { width: 130px; } /* hack para q o FF, Opera, etc deixem
o tamanho correto do layout, pois não colocando ele adicionaria
+ 20px aos 150px das divs, totalizando 170px, que iria bagunçar
o layout */

#conteudo {
background-color: #FFFFFF; /* como o geral está com o fundo
verde, defino aqui um branco para o fundo do conteúdo.
*/
margin: 0 150px; /* definindo um valor de 150px para a margem
esquerda do #conteudo */
padding: 10px; /* definindo 10px de padding */
}

#rodape {
background-color: #1C8000; /* definido cor de background */
height: 40px; /* definindo altura de 40px */
clear: both; /* não permitindo que objetos “flutuantes”
obstruam o rodapé. */
}

HTML:

Topo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus arcu urna, mollis sed, auctor eget, aliquam ac, lectus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus arcu urna, mollis sed, auctor eget, aliquam ac, lectus.
Vestibulum vel justo. Nunc tempus, orci tristique consequat auctor,
ante dolor pharetra neque, id laoreet augue nunc at orci. Nam
aliquam, dui quis rutrum vulputate, tellus metus luctus dui, et
scelerisque urna ligula sit amet magna. Quisque volutpat, ligula
vitae vehicula gravida, quam magna rutrum sapien, facilisis condimentum
sapien pede id arcu. Proin quis augue ut lectus feugiat malesuada.
Fusce rhoncus. Sed auctor ultricies nisl. Fusce sapien sapien,
pretium sit amet, semper in, porta quis, ligula. Quisque tincidunt.
Integer condimentum, massa a bibendum interdum, felis elit luctus
tortor, et ullamcorper risus risus in nisi. Proin pharetra eleifend
arcu. Fusce eros. Curabitur eu ipsum sed ligula hendrerit pellentesque.
Nullam at elit. Vivamus orci. Morbi rhoncus, enim ut mattis malesuada,
pede ipsum mattis dolor, vitae semper nulla turpis eu eros.

Morbi pretium. Maecenas ut lorem vel felis malesuada
rutrum. Vestibulum laoreet eleifend massa. Aenean dignissim arcu.
In massa. Sed non risus sit amet est condimentum pretium. Nullam
sollicitudin dui ut augue. Duis vulputate hendrerit pede. Phasellus
ornare ultricies nisi. In molestie fermentum magna. Curabitur
elit purus, ultricies imperdiet, fermentum eu, posuere eget, elit.
Donec aliquet dignissim odio. Ut lobortis, justo in laoreet lobortis,
lacus augue fringilla felis, vel interdum quam risus ut est. Nullam
fermentum faucibus metus. Nullam posuere. Ut imperdiet. Nulla
id magna sodales dolor ultrices tempor. Pellentesque aliquam nisl
sit amet velit. Phasellus porta sem et nisi dignissim vulputate.

Rodapé

Muito parecido com o de duas colunas. Temos o acréscimo
do div #lateral, que está à direita do #conteudo.
No código, além do acréscimo, temos o posicionamento
o código do #lateral que vem antes do #conteudo. Aí
vocês me perguntam “Por que ele vem antes do conteúdo,
se a div #lateral é depois no layout?”. Simples,
para o código, não importa o posicionamento na tela
para levar em consideração no código. Como
citado no W3Schools,
um elemento com atributo block deverá aparecer após
o elemento com o float. Por isso que o #conteudo aparece depois
do #lateral.

No CSS, temos o #lateral e o #menu 150px de largura
e com padding 10px, tudo numa declaração somente.
A diferença entre os dois é o float, que no #menu
é left e no #lateral é right.A grande diferença
está no #conteudo, que ganha o atributo margin: 0 150px,
que adiciona margens, 0(zero) para o topo e a base e 150px para
esquerda e direita. Então você me pergunta: “Bom,
ok, a margem esquerda eu entendo, mas por que na direita também?”.
Simples, se não colocássemos a margem na direita,
o #lateral ficaria como uma imagem com um align=”right”,
o conteúdo iria pular linha até que chegasse o final
da altura do #lateral, depois disso, avançaria até
o canto direito do #conteudo. Veja
o exemplo
.

Gostaria de chamar a atenção para
mais um detalhe, existente em todos os exemplos de layout. No
#rodape de todos os exemplos, vemos um atributo que alguns desenvolvedores
desconhecem ou apenas usam, sem saber seu funcionamento. É
o clear: both. Esse atributo possui os valores both, left, right
e none(valor padrão). Ele faz com que o elemento que o
receba(no caso o #rodape), não permita que ele seja “invadido”,
obstruído por elementos que recebam o atributo float, que
é o caso do #menu e #lateral. Vamos ver os exemplos:

- Both

Na primeira opção, o #rodape não
permite que nenhum objeto que contenha o atributo float, obstrua
seu conteúdo, ficando do modo como desejamos neste exemplo.

-
Left

Nesta opção, o #rodape não
permite que objetos que contenham o atributo float, com o valor
left, obstrua seu conteúdo, ficando com o menu acima do
#rodape e o #lateral tomando o espaço inteiro pelo seu
conteúdo e largura, fazendo com que o #rodape tenha largura
somente até o limite do início do #lateral.

- Right

Exatamente como o left, mas o inverso, os elementos
que tiverem o atributo float com valor right, não irão
obstruir o espaço do #rodape, que é o caso do #lateral,
e os que contiverem o atributo float com valor left, ocuparão
espaço inteiro pelo seu conteúdo e largura, fazendo
com que o #rodape tenha largura somente até o limite do
fim do #menu.

- None

Neste, ambos valores de float irão obstruir
o espaço do #rodape, fazendo com que ele fique entre o
#menu e o #rodape. Lembrando que este é o valor padrão.

Bom, termino aqui mais um artigo. Vimos que em
nenhum dos casos utilizamos position, left, top, etc. Com exceção
do exemplo de layout alinhado à direita e utilizamos somente
no div #geral. No artigo anterior, comentei que é desnecessário
na maioria das vezes. Poderia ser útil caso no #menu tivéssemos
um menu popup, dropdown, mas deixarei este exemplo para um próximo
artigo.

No próximo artigo falarei sobre layouts
fixos e líquidos, mas com cantos arredondados. As maneiras,
qual a melhor implementação em alguns casos, etc.

Podem mandar sugestões por email sobre assuntos
a serem abordados nos futuros artigos.

Grande abraço e até lá.

Mensagem do anunciante:

Em apoio à evangelização do WordPress, os cursos da Apiki são gratuitos para que você possa se especializar na plataforma que mais cresce no mundo. Vagas limitadas, Inscreva-se agora.

Comente também

14 Comentários

hogs

Prazer em conhecer vc no interCon, companhero de site! tua coluna ta muito manera, parabens!! Abração!

Renan Gomes Fogaça

Ficou show de bola, cara!!!
Bem facil de compreender, o melhor tutorial de criação de layouts com css q eu ja vi!
falou!

Adriano Novaes

pqp até que fim alguem posto algo com extrema utilidade ehehe parabens pela materia

Gleison

Essa coluna era tudo que estava faltando..
Parabens pela matéria, ficou excepcional….

Bruno

Falae pessoal, obrigado pelos emails, comentários sopbre os posts. Muito bom saber que estou podendo ajudar a galera. Aquele abraço.

Cristiano Andrade Franco

A partir deste tutorial eu pude sanar todas as minhas dúvidas de posicionamento percentual no CSS. Agora posso fazer as famosas páginas esticadas sem medo.

Sérgio Rafael

bom , gostei de saber sobre a função do clear: both; na boa por isso meu menu ficava com bug junto com o conteúdo vlw memso :D

Baduba NeTwOrKs

gostaria de usar isso em minha pagina acho q é a soluçao mas nao entendi muito bem alguem pode ajudar aqui no link do forum?

http://forum.imasters.com.br/index.php?showtopic=206194

Parabéns pelo artigo, eu ainda tinha várias dúvidas sobre, float, clear, etc. Você escreveu o artigo de uma forma bem explicativa, o que é difícil de encontrar. Obrigado!

ezequiel olliver

excelente! inclusive me ajude ai amigo criei um site com as seguintes dimensoes 1020px X 600px porem ele não se ajusta em todas as resoluções tipo uma resolução maior ele fica só um quadrado no meio da pagian e uma 800X600 uma enorme barra de rolagem. sei que existe um jeito de autoajustar porem não tenho a minima. meu site é em html e o contrudo em swf me socorre ai amiga voce é mesmo a pessoa indicada fico grato eternamente se me auxiliar abraço

samuel

boa rapaz!!

Fernando

Ótima explicação! Me ajudou muito..
[]‘s

fartura

queria fazer algo assim … mas aproveitar toda a tela

//


























Qual a sua opinião?