O bloco horizontal na parte inferior de um layout de página costuma ser chamado de "rodapé". Nele, como em outros blocos da página, os elementos de design são colocados, mas, ao contrário de outros, muitas vezes surgem problemas específicos com o posicionamento desse bloco específico. Eles estão relacionados ao fato de que navegadores diferentes entendem os padrões da linguagem CSS de maneira diferente e pode ser muito difícil colocar o rodapé na parte inferior da janela do navegador. Abaixo está o código para uma das soluções para este problema.
Necessário
Conhecimento básico de CSS e HTML
Instruções
Passo 1
Na primeira linha do código-fonte da página, coloque uma referência à especificação XHTML 1.0 Transitional:
Passo 2
Coloque os blocos principais da estrutura da página dentro do corpo do documento (entre as tags e). O bloco no qual o conteúdo principal será colocado deve consistir em duas camadas aninhadas. Por exemplo, deixe o externo ter o identificador OuterDiv, e o interno - InnerDiv:
É aqui que estará o conteúdo principal da página.
Atrás deles, coloque um bloco de rodapé com um identificador, por exemplo, FooterDiv:
Rodapé da página.
etapa 3
Coloque na parte do cabeçalho do código HTML (entre as tags e) um link para um arquivo externo com uma descrição dos estilos css:
@import "footerStyle.css";
Passo 4
Salve o código completo da página mestra em um arquivo com a extensão html. Pode ser assim:
Rodapé pressionado
@import "footerStyle.css";
É aqui que estará o conteúdo principal da página.
Rodapé da página.
Etapa 5
Crie um arquivo de folha de estilo - um arquivo de texto simples que deve ser salvo com a extensão css e o nome especificado no código HTML (footerStyle.css). Escreva neste arquivo as seguintes descrições de estilo para os blocos usados na página:
* {margem: 0; preenchimento: 0}
html, corpo {altura: 100%;}
corpo {
posição: relativa;
cor: # 222222;
}
#OuterDiv {
margem: 0;
altura mínima: 100%;
plano de fundo: #aaaaaa;
cor: # 222222;
}
* html #OuterDiv {height: 100%;}
#FooterDiv {
posição: relativa;
limpar ambos;
margin-top: -60px;
altura: 60px;
largura: 100%;
cor de fundo: DarkBlue;
alinhamento de texto: centro;
color: #eeeeff;
}
. InnerDiv {
largura: 100%;
flutuar: esquerda;
}
