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 800x600 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é. */
}

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 1280x1024, 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:

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:

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á.