Blog - Luiz Gustavo Web

Neste espaço me dedico a escrever artigos sobre GNU/Linux e desenvolvimento web.
Sinta-se à vontade.

Site em Tableless - Parte 5

08 de Julho de 2008

De volta ao trabalho pessoal! Enfim consegui continuar esse maravilhoso especial sobre Tableless.

Criação da Lateral

Como já virou hábito, abra a estrutura.css, vamos criar a div lateral:

#lateral {
    float:right; /* definimos que a div lateral vai flutuar para a direita */
    padding:4px; /* espaçamento de 4px para todos os lados */
    border:1px solid #AAA; /* definimos os atributos da borda */
    width:190px; /* Temos 190px + 2px da borda direita e esquerda + 8px do espaçamento = 200px */
    margin:10px 0 0 10px; /* margem no sentido horário(topo,direita,base,esquerda) */
    position:relative; /* definimos que a nossa div tem posição relativa */
    right:5px; /* com isso definimos que ela vai ter margem de 5px da direita */
}

Vimos uma nova tag (float). Ela tem a função de flutuar a div para a esquerda ou direita. Preste atenção também na largura. Declaramos que ela teria 190px, mais temos os atributos da borda e espaçamento, no qual ela fica no resultado final com 200px. É fundamental observar isso na hora da criação do layout.

Também declaramos que nossa div terá posição relativa. Usei isso para evitar bugs no Internet Explorer em relação aos outros navegadores. Você que daqui em diante trabalhará com CSS em seus projetos, terá que conviver com esses problemas de renderização entre os navegadores.

Criação do Conteudo

Diferente das partes anteriores, vamos continuar a criar as divs restantes no arquivo css, só depois vamos inserir no documento html. Então mãos a obra:

#conteudo {
    margin:10px 215px 0 5px; /* margem no sentido horário(topo,direita,base,esquerda) */
    text-indent:20px; /* espaçamento de 20px nos parágrafos */
    text-align:justify; /* texto justificado */
}

#conteudo p {
    margin:0; /* sem margem nos parágrafos na div conteúdo */
}

Simples, declaramos os atributos da margem, depois definimos que em cada parágrafo na div conteúdo teremos um recuo da esquerda de 20px. Depois justificamos o texto.

Agora observe, abri a div conteúdo de novo, mas dessa vez coloquei a tag p (parágrafo) na frente. Quer dizer que editaremos o parágrafo somente na div conteúdo.

Com isso declarei que não teremos margem nos parágrafos dentro da div conteúdo. Simples, né?

Criação do Rodape

Continuando:

#rodape {
    clear:right; /* limpamos a flutuação da div lateral em relação a div rodape */
    margin:0 auto; /* centraliza a div na página */
    width:690px; /* definimos uma largura de 690px */
    border-top:3px solid #F92; /* definimos os atributos da borda superior */
    font-size:11px; /* definimos o tamanho da fonte em nossa div */
    color:#666;	/* definimos a cor da fonte em nossa div */
    text-align:right; /* texto alinhado a direita */
    padding:1px 0 0 0; /* espaçamento no sentido horário(topo,direita,base,esquerda) */
    position:relative; /* definimos que a nossa div tem posição relativa */
    top:10px; /* com isso definimos que ela vai ter margem de 10px do topo */
}

Opa! O que é clear? Ela serve para limpar os espaçamentos da flutuação das divs anteriores.

Declarei o atributo right pois na div lateral declaramos flutuação a direita. Com isso ela fica abaixo da div lateral e conteúdo.

Inserindo as divs na página

Pronto! Agora vamos inserir as divs na index.html, com a seguinte ordem: lateral, conteudo e rodape. Olha como deve ficar o código-fonte da página:

<!doctype html>
<head>
<meta charset="utf-8">
Site em Tableless

</head>
<body>
Barra Lateral
Conteúdo do Site
Padaria do João - Todos os direitos reservados
</body> </html>

Veja o resultado:

Você já pode inserir conteúdo em sua página. Apenas respeite a largura de cada div.

Deus abençoe vocês!

Ir para conclusão

© 2006 - 2017