Deixando o rodapé fixo

ASP.NET

Saturday, January 1, 2011

Olá pessoal gostaria de mostrar neste artigo, independente de tecnologia ou linguagem de programação utilizada em sua aplicação ou sistema que vai funcionar. Mesmo não precisando de linguagem tecnológica para desenvolver o que vou mostrar no decorrer do artigo, isto é; linguagem que falo é C#, Java, ASP, PHP, Objective C, C e C++; utilizarei apenas o style com div dentro da ferramenta Visual Studio.NET 2008.

Referência:

Linguagem de programação: Nenhuma

Ferramenta: Visual Studio.NET 2008

Linguagem Interpretada: Style, Div e HTML

Objetivo do artigo

O objetivo do artigo é mostrar como deixar fixo no rodapé da página, uma informação independente se a página tem barra de rolagem ou não; ou seja; ela fica sempre flutuante na parte debaixo do sistema. Não importa o browser, funciona em qualquer browser utilizado pelo usuário.

Procurei isso por muito tempo e achei algumas referências que me ajudaram a chegar ao ponto final que queria. Dessa forma, gostaria de compartilhar com você leitor.

Na prática

Na prática, estou utilizando a ferramenta chamada Visual Studio.NET 2008, a ferramenta existe uma versão grátis na internet para download para quem não sabe. Basta entrar no link (http://www.microsoft.com/express) e fazer o download.

Criei a aplicação normalmente e não acrescei nenhum arquivo em especial. A minha alteração será apenas na página default.aspx e assim fica mais fácil o entendimento. (Referência 1.1)

Lembro que, pode-se utilizar separadamente como é feito normalmente, a escolha de colocar junto foi para melhor entendimento.

Referência: Image 1.1

Uma observação importante que preciso deixar registrado aqui é, o DTD no topo do site. Sem esse dtd não funciona. (Referência Code 1.1)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Referência: Code 1.1

Dentro da página existe logo depois da referência da classe. (Image 1.2)

Referência: Image 1.2

O próximo passo foi gerar algumas linhas de código referente a style e com o nome chamado Rodapé. (Code 1.2)

#rodape /*rodapé do sistema */

{

background-color: #cecece;

text-align: center;

border: solid 1px Gray;

font-size:8pt;

font-family: Verdana;

font-weight:bold;

width:100%;

color:Black;

position:fixed;

bottom:0px;

left:0px;

}

</style>

Referência: Code 1.2

Coloquei uma cor de fundo, uma borda para indicar certo destaque e a largura de 100%, ou seja, para pegar a página toda. As três últimas propriedades são importantes para o nosso problema, não deixe de colocar elas.

Dentro da tag <form> coloquei dois <div>’s, um com nada e outro indicando o id “rodape”, ou seja, com o mesmo nome o style. Dentro do primeiro div coloquei apenas algumas tags HTML como: <h2> e <br>. (Code 1.3)

<div>

<h2>Teste Qualquer do Rodapé</h2>

<h2>Teste Qualquer 2 do Rodapé</h2>

</div>

<label>Usuário:</label>

Mauricio.Junior    

Mauricio Junior    

10.10.0.1

</div>

</form>

Referência: Code 1.3

Bem simples e fácil, concordam? Pois é, segue o resultado do que foi feito nas referências acima. (Referência Image 1.3)

Referência: Image 1.3

Note no rodapé da página o que ficou escrito. Note também que existe barra de rolagem na página. Ao rolar a barra de rolagem, o rodapé criado se manteve no mesmo local, veja na referência Image 1.4.

Referência: Imagem 1.4

Bom, espero que tenha gostado e tenha chegado ao objetivo proposto. Qualquer dúvida pode entrar em contato pelo site ou blog pessoal referenciado como autor.