Antes de tudo, 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 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é.

Voltar   Avançar