Layout CSS de 2 colunas - 4a. Parte
Publicado em: 12/08/2005[ « anterior ]
Colocando imagens no topo
Como você deve ter observado na página base, o topo tem o nome do site à esquerda e uma caixa de busca à direita.
Iremos a seguir substituir o nome do site e o fundo do topo por uma imagem, usando uma das inúmeras técnicas CSS de substituição de texto por imagem. Vamos também melhorar a apresentação da caixa de busca existente no topo do site colocando um fundo com transparência alpha.
Para estas estilizações iremos declarar nas regras de estilo:
- Uma imagem de fundo para o topo; Ver a imagem
- Uma indentação negativa de 90000px para sumir com o texto do nome do site;
- Uma imagem simulando tranparência alpha para a caixa de busca. Ler tutorial transparência alpha
Veja a seguir os acréscimos na folha de estilo para estas estilizações no topo.
...............
<title>Meu blog Standard</title>
<style type="text/css">
...............
#topo {
height:150px;
background:#2a7d00 url(fundo-topo.jpg) center bottom no-repeat;
color:#fff;
}
#topo h1 {
float:left;
margin: 0 20px;
text-indent:-90000px;
}
#busca {
background: transparent url(alpha.gif) center;
float:right;
height:115px;
margin:5px 5px 0 0;
}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.
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 ]
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.
