Html css

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 sobre CSS, 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 ou Safari 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: