Sua primeira vez com XHTML e CSS - Continuação - Inserindo topo e rodapé
Fevereiro 8th, 2007
Esse artigo é a continuação do Sua primeira vez com XHTML e CSS e, por isso, se você não fez a leitura dele, recomendo que faça para poder entender melhor os passos que daremos agora.
No artigo anterior trabalhamos o xhtml e o css para construir um layout com três colunas conforme a idéia abaixo:
O resultado você pode ver nesse endereço e se, ao olhar, você ficar com uma certa preguiça (comigo já aconteceu muito isso) de entender o que foi feito lá então vou resumir as coisas mais uma vez.
O que foi feito no XHTML ?
Foram criadas quatro divs e são elas:
- geral: é a div que vai servir de container (ou envoltório se você preferir) para as outras, ou seja, todas as outras vão ficar dentro dela e, em breve, você vai saber porque.
- menu: é onde, advinhe…, está o menu.
- conteudo: ah! tá ficando fácil demais isso…
- publicidade: sim… aquela área que podemos usar para ganhar um dinheirinho (que é sempre bom…).
Além disso, obviamente todo o conteúdo de texto em seus respectivos parágrafos e um cabeçalho que serviu como tÃtulo principal (de conteúdo) para o site.
E no CSS ?
Foram criadas regras para formatação de elementos especÃficos como:
body {
declarações aqui…
}
Foram criados IDs para a formatação das divs como:
#geral {
declarações aqui….
}
Recordando mais uma vez… no xhtlm eu usei <div id=”geral” > para “chamar” as formatações estabelecidas em #geral lá no css e assim sucessivamente para que cada div recebesse a sua formatação. Acho que isso ficou bem claro.
O que mais vimos lá ?
Propriedades css usadas por todo mundo o tempo enteiro como: width, height, font, display, margin e float.
Ok, foi uma visão geral de como é fazer um layout simples com 3 colunas usando xhtml e css e uma pitadinha de semântica.
Se você está confuso com esses conceitos, eu aconselho que visite a relação de cursos para turbinar os seus conhecimentos.
Inserindo topo e rodapé
Sim, se você pensou que vai precisar de mais duas divs para fazer isso…. acertou ! Mas, um detalhe… numa próxima oportunidade vamos remover a div que foi usada no topo e substituir por uma outra tag para ganhar um pouco em semântica. Mas isso fica para depois. Por hora vamos inserir essas duas divs no arquivo que vai ficar como você pode ver por aqui.
Chamei as divs de TOPO e RODAPÉ (grande coisa…). Ah! outro detalhe. Percebam que o cabeçalho H1 foi movido para dentro da div TOPO.
Se você observou o css vai ver que também foram criadas IDs para para controlar as novas divs.
A única coisa nova que apareceu foi a declaração clear:both. Essa declaração faz com que a div rodapé não seja influenciada pela declaração float:left usada para #menu, #conteudo e #publicidade. Caso não usássemos clear:both, o float:left iria “puxar” a div rodapé que seria jogada para cima da página.
Então lembre-se que clear:both faz com que “o elemento seja renderizado abaixo de qualquer outro elemento que esteja flutuando no mesmo espaço de renderização”.
Por enquanto é isso. Dê uma olhada em como ficou o nosso arquivo agora.
Até a próxima.
Categoria(s): XHTML, CSS, tableless
1 Comentário Insira o seu...
1. FennaLess | Abril 24th, 2008 at 12:22 pm
Parabéns novamente.
Clear>both eu ja tinha visto e até usado, mas não sabia a verdadeira utilidade dela … agora já sei como proceder nos meus trabalhos.
Deixe seu Comentário
XHTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>