Div no rodapé da página com CSS

Olá. por muitas vezes queremos colocar algo que achamos legal em nosso site ou blog. Eu gosto da colocar em alguns uma div no rodapé, acho legal, Bem, para fazer isso é muito simples. utilizaremos nosso querido amigo CSS.

Primeiro, sendo no Blogger, vá no Painel, na opção Editar HTML e troque a linha:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
por esta:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Esta é nossa primeira alteração, sem ela, nossa div fixa não funcionará. Agora, vamos ao estilo css. Só esclarecendo, teremos duas divs. uma responsável para dar a transparencia e outra para exibir nossos textos.

O porque? Simples. Quando colocamos uma div no modo Alpha Opacity com CSS, todo o conteúdo que for colocado dentro da div também ficará Opacity, ou seja, transparente, então para que isso não aconteça, trabalharemos com duas divs, ficanos assim nosso CSS (coloque isso dentro das tags do seu HTML):
#rodape /*div 1 : responsavel pela transparecia*/
{
background-color:#f9f9f9;
width:100%;
position:fixed;
bottom:0px;
left:0px;
height:30px;
filter:Alpha(opacity=35);
opacity:0.4; /*correção para Mozilla, Opera, etc...*/
}
#rodape2 /*div 2 : responsável pelos textos e/ou conteudo*/
{
border-top: solid 1px #f1f1f1;
text-align:left;
width:100%;
position:fixed;
bottom:0px;
left:0px;
}
Após isso, basta colocarmos nossas div's no lugar certo. No final do HTML, antes das tags </body> e </html>, coloque assim :
<div id='rodape'/>
<div id='rodape2'> seus textos/conteudo aqui </div>
OBS: Coloque essas duas divs abaixo de todas, deixando o final do seu HTML assim:

<div id='rodape'/>
<div id='rodape2'> seus textos/conteudo aqui </div>
</body>
</html>
Pronto. Basta salvar e conferir como ficou. Lembrando que se ela não aparecer na página, cooque algum texto qualquer dentro dela.

0 comentários:

Postar um comentário

Leia as regras:
Todos comentários são lidos e moderados previamente.
são publicados aqueles que respeitam as regras abaixo:

-Seu comentário precisa ter relação com o assunto do post;
-Não inclua links desnecessários no conteúdo do seu comentário
-Se quiser deixar sua URL, comente usando a opção Comentar como:OpenID

OBS: comentários dos leitores não refletem as opniões do blog.