Tutorial de CSS > Criando um layout com CSS a partir do zero > Parte 7

7. Estrutura adicional


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 é:

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 primeiro div. 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 os separamos 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 da div #content.

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