Deixando o rodapé fixo
Veremos como deixar uma informação fixa no rodapé da página, independente se ela tem barra de rolagem ou não, utilizando apenas o style com div dentro da ferramenta Visual Studio.Net 2008. Para este trabalho não importa a tecnologia ou linguagem de programação utilizada em sua aplicação ou sistema que vai funcionar.
Referência:
- Linguagem de programação: Nenhuma
- Ferramenta: Visual Studio.NET 2008
- Linguagem Interpretada: Style, Div e HTML
Objetivo
Como disse, vou mostrar como deixar uma informação fixa no rodapé da página, mesmo se a página tiver barra de rolagem. Ou seja, a informação fica sempre flutuante na parte debaixo do sistema. Não importa o browser, funciona em qualquer navegador 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 Visual Studio.NET 2008. Há uma versão gratuita dessa ferramenta para download aqui.
Criei a aplicação normalmente e não acrescentei 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 registrada 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" <br /><br />"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)
<style type="text/css"><br /> #rodape /*rodapé do sistema */<br /> {<br /> background-color: #cecece;<br /> text-align: center;<br /> border: solid 1px Gray;<br /> font-size:8pt;<br /> font-family: Verdana;<br /> font-weight:bold;<br /> width:100%;<br /> color:Black;<br /> position:fixed; <br /> bottom:0px;<br /> left:0px;<br /> }<br /> </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 colocá-las.
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)
<form id="form1" runat="server"><br /> <div><br /> <h2>Teste Qualquer do Rodapé</h2><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <h2>Teste Qualquer 2 do Rodapé</h2><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div><br /> <br /> <div id="rodape"><br /> <label>Usuário:</label><br /> Mauricio.Junior <br /> <label>Nome:</label> <br /> Mauricio Junior <br /> <label>IP:</label> <br /> 10.10.0.1<br /> </div><br /> <br /></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 que tenha chegado ao objetivo proposto. Qualquer dúvida pode entrar em contato pelo site ou blog pessoal referenciado como autor.
Com mais de 20 anos trabalhando no mercado de tecnologia. Mestre em Engenharia Elétrica voltada para o mundo mobile, com mais de 20 livros publicados e cerca de 700 artigos publicados com intuito de ajudar àqueles que querem aprender a programar (site, software, desktop, serviços, api e mobile). Site pessoal: https://www.mauriciojunior.net - MVP, MCAD, MCP Microsoft
