Construindo um layout com 3 colunas usando CSS - parte 2
Friday, November 17th, 2006Depois de ter montado o HTML usando CSS no <a href=”">post anterior</a>, vamos começar a colocar mais regras para aproximá-lo do resultado final. O código completo está no final deste post. Recomendo vocês já copiarem para um arquivo para fazerem testes assim que forem assimilando as explicações.
A primeira regra que colocamos foi o alinhamento (text-align:center;) para o body. Isso faz com que tudo que esteja dentro do body se alinhe ao centro da área disponÃvel do navegador. Lembre-se que havia dito que queremos um site alinhado ao centro.
Se vocês simplesmente fizerem a alteração acima, notarão que no Internet Explorer o layout ficará alinhado ao centro e no Firefox não. Para resolver isso especifico a largura da moldura, que é nosso principal delimitador. Como havia falado que a largura total do nosso site terá 770 pixels, coloco esse valor como largura para moldura e ainda, configuro a margem usando o parâmetro auto.
Para os que não conhecem a declaração da margem de um elemento, ela funciona da seguinte forma: você define quatro valores que serão as distâncias externas do elemento em relação a outros elementos. O primeiro valor é essa distância na parte superior, o segundo, do lado direito, e assim por diante, no sentido horário.
Notem que apesar de ter explicado como funciona a configuração de margem, usei um tal de “auto” como margem esquerda e direita do elemento. Esse auto faz com que as margens tenham exatamente o mesmo tamanho em ambos os lados, que é a forma correta de colocar o layout alinhado ao centro e o Firefox “entende” isso. Agora nós temos o layout alinhado ao centro em ambos navegadores. No Firefox por causa do “auto” e no Internet Explorer por causa do “text-align:center;” que está no body.
Além da forma descrita acima para declarar margens para um elemento, também é possÃvel especificar tais valores individualmente, como exemplo: “margin-left:10px;”. Além das margens, coloquei também para a moldura um “text-align:left;”, ele servirá para termos o conteúdo dentro dos elementos alinhado à esquerda. Na verdade ele sobrescreve a declaracão que tem no body.
Por último, coloquei um “float:left;” para todas as colunas. O resultado desse comando é alinhar à esquerda os elementos, desde que estes caibam horizontalmente no elemento que os engloba. É fundamental entender o que faz na prática esse comando. Para isso, recomendo que vocês alterem as medidas das colunas, tirem e coloquem novamente esse parêmtro e façam diversos testes.
Até a próxima!
<html>
<head>
<title></title>
</head>
<style>
body {
text-align:center;
}
#moldura {
text-align:left;
margin:0 auto 0 auto;
width:770px;
}
#col_esq, #col_dir {
width:120px;
float:left;
}
#col_esq {
background:#cccccc;
}
#col_dir {
background:#fedc67;
}
#col_pri {
width:530px;
float:left;
text-align:center;
}
</style>
<body>
<div id=”moldura”>
<div id=”col_esq”>coluna da esquerda</div>
<div id=”col_pri”>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
<div id=”col_dir”>coluna da direita</div>
</div>
</body>
</html>
