Rodapé fixo na base do site

Olá galera do bem!!

Hoje vou passar um truque que é muito útil em sites em que ocupam apenas a tela do monitor, sem que usem a barra de rolagem: "Um rodapé fixo na base do site."


Já vou falar um inconveniente que deve-se presta atenção:

Não crie botões lincando para uma página na internet ou do próprio projeto, pois irá carregar dentro do rodapé. Pode-se criar botões abrindo popup como explicado nesta postagem



Mãos a obra:

O primeiro passo é se criar uma "página" no Webacappella com a mesma largura usada nas outras páginas. Dê um nome para essa página de rodape por exemplo.

Lembre-se a mesma largura das outras páginas do seu projeto. No caso do exemplo 1024px. e a altura desejada de acordo com o tamanho do rodapé. Caso seu rodapé for ter menos de 100px, não se preocupe, configure com 100px pois o WebAcappella não permite que seja menor do que isso. Mas logo em frente vamos contornar esta situação.

Configure também a cor do fundo que você deseja para seu rodapé definindo a cor do plano de fundo da página.

No caso eu configure a cor laranja no exemplo.

Aproveite e pegue o código da cor, pois vai precisar de utilizar mais pra frente.

Dê um nome para sua página no browser. No caso do exemplo será rodape.html, marque para ignorar a página nos mecanismos de busca.

Agora preste atenção, se seu rodapé for ter a altura menor que 100px, Coloque uma marca na altura que você vai utilizar. Neste exemplo o meu rodapé vai ter 50px de altura. Veja na imagem abaixo como fiz a marcação:

Portanto se meu rodapé terá 50px de altura eu só vou trabalhar na parte superior da linha.

Fiz um exemplo de como editei meu rodapé bem simples para terem uma ideia, veja abaixo:

Agora copiem o código abaixo e cole no head das propriedades da página do seu rodapé.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Balance 2004 - SEJA BEM VINDO !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<body style="overflow-y: hidden;overflow-x: hidden;">

Clique em OK

Agora vamos utilizar o seguinte código para configurar nosso rodapé 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
        #rodape /*rodapé do sistema */
        {

            background-color: códigocor;          
            width:100%;
    text-align: center;
            position:fixed;
            bottom:0px;
            left:0px;
        }
    </style>

<form id="form1" runat="server">
    <div id="rodape">
<html>
     <iframe width='largura' height='altura' frameborder='0' src='urlrodape'></iframe>  
</html>
    </div>
</form>


Você vai alterar somente os trechos de vermelho no código da seguinte maneira:

códigocor : Utilize o mesmo código da cor utilizada para o fundo da sua página definida como rodapé. No case deste exemplo foi #f5621d
largura: Utilize o mesmo valor que usou para largura da sua página rodapé. No caso do exemplo foi 1024

altura: Agora você vai usar o valor que você deseja para altura do rodapé, NÃO é o valor configurado para altura da sua página no caso do seu rodapé for menor que 100px. No caso deste exemplo é 50px.

urlrodape: Substitua pela url da página do seu rodapé (Ex: http://www.seudominio.com.br/rodape.html -> se a página se chamar rodape)


O código do exemplo ficou assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
#rodape /*rodapé do sistema */
{

background-color: #f5621d;
width:100%;
text-align: center;
position:fixed;
bottom:0px;
left:0px;
}
</style>

<form id="form1" runat="server">
<div id="rodape">
<html>
<iframe width='1024px' height='50px' frameborder='0' src='http://www.webacappellashow.com.br/templates/tatuador/rodape.html'></iframe>
</html>
</div>

</form>


Para finalizar na página que você deseja que o rodapé apareça use a opção do Webacappella INSERIR>> CÓDIGO HTML e insira seu código já alterado.

Publique seu site.

** Em caso de páginas em que apresentam barra de rolagem o rodapé se mantém fixo e a página rola por baixo dele.



Clique abaixo para ver um exemplo on line: