Você está na página 1de 22

Apostila

CSS
(Cascading Style Sheets)
Folha de Estilo em Cascata

Criando Layouts CSS a


Partir do ZERO
Criando um layout com CSS a partir do zero

Prefácio

Esta série de posts, intitulada “Criando um layout com CSS a partir do zero” é uma versão em português da
série “Creating a CSS layout from scratch”, de Steve Dennis, do site Subcide e publicada sob permissão aqui
no Café com Gelo. Espero que aqueles que ainda não entendem corretamente como funcionam as CSS tenham uma
boa noção com esse tutorial.

Divirtam-se!

ZehRique

1. Introdução

Nota: Este tutorial assume que você tem um conhecimento básico sobreCSS, mas somente se você entende
basicamente seu funcionamento. Se você NUNCA usou CSS antes, você pode iniciar com a introdução a CSS da
w3schools.

Este guia explicará a você, passo-a-passo, através da criação de um layout CSS totalmente funcional. Vou tentar
explicar da melhor forma os conceitos por trás de cada passo, mas muitas vezes outras pessoas já cobriram esse
assunto melhor do que eu. Por causa disso, haverá algumas vezes, links para mais informações em sites externos.

Nota: Use um navegador de internet moderno como Opera, Firefox ouSafari para este exercício. Não se assuste
porém, seu site deverá funcionar no IE ao final da matéria.

2. O Design

Abaixo está o design que vamos usar como base nesse tutorial. Nossa missão é montar essa criança usando nada
mais nada menos que XHTML, CSS, e algumas imagens:

Primeiro, temos que identificar os elementos estruturais do design, para então saber como estruturar nosso
documento HTML.
A web é largamente baseada em retângulos, e nós precisamos lembrar disso quando estivermos dividindo nosso
design. Essas divisões principais que nós vamos fazer vão terminar em tags <div>. Um <div> é basicamente um
contêiner retangular o qual podemos posicioná-lo usando CSS.

O diagrama abaixo mostra como vamos dividir o design.

Nós identificamos 5 elementos principais:

* Main Navigation (área de navegação principal)


A navegação primária para este website. As imagens vão mudar on hover (quando o cursor do mouse estiver sobre
elas).
Comprimento: 760px
Altura: 50px

* Header (cabeçalho)
O cabeçalho do website inclui uma imagem de fundo (puramente por estética), e o nome da companhia.
Comprimento: 760px
Altura: 150px

* Content (conteúdo)
O conteúdo principal do website vai aqui.
Comprimento: 480px
Altura: Muda dependendo do conteúdo

* Sidebar (barra lateral)


Esta terá uma camada secundária que não é tão importante quanto o conteúdo principal.
Comprimento: 280px
Altura: Muda dependendo do conteúdo

* Footer (rodapé)
Informações gerais: Copyright, créditos, e algum texto alternativo para navegação.
Comprimento: 760px
Altura: 66px

Este site será também centralizado na janela do navegador. Agora nós temos toda a informação que precisamos para
começar.
3. Modelo HTML padrão
Eu criei um documento HTML básico que uso como ponto de início para todos os meus websites.

Copie o modelo e cole-o no seu editor HTML de preferência. (O meu é o Macromedia Homesite).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>CompanyName - PageName</title>
<meta http-equiv="Content-Language" content="en-us" />

<meta http-equiv="imagetoolbar" content="no" />


<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="Description" />


<meta name="keywords" content="Keywords" />

<meta name="author" content="Enlighten Designs" />

<style type="text/css" media="all">@import "css/master.css";</style>


</head>

<body>

</body>
</html>

Salve este código como index.html no diretório raiz (htdocs) do seu website.

A estrutura dos diretórios de seu website deve ser igual à mostrada abaixo:

4. Configurando a tela

Como você vai notar no design, qualquer coisa em nossa página é da largura de 760px ou menos, e nada flutua fora
disso. O que nós vamos fazer é criar um contêiner para nossa página que tenha 760px de largura e posicionado no
meio da página. Nossos 5 principais elementos serão colocados dentro desse contêiner.

Entre as tags <body> </body>, crie um <div> com um atributoid="page-container" :

<body>

<div id="page-container">
Hello world.
</div>

</body>

Nota: pequenos trechos de código serão fornecidos através deste tutorial, códigos de passos antigos estarão
coloridos de azul enquanto que os novos códigos que você deverá adicionar estarão em verde.

E isto é todo o HTML que precisamos para nosso contêiner. Em CSS.


Crie um novo arquivo vazio e salve-o como master.css no diretório/css/.

Crie uma nova regra na folha-de-estilos para selecionar o page-container:

#page-container {

O sinal # (sustenido) na frente da id diz ao navegador que estamos selecionando uma id. Para uma classe nós
usaríamos um . (isso mesmo, um sinal de ponto final), ex: .page-container {}.

Um id é um identificador único que usamos para coisas que somente ocorrerão uma vez na página. Então para
cabeçalhos, rodapés, navegadores, etc nós usamos id’s, e para elementos que se repetem, como links, nós devemos
usar classes, que podem aparecer mais vezes na mesma página.

Nós não estaremos habilitados a ver as modificações que são feitas a esta<div>, porque ela é transparente por
padrão. Então, a primeira coisa que nós vamos fazer é colorir o fundo da div de vermelho, para nos dar um
indicador do que estamos fazendo:

#page-container
background: red;
}

Você deve ver algo como isto através do comprimento da página do seu navegador:

Em primeiro lugar devemos atribuir uma largura de 760px para estadiv.

#page-container {
width: 760px;
background: red;
}

Recarregue a página no seu navegador para ver a regra sendo aplicada.

No próximo passo vamos centralizar esta div. Isto é feito atribuindo suas margens para auto. Quando as margens
esquerda e direita são atribuídas para auto, elas vão se igualar em ambos os lados e a div vai ficar no centro do
contêiner.

#page-container {
width: 760px;
margin: auto;
background: red;
}

Agora você deve ter um bloco vermelho de 760px de largura, centralizado e com os dizeres “Hello World.” dentro.
Mas ele está situado a 8px de distância do topo e lados do navegador.

Isto acontece porque as tags html e body tem margens e/ou alinhamento padrões em quase todos os navegadores.
Então nós precisamos escrever uma regra CSS para resetar as margens e alinhamentos das tags html e body para
zero. Adicione essa regra bem no topo do seu arquivo css:

html, body {
margin: 0;
padding: 0;
}
Uma vírgula entre os seletores CSS significa “ou”, então, aqui a regra será aplicada à tag html ou à tag body. Já
que ambas existem na página, será aplicada a ambas.

Maravilha, agora nosso bloco está do jeito que deveria estar. Note que quanto mais conteúdo é adicionado à
esta div, ela vai automaticamente modificar sua altura para acomodar o conteúdo que é colocado dentro.

Vamos lá.

5. Os Elementos principais

Nós precisamos adicionar 5 div’s, todas com id’s individuais que descrevem sua finalidade. Estas divs correspondem
às áreas do design que nós identificamos na parte 2. Troque o texto Hello World. pelas div’s abaixo. Nós vamos
inserir texto dentro das div’s somente para facilitar a identificação visual quando visualizarmos a página.

<div id="page-container">

<div id="main-nav">Main Nav</div>

<div id="header">Header</div>

<div id="sidebar-a">Sidebar A</div>

<div id="content">Content</div>

<div id="footer">Footer&lt/div>

</div>

Sua página deve ficar assim:

Sem CSS as div’s serão arranjadas do topo para baixo, uma após a outra, na mesma ordem que estão no código. Isto
é comumente referido como o “fluxo” do documento.

Bem, vamos então utilizar a informação que temos para fazer nossas div’s ficarem do tamanho correto.

Remova o fundo vermelho da #page-container, e adicione uma nova regra para #main-nav. Mude o fundo
da #main-nav para vermelho para que possamos vê-la, e atribua sua altura para 50px:

#page-container {
width: 760px;
margin: auto;
}

#main-nav {
background: red;
height: 50px;
}

Note que nós não especificamos a largura da div. Isto por que, por padrão, a div vai se esticar até preencher seu
contêiner-pai, que neste caso, é nosso div #page-container que foi configurado para 760px de largura.

Faça a mesma coisa para a div cabeçalho (header), utilizando a altura que usamos no primeiro passo. Use a cor
azul para o fundo.
#header {
background: blue;
height: 150px;
}

Já que estamos aqui, vamos configurar o rodapé (footer). Use a cor laranja para o fundo.

Lembre-se de que quando escrever sua folha-de-estilos, você pode agrupar seus estilos. Então todos os estilos do
cabeçalho (header) poderiam vir juntos. Todos os estilos do rodapé (footer) poderiam estar juntos, e os estilos de
navegação poderiam estar juntos. Eu também acho que estruturar a folha-de-estilos similar à ordem do HTML
ajuda bastante, assim sendo header fica próximo ao topo, footer ao final.

#footer {
background: orange;
height: 66px;
}

Agora as próximas 2 div’s são ligeiramente diferentes. Sua altura é dependente do conteúdo que vai dentro delas,
portanto não vamos atribuir sua altura. Vamos pintá-las de verde-escuro e verde. Coloque as novas regras entre as
regras header e footer na folha-de-estilos. Fica mais fácil encontrá-las, uma vez que a folha-de-estilo está ficando
maior.

#header {
background: blue;
height: 150px;
}

#sidebar-a {
background: darkgreen;
}

#content {
background: green;
}

#footer {
background: orange;
height: 66px;
}

Se tudo correu bem, você deve ter uma página que se parece com isso:

6. Floats

Floats (flutuadores) pode ser um conceito enganoso para fazer você perder a cabeça. Basicamente um float é um
elemento que é alinhado contra os lados esquerdo ou direito do seu contêiner. (para maiores detalhes,
leia maxdesigns in depth introduction to floats. (em inglês).
No caso deste website, nós vamos fazer flutuar (float) nossa div#sidebar-a à direita, com a largura de
280px. Adicione o seguinte à sua CSS:

#sidebar-a {
float: right;
width: 280px;
background: darkgreen;
}

Você agora fez flutuar com sucesso sua primeira div, e você agora deve ter uma página que se parece com isso:

Somente para o propósito de testes, substitua o texto do conteúdo dadiv para o seguinte:

<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam
gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim.
Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce
malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate
aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta
eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse
platea dictumst.
</div>

Note que o texto rola no conteúdo da div flutuante, como visto abaixo:

Mas isto não é o que nós queremos. Nós queremos que o conteúdo dadiv seja distribuído através da div
sidebar, a qual tem seu lado direito contra o lado esquerdo da barra lateral.
Um jeito fácil de conseguir isto num layout flutuante como esse é colocar uma margem direita na nossa div
content que tenha a mesma largura de nossa barra lateral, nesse caso 280px. Isto vai empurrar o canto direito do
conteúdo fora do canto direito do page-container.

#content {
margin-right: 280px;
background: green;
}

Ótimo, nós quase conseguimos fazer nosso layout flutuante funcionar. Mas há uma coisa a mais que devemos
considerar… o que acontece se adiv sidebar ficar mais alta que a div content?

Vamos ver. Copie e cole este texto na div sidebar:

<div id="sidebar-a">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam
gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim.
Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce
malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate
aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta
eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse
platea dictumst.
</div>

Isto não é o que queremos, afinal. A razão do rodapé não ter se movido pra baixo é porque a sidebar está “flutuada”
à direita.

Explicação: Por padrão, qualquer elemento flutuante não empurrará para baixo elementos que estejam abaixo deles.
Isto por que elementos flutuantes não são considerados parte do “fluxo” do documento. É como se eles estivessem
em uma outra camada “flutuando” acima dos outros elementos, e por causa disso, não podem afetar suas posições.

E o que nós podemos fazer para contornar este problema? Introduzir a propriedade clear da CSS.

Adicione isto à sua folha-de-estilos:

#footer {
clear: both;
background: orange;
height: 66px;
}

Quando um elemento tem sua propriedade clear atribuída, se ele entrar em contato com um elemento flutuante,
ele é colocado exatamente abaixo de onde o flutuante termina. Você pode especificar se ele é afetado somente por
flutuadores esquerdos ou direitos, neste caso nós poderíamos utilizar tanto right ou both. Nós vamos
utilizar clear: both somente por segurança.

7. Estrutura adicional

• Links para navegação


• Cabeçalhos (Cabeçalho do Site e os cabeçalhos do conteúdo)
• Conteúdo
• Rodapé informativo (informação de copyright, créditos, e navegação alternativa)

Agora que nós temos nossas divs de layout base nos devidos lugares, podemos adicionar o restante da estrutura que
vai ser a “cara” desse website.

O fundamental que ainda precisamos adicionar ainda são:

Ao implementar essas coisas sem quebrar o layout da página, vamos criar uma pequena classe muito útil,
chamada hidden.

Adicione isto perto do topo da sua folha-de-estilos, depois da definição da tag body:

.hidden {
display: none;
}

Isto significa agora que podemos atribuir a qualquer elemento no site com tag hidden e ele não será exibido logo
de cara. Isto vai nos facilitar agora, portanto, você pode esquecê-la por um momento.

Vamos falar sobre cabeçalhos

Cabeçalhos num documento HTML são definidos pelas tags <h1> até<h6> em ordem de importância no
documento. Por exemplo: <h1> para o nome do website, <h2> para os cabeçalhos principais (ex.: nome da
página), <h3> para cabeçalhos secundários, etc… Nós vamos adicionar um <h1> dentro da nossa div Header e
atribuir o nome da companhia, Enlighten Designs, neste caso.
<div>
<h1>Enlighten Designs</h1>
</div>

Se você recarregar a página, notará que Enlighten Designs aparece em letras grandes dentro do cabeçalho, mas
há também agora muito espaço em branco ao redor do cabeçalho. Isto é causado pelas margens padrões das
tags <h1>. Então necessitamos cortar a margem e seu preenchimento dessa forma:

h1 {
margin: 0;
padding: 0;
}

Agora vamos adicionar a navegação. Os prós e contras de como a navegação vai funcionar podem ser um tanto
complicados e serão discutidos em detalhes posteriormente em sua própria seção.

A navegação será estruturada como lista de definição (<dl>) com id’s individuais relevantes a cada termo de
navegação com o uso da tag (<dt>). Estes itens de navegação terão dentro de si, links para nossas seções principais.
Se isto parecer confuso, adicione somente este código à sua div main-nav:

<div id="main-nav">
<dl>
<dt><a href="#">About</a></dt>
<dt><a href="#">Services</a></dt>
<dt><a href="#">Portfolio</a></dt>
<dt><a href="#">Contact Us</a></dt>
</dl>
</div>

Nota: Muitas pessoas usam listas não-ordenadas para navegação, mas para este simples nível
de navegação resolvi usar listas de definição por se mostrarem mais fáceis de funcionar no IE.
O IE tem alguns bugs de CSS irritantes com listas não-ordenadas. Mas com pequenos ajustes,
uma lista não-ordenada pode fazer a mesma coisa facilmente. É questão de preferência, creio.

Em termos fáceis para entender, a <dl> age como um contêiner, as<dt>‘s são identificadores únicos para cada
item de navegação e os links… são links. Nós vamos usar id’s únicos mais tarde quando viermos a fazer o “look” da
navegação como ele deve ser, com suas belas imagens de “rollover”. Só que mais tarde. Se você recarregar a página,
vai notar que ela parece um tanto feia, então por ora, vamos esconder a navegação que adicionamos com a
classe hidden que construímos anteriormente.

<div id="main-nav">
<dl class="hidden">
<dt><a href="#">About</a></dt>
<dt><a href="#">Services</a></dt>
<dt><a href="#">Portfolio</a></dt>
<dt><a href="#">Contact Us</a></dt>
</dl>
</div>

“E como num passe de mágica, tudo se transformou…”

Agora vamos passar para o rodapé porque é relativamente fácil. Há duas partes no rodapé: a informação de
copyright e os créditos na esquerda e a navegação alternativa do site na direita.

Nós queremos que a navegação alternativa flutue à direita, como fizemos com a barra lateral e o conteúdo, então
vamos colocar isso no primeirodiv. Em teoria você poderia fazer as div’s flutuarem não importasse onde elas
estivessem no código, mas erros no IE tornam isso difícil, então agora, qualquer item flutuante deve vir primeiro na
ordem do código.
Posicione em uma div com uma id única como esta:

<div id="footer">
<div id="altnav">
<a href="#">About</a> -
<a href="#">Services</a> -
<a href="#">Portfolio</a> -
<a href="#">Contact Us</a> -
<a href="#">Terms of Trade</a>
</div>
</div>

Abaixo dessa div, vamos acrescentar a marca de copyright e os créditos.

<div id="footer">
<div id="altnav">
<a href="#">About</a> -
<a href="#">Services</a> -
<a href="#">Portfolio</a> -
<a href="#">Contact Us</a> -
<a href="#">Terms of Trade</a>
</div>
Copyright © Enlighten Designs

Powered by <a href="http://www.enlightenhosting.com/">Enlighten


Hosting</a> and
<a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>
</div>

E agora o rodapé está pronto. Para ter certeza de que seu site está indo bem, ele deve se parecer com isto:

Movendo dentro da área de conteúdo principal, vamos adicionar o conteúdo. Estou pegando o conteúdo do design
diretamente do passo 2. Use as tags <h2> para os cabeçalhos “About” e “Contact Us”. Coloque os parágrafos em
tags <p></p>, e use <br /> para a quebra de linhas.

<div id="content">
<h2>About</h2>More contact information...</a></p>
</div>

Atualize a visualização da sua página. Você vai notar que há mais de um espaço em branco “pulando” ao redor
da div de conteúdo. Isto acontece por causa das margens padrão nas tags <h2> e <p>. Necessitamos diminuir as
margens e o espaçamento. Porém, nós não queremos fazer isto para cada simples tag de parágrafo ou cabeçalho
secundário que estará no website. Para fazer isto, necessitamos usar seletores CSS “filhos”. Todos os elementos em
HTML tem um relacionamento “filho, pai”. Se a “tag a” estiver dentro da “tag b”, então a tag b é filha da tag a. No
código acima, nossas tags <h2> e nossas tags <p> são ambas filhas da div #content. Se quisermos selecionar os
elementos filhos de um pai específico, nós separamos eles com um espaço, como no exemplo abaixo:

#content h2 {
margin: 0;
padding: 0;
}

#content p {
margin: 0;
padding: 0;
}

Então as regras acima dizem para o navegador aplicar estes estilos SOMENTE para as tags <h2> e para aqueles que
são elementos filhos dadiv #content.

Na próxima parte faremos o visual do texto parecer um pouco melhor.

8. Alguns estilos básicos de texto

Ó céus! Você está cansado de olhar aquelas terríveis cores de fundo ou o quê?!

Liberte-se delas. Acabe com todos, exceto para a navegação, em vermelho.

Isto vai parecer um pouco melhor, mas o texto ainda fica horrível. Vamos atribuir uma família de fontes global, cor e
tamanho para usar como uma base legal. Os atributos de fonte que atribuímos no corpo serão automaticamente
herdados para qualquer outro texto no site, a não ser que sejam especificamente sobrescritos com outro estilo. Crie
a nova regra CSS antes da classe “hidden”, perto do topo da folha de estilos:

body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
background: #ffffff;
}

O conteúdo acima já é auto-explicativo.

Se tudo está de acordo como planejado, você deve ver algo como isto:
O que isto necessita é algum espaçamento para separar cada um daqueles blocos de conteúdo.

De acordo com o design, o vazio abaixo dos cabeçalhos de conteúdo é aproximadamente 15px, e os vazios abaixo de
cada parágrafo estão na faixa dos 15px. Então vamos juntar aquelas duas regras CSS que criamos anteriormente e
aplicar regras de “padding-bottom” abaixo:

#content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}

#content p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}

Nós também necessitamos de 25px de espaçamento ao redor de todo o conteúdo do div, e todo o espaçamento do
div, dando a eles algum espaço para respirar.

Esta parte DEVERIA ser fácil. Na teoria, você somente deveria atribuirpadding: 25px; nas divs, mas
infelizmente, devido a problemas no Internet Explorer, não podemos fazer isto.

O problema do IE é descrito em detalhes aqui.

Há dois possíveis caminhos para lidar com este problema: um envolve a escrita de alguns truques de CSS para
esconder certas regras CSS de um navegador, enquanto as exibe em outro, porque o espaçamento é algo que usamos
muito, nós vamos fazer o truque do outro jeito.

O outro jeito é inserir um div adicional dentro dos divs que queremos que sejam espaçados e atribuir suas classes
para “padding”. Padding é a única coisa que será aplicada à estas divs espaçadas.

A razão disto funcionar é porque as divs espaçadas não tem um comprimento atribuído. Como regra, tente não
adicionar espaçamento e um comprimento estático ou altura no mesmo elemento.

<div id="sidebar-a">
<div class="padding">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam
gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim.
Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce
malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate
aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta
eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse
platea dictumst.
</div>
</div>

Faça o mesmo para a div de conteúdo.

Agora na folha de estilos, nós vamos criar duas novas regras, exibidas abaixo em verde:
#sidebar-a {
float: right;
width: 280px;
}

#sidebar-a .padding {
padding: 25px;
}

#content {
margin-right: 280px;
}

#content .padding {
padding: 25px;
}

Usando o mesmo método anterior, vamos selecionar somente os elementos com uma class="padding" que são
filhas das divs#sidebar-a ou #content.

O espaço vertical entre as linhas do texto no conteúdo do texto e no texto da sidebar devem ser largos, de acordo
com o rascunho do gráfico. Em CSS, o espaçamento vertical é atribuído pelo atributo line-height. Vamos
adicionar uma altura da linha de 18px:

#sidebar-a {
float: right;
width: 280px;
line-height: 18px;
}

#content {
margin-right: 280px;
line-height: 18px;
}

À frente, os cabeçalhos <h2> que adicionamos parecem horríveis. Porque a fonte que eles estavam usando não é
uma fonte para web, nós vamos ter de substituí-los por imagens. Crie duas imagens como as exibidas abaixo e salve-
as no diretório /images/headings/.

Substitua o texto do cabeçalho por estas imagens mas, lembre-se de manter as tags <h2> ao redor das tags das
imagens, e lembre-se de colocar o atributo alt nas imagens. O atributo alt é designado para exibir um texto
alternativo à imagem, se um usuário está visualizando a página em um browser que não suporta imagens, ou
desabilitou a exibição de imagens. Isto é útil também para scripts robôs de sites, por que eles não conseguem
entender imagens.

<h2><img src="images/headings/about.gif" width="54" height="14"


alt="About" /></h2>

<h2><img src="images/headings/contact.gif" width="98" height="14"


alt="Contact Us" /></h2>

Nosso site já está começando a tomar forma. Depois disso, você deve enxergar algo como:
9. O Cabeçalho

Para implementar o cabeçalho, necessitamos obter a imagem de fundo aplicada ao div header, substitua o
cabeçalho “Enlighten Designs” com uma logo gráfica e posicione-a no local correto, no cabeçalho (a barra cinza
escuro à direita).

Primeiro, crie duas imagens como as abaixo (ou copie estas mesmo):

/images/general/logo_enlighten.gif

/images/headers/about.jpg

A primeira parte é fácil. Atribua uma imagem de fundo na CSS utilizando o formato abaixo:

#header {
height: 150px;
background: #db6d16
url(../images/headers/about.jpg);
}

A propriedade background que acabamos de usar é atualmente uma propriedade reduzida que permite-nos
especificar a cor de fundo, imagem, posição da imagem e como a imagem deve ser repetida, tudo em uma só linha.
Nós atribuímos o fundo para usar a mesma sombra alaranjada como a usada pelo cabeçalho somente para que a
página não pareça tão agradável se o usuário não tem a exibição de imagens habilitadas em seu navegador. Os
caminhos para as imagens em seu arquivo CSS são relativos ao arquivo CSS, não à página HTML. Isto porque
o ../ é necessário no caminho acima.

Agora, substitua o texto “Enlighten Designs” com a imagem da logo. Novamente, lembre-se de manter a tag <h1> e
escreva uma descrição no atributo alt.
<div id="header">
<h1><img src="images/general/logo_enlighten.gif"
width="236" height="36" alt="Enlighten Designs" border="0" /></h1>
</div>

Agora nós temos que posicioná-la corretamente onde ela deve estar. Vamos fazer isto flutuando a tag <h1> à
direita, e então usar as propriedades margin-top e padding-right para obter a exata posição. Adicione o
seguinte texto à regra <h1> em sua folha de estilos:

h1 {
margin: 0;
padding: 0;
float: right;
margin-top: 57px;
padding-right: 31px;
}

A razão porque usamos padding-right ao invés de margin-right é porque as margens podem


frequentemente disparar erros grosseiros no IE se utilizado em certos lugares.

E o cabeçalho está pronto.

10. O Rodapé

Primeiro nós necessitamos fazer o visual do texto aparecer corretamente. O design usa a fonte Tahoma 10px para o
texto, colorido de um cinza bem leve (#c9c9c9). Eu tenho certeza que você pode desenhar isto por si mesmo, mas
se quiser usar o copiar/colar:

#footer {
clear: both;
height: 66px;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
}

E para mudar a cor do link (e remover o sublinhado), adicionamos isto:

#footer a {
color: #c9c9c9;
text-decoration: none;
}

Mas os links necessitam de destaque algumas vezes, quando seu mouse estiver sobre eles. Então, vamos fazê-los
mudar sua cor para laranja, quando o mouse estiver sobre eles:
#footer a:hover {
color: #db6d16;
}

Nós também tivemos de adicionar uma borda de 1 pixel na borda superior do div do rodapé, atribuir algum
espaçamento, e fazer a altura da linha ficar em 18px (aumentando o espaçamento). Por estarmos atribuindo
espaçamento no div do rodapé, nós teremos de remover a propriedade height para não disparar o bug
espaçamento/comprimento/altura que mencionei anteriormente. Nós não necessitamos realmente de atribuir a
altura neste div:

#footer {
clear: both;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
border-top: 1px solid #efefef;
padding: 13px 25px;
line-height: 18px;
}

A última coisa que deixamos para fazer é flutuar a navegação alternativa à direita. Note que elementos flutuantes
devem ter um comprimento especificado para funcionar corretamente, então atribua o comprimento um
ligeiramente maior do que a navegação atualmente necessita e atribua o alinhamento do texto à direita para que o
texto se encaixe onde deveria estar.

#footer #altnav {
width: 350px;
float: right;
text-align: right;
}

Tadá! Nós temos um rodapé.

11. A navegação (argh!)

Há muitos truques de CSS neste capítulo, e não é imperativo que você entenda exatamente o que cada parte da css
faz, somente que você esteja pronto para modificar esta CSS para fazer o que você quer em outros websites, o que é
basicamente a mudança de altura, comprimento e imagens. Porém eu vou dar o melhor de mim para explicar o
código.

Vamos começar pela parte fácil. Remova o fundo vermelho na CSS e exiba a navegação removendo a
classe hidden na lista de definição.

O método de “rollover” das imagens que vamos usar neste menu é uma solução 100% feita em CSS. A premissa
básica por trás disso é posicionar os itens em uma lista de definição próxima uma da outra (lado a lado), esconder o
texto delas, e usar CSS para trocar a imagem de fundo dependendo de qual estado o botão está (“rollover”, normal
ou selecionado).
Para cada um dos 4 itens de navegação, necessitamos criar uma imagem como as exibidas acima. O primeiro terço
da imagem é o estado normal, o segundo é o estado mouseover e o terceiro é o estado selecionado. O gif animado
abaixo mostra como isto vai funcionar:

Espero que você tenha entendido como isto funciona, através do diagrama acima. Vamos fazer nossas 4 imagens de
navegação.
Salve-as em /images/nav/

Agora vou dar o melhor de mim para explicar a css por trás de tudo, bloco por bloco. Descubra comigo.

Substitua sua regra #main-nav com o código abaixo:

/* Main Navigation */

#main-nav { height: 50px; }


#main-nav dl { margin: 0; padding: 0; }

Isto muda a altura da div main-nav para 50px e retira todas as margens das listas de dados.

/* IE5 Mac Hack \*/


#main-nav { padding-left: 11px; }
/*/
#main-nav { padding-left: 11px; overflow: hidden; }
/* End Hack */

Isto é um truque que faz duas coisas: Atribui o espaçamento da esquerda, da main-nav para 11px (para que bata
ligeiramente como é mostrado no design) e conserta um bug no IE5 para mac.

#main-nav dt { float: left; }

Isto atribui a definição dos títulos (nossos contêineres de item de navegação individual) para flutuar à esquerda, o
que os junta da esquerda para a direita, ao invés de um abaixo do outro.
#main-nav dt a {
display: block;
height: 0px !important;
height /**/:50px; /* IE 5/Win hack */
padding: 50px 0 0 0;
overflow: hidden;
background-repeat: no-repeat;
}

Atribui ao link a mesma dimensão que seu contêiner correspondente e esconde o texto usando a
propriedade overflow.

#main-nav dt a:hover {
background-position: 0 -50px;
}

Faz com que a posição do fundo se mova até 50px quando o cursor do mouse passa por cima de um link.

#main-nav dt#about,
#main-nav dt#about a { width: 71px; background-image:
url(../images/nav/about.gif); }

#main-nav dt#services,
#main-nav dt#services a { width: 84px; background-image:
url(../images/nav/services.gif); }

#main-nav dt#portfolio,
#main-nav dt#portfolio a { width: 95px; background-image:
url(../images/nav/portfolio.gif); }

#main-nav dt#contact,
#main-nav dt#contact a { width: 106px; background-image:
url(../images/nav/contact.gif); }

Atribui o comprimento individual de cada item de navegação e o caminho para cada imagem.

Agora se todas as nossas imagens estiverem nomeadas como acima e salvas em seus lugares corretos, sua navegação
deve funcionar.

A última coisa que necessitamos fazer para que a navegação funcione, é obter os estados dos botões selecionados
para mostrá-los quando você estiver na página correspondente.

Necessitamos adicionar algumas novas CSS e modificar algumas CSS existentes para concluir isto. Adicione a CSS
abaixo ao restante de sua navegação CSS:

body.about dt#about,
body.about dt#about a,
body.services dt#services,
body.services dt#services a,
body.portfolio dt#portfolio,
body.portfolio dt#portfolio a,
body.contact dt#contact,
body.contact dt#contact a {
background-position: 0 -100px;
}
Este seletor CSS enorme checa qual classe a tag body tem e então atribui a posição da barra de navegação correta.
então se você quisesse que anavbar about fosse selecionada, você atribuiria class="about" à tagbody.
Vamos fazer isto agora:

<body class="about">

Agora o problema que temos é que também queremos que a imagem do cabeçalho mude baseada em qual seção
estamos visualizando. Então necessitamos modificar a regra #header como abaixo:

body.about #header {
height: 150px;
background: #db6d16
url(../images/headers/about.jpg);
}

Agora quando você criar páginas para suas outras seções, você só tem de modificar a classe do body de about para,
por exemplo, contact, atribuir uma regra de CSS apontando para a imagem do cabeçalho correta e está pronto.

12. Fazendo funcionar no IE

Nota: Para seguir esta seção, você vai precisar instalar as “versões padrão do IE. Nestas estão truques não
suportados em versões mais antigas do IE que você pode instalar junto com sua versão atual do IE.

Vamos iniciar os truques com a criança problema atual, IE5.

Abra seu navegador IE5. Há duas coisas que eu notei instantaneamente que estão erradas. A primeira é que a página
não é centralizada como deveria ser, e a segunda é que o rodapé tem um problema de alinhamento estranho.

O problema de alinhamento é bem conhecido, então vamos nos deter primeiramente neste.

O IE 5 e o 5.5 não reconhecem a propriedade CSS margin: auto; como deveria ser. Para corrigir isto nós
necessitamos usar a propriedadetext-align: center; no body, que vai centralizar o contêiner div.

body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
text-align: center;
}

Isto vai centralizar nosso contêiner div, mas vai centralizar também todo o texto dentro do div. Nós não
queremos isto, então necessitamos sobrescrever o text-alignment dentro do contêiner div.

#page-container {
width: 760px;
margin: auto;
text-align: left;
}

O que resolve o problema de centralização.

Agora, o rodapé esquisito.

Eu não consegui encontrar atualmente qualquer referência a este bug particular através de uma rápida pesquisa no
google, então eu tentei imaginar um jeito de consertar isso. Eu pensei que o bug tinha algo a ver com
o div altnav flutuante mas não pude identificar onde estava o problema exatamente. Então, eventualmente eu
tentei colocar um divao redor da informação de copyright e que fez com que o bug desaparecesse.
<div id="copyright">
Copyright © Enlighten Designs<br />
Powered by <a href="http://www.enlightenhosting.com/">Enlighten Hosting</a>
and
<a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>
</div>

Isto disparou alguns problemas de padding-top no rodapé, então eu removi o atributo padding-top:
13px; da regra #footer, e adicionei a ambas as div’s: #copyright e #altnav.

#footer #altnav {
clear: both;
width: 350px;
float: right;
text-align: right;
padding-top: 13px;
}

#footer #copyright {
padding-top: 13px;
}

Há um último bug do IE que pude verificar, e é quando você passa o cursor do mouse sobre item selecionado da
navegação. Ele reverte o fundo para branco como se não fosse selecionado. Nós não queremos que o item
selecionado mude quando o cursor do mouse estiver sobre ele.

Se adicionarmos mais algumas poucas regras para nossa enorme regra que define a seleção da navegação, teremos
nosso problema solucionado.

body.about dt#about,
body.about dt#about a,
body.about dt#about a:hover,
body.services dt#services,
body.services dt#services a,
body.services dt#services a:hover,
body.portfolio dt#portfolio,
body.portfolio dt#portfolio a,
body.portfolio dt#portfolio a:hover,
body.contact dt#contact,
body.contact dt#contact a,
body.contact dt#contact a:hover {
background-position: 0 -100px;
}

E agora está tudo certo. Espero que você tenha aprendido alguma coisa sobre layouts em CSS. Minha recomendação
é que você procure mais sites especializados em CSS como os listados abaixo e repare em suas codificações
HTML/CSS para ver como eles tem feito as coisas funcionarem. Em caso de dúvida, dê uma googlada.

Sinta-se à vontade para sugerir modificações ou melhorias neste tutorial (diretamente com o autor, em
inglês), ou pergunte por tutoriais em outros tópicos do site.