Voltar para o site

Layout CSS de 2 colunas - 3a. Parte

Publicado em: 12/08/2005

[ « anterior ] [ próximo » ]

Estilizando o topo

Como você deve ter observado na página base nosso topo tem o nome do site à esquerda e uma caixa de busca à direita.
Sobre a caixa de busca, esclareço que fiz uso da estrutura de código que é adicionada na página pelo google, conforme é prática bastante comum quando não se deseja ou não é conveniente desenvolver um script próprio para busca no site. O google faz uso de tabelas para inserir os campos, mas foge do escopo deste tutorial analisar tabelas ali. Se você quer saber mais sobre construção de tabelas acessíveis, leia este tutorial sobre tabelas de dados acessíveis e mais sobre finalidades das tabelas leia este tutorial sobre o uso de tabelas em documentos web.

Observando a marcação notamos o título do site dentro do elemento h1 e a busca no site dentro de um elemento form com id="busca".

Veja a seguir os acréscimos na folha de estilo para posicionar o topo.

...............
<title>Meu blog Standard</title>
<style type="text/css">
...............
#topo h1 {
float:left; 
margin: 0 20px;
}
#busca {
float:right; 
height:115px; 
margin:5px 5px 0 0;
}

#busca * {
margin:0; 
padding:0;
}

#busca input.input-text { 
color:#fff; 
background: transparent 
}

#busca input.input-submit { 
background-color:#d1c9ab; 
color:#880000;
}

#topo form {padding:4px;}

#topo form table tr td {
color:#fff; 
font-size:1.0em; 
font-weight:bold;
}

img {
display:block; 
border:none; 
margin:0; 
padding:0;
}
..............
</style>
</head>
<body>
<div id="tudo">
...Conteúdo da página ...
</div>
</body>
</html>

Veja o efeito destas regras na página base.

Sugestão: Grave a marcação da página no seu HD e faça alterações nas regras do topo para estudar seus efeitos e entender como funcionam.

Estilizando a coluna principal

Na coluna central temos uma barra de navegação (veremos no próximo item) e quadros com as matérias postadas em cores alternadas. Cada quadro está dentro de uma DIV com class="par" e class="impar" alternadamente.
Dentro de cada quadro temos um título do post dentro do elemento h2, uma data de postagem dentro de um elemento p com class="data", uma imagem com class="left" (para imagens à esquerda do post) ou class="right" (para imagens à direita do post), um texto do post dentro de parágrafos, um autor do post dentro de um elemento p com class="envio", um link para os comentários postados com class="comentário" e um link para comentar com class="comente"

Veja a seguir as regras de estilos acresentadas:

...............
<title>Meu blog Standard</title>
<style type="text/css">
...............
#principal {
width:500px; 
float:left; 
background:#fff6d1;
line-height:1.4em;
	}

.par {background-color: #fffcee;}
.impar {background-color: #ebf5e6;}

.impar, .par {
border:1px solid #2eac2e;
margin: 10px 20px 10px; 
padding:10px; 
text-align:justify;
}
...............
</style>

Veja o efeito destas regras na página base.

Mais estilos

Vamos a seguir estilizar o título e a data, colocar as imagens e o texto em posição e estilizar o autor e comentários nos posts.

Veja a seguir as regras de estilos acresentadas:

...............
<title>Meu blog Standard</title>
<style type="text/css">
...............
#principal h2 {
border-bottom:1px solid #090; 
padding-bottom:1px; 
margin-bottom:2px;
} 
#principal p.data {
margin:0 0 20px ; 
text-align:right; 
font-size:0.85em;
} 
#principal p.envio {
font-size:0.9em; 
border:solid #090; 
border-width: 1px 0; 
padding:5px 0
} 
img.left {
float:left; 
margin-right:10px;
} 
img.right {
float:right; 
margin-left:10px;
}
...............
</style>

Veja o efeito destas regras na página base.

Estilizando a barra de navegação

A barra de navegação está dentro de um elemento ul, (lista não ordenada) com uma id="nav"

Veja a seguir as regras de estilos acresentadas:

...............
<title>Meu blog Standard</title>
<style type="text/css">
...............
ul#nav {
width:460px; 
line-height:20px; 
height:20px; 
margin:20px; 
padding:1px 0; 
border: solid #090; 
border-width: 1px 0;
}

ul#nav li{
list-style:none; 
display:inline; 
}

ul#nav li a { 
float:left; 
margin:0 1px; 
width:90px; 
background:#d1c9ab; 
color:#880000; 
text-align:center; 
text-decoration:none; 
font-weight:bold;
}

ul#nav li a:hover { 
background:#fafafa; 
color:#090;
}
...............
</style>

Veja o efeito destas regras na página base.

Estilizando o rodapé

Veja a seguir as regras de estilos acresentadas para o rodapé:

...............
<title>Meu blog Standard</title>
<style type="text/css">
...............
#rodape { 
clear:both; 
background:#2a7d00; 
color:#fff; 
text-align:center;
}

#rodape p {
color:#fff; 
font:1.1em "Courier New", Courier, mono; 
margin:5px 0 0;
}

#rodape img {
display:inline; 
margin:10px 10px 3px;
}
...............
</style>

Estilizando a coluna secundária

Na coluna secundária utilizamos uma DIV extra dentro dela, (ver na marcação a div #conteudo-secundaria ) com a única finalidade de obter um espaçamento (de 10px) dos limites esquerdo e direito da coluna.
Poderíamos obter este espaçamento, simplesmente adicionando a regra #secundaria {padding: 0 10px;}
Contudo, isto faria com que a coluna assumisse larguras diferentes dependendo do navegador (Ver tutorial Box Model Hack) e assim no lugar de padding, usamos a extra #conteudo-secundaria com margem 10px, que fará o mesmo efeito e evitará uso do "box model hack", assim: #conteudo-secundaria {margin o 10px;}

Notar ainda que temos ainda nesta coluna cinco títulos h2 o primeiro, "Perfil" esta dentro de um elemento dl (lista de definição) o último "Parceiros" contém imagens com class="parceiros" e que são banners clicáveis e os três restantes estão contidos em ul (listas não ordenadas)

Veja a seguir as regras de estilos acresentadas para a coluna secundária:

...............
<title>Meu blog Standard</title>
<style type="text/css">
...............
#conteudo-secundaria { 
margin: 0 10px; 
}

#secundaria h2 {
margin:20px 0 5px;
}

#secundaria img.parceiros {
margin:15px 0 0 40px;
}

#secundaria li, #secundaria dd {
margin:2px 0;
}

#secundaria li a {
padding-left:20px;
}

#secundaria ul {
margin:0; padding:0;
}

#secundaria ul li{
list-style:none;
}
...............
</style>

Veja o efeito destas regras na página base.

Estendendo a cor de fundo das colunas

Como você já deve ter observado, a coluna secundária, por ser mais "curta" do que a coluna principal, não tem sua cor de fundo estendida até atingir o rodapé.
Vamos observar o que acontece se a coluna secundária for mais "comprida" do que a coluna principal. Para simular isto, retirei conteúdo da coluna principal e:

Veja aqui o que acontece neste caso.

Ops! Inverteu-se a situação. Agora é a coluna principal, que por ser mais "curta" do que a coluna secundária, não tem sua cor de fundo estendida até atingir o rodapé.

Solução

Usaremos uma técnica CSS conhecida como "faux columns" (artigo em inglês sobre este assunto) que consiste em atribuir uma imagem de fundo para o elemento body e que se repete na vertical. Esta imagem consiste de uma faixa de altura reduzida, por exemplo 10px, contendo a cor das colunas a simular.
Veja na figura abaixo uma versão sem escala desta faixa para a nossa página base.

Imagem mostrando uma faixa de 720px com um trecho de 220px na cor da coluna secundaria e de 500px na cor da coluna principal

Veja a seguir a regra de estilo para aplicar a imagem da faux column que eu denominei de fundo-bodyprovisorio.gif :

...............
<title>Meu blog Standard</title>
<style type="text/css">
...............
body {
background:transparent url(fundo-bodyprovisorio.gif) 
center repeat-y;
margin:0; 
padding:0;
font: 80% Arial, Helvetica, sans-serif; 
color:#800000;
text-align:center;
}
...............
</style>

Veja o efeito desta regras na página anterior. Observe como agora a cor da coluna principal (quando for mais curta que a coluna secundária) estende-se até o rodapé.

Veja o efeito desta regras na página base . Observe como agora a cor da coluna secundária (quando for mais curta que a coluna secundária) estende-se até o rodapé.

Vamos esclarecer melhor

Ficou confuso? Não entendeu? - Vamos esclarecer:

Podem ocorrer duas situações:
A coluna secundária é mais "curta" ou a coluna principal é mais "curta" dependendo da quantidade de conteúdo existente em cada coluna.
Em ambos os casos a cor do fundo da coluna mais "curta" não se estenderá até o rodapé e para corrigir usamos a técnica da faux column.

Vamos rever as duas situações;

Situação 1 - Coluna secundária mais "curta":

Situação 2 - Coluna principal mais "curta":

[ « anterior ] [ próximo » ]

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo