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

Liberte-se delas. Acabe com todas, 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 é de 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 atribuir padding: 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 exibimos 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:

        #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 especificar a altura da linha em 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 navegador 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:

Voltar   Avançar