Bem vindo ao SOS Designers

Faça o seu cadastro gratuito no Portal SOS Designers e tenha um acesso personalizado.

Empresas

Cadastre gratuitamente suas vagas, crie sua propria Lista de Curriculos Favoritos, e tenha um acesso personalizado.

Usuarios

Cadastre gratuitamente seu curriculo, crie sua propria Lista de Noticias Favoritas e tenha um acesso personalizado.

Área de Empresas | Vagas

Área de acesso a empresas cadastradas que desejam postar vagas de empregos no Portal e pesquisar curriculos.

Cadastre-se gratuitamente
Esqueceu a sua senha?

Área de Usuarios | Curriculos

Área do Usuario que deseja cadastrar seu curriculo e pesquisar vagas.



Cadastre-se gratuitamente
Esqueceu a sua senha?


Redes Sociais
Siga o Portal SOS Designers no Twitter Siga o Portal SOS Designers no Facebook

CSS


Você está aqui: Home » CSS » Rodapé fixo com CSS

Rodapé fixo com CSS


Pesquisar no Portal SOS Designers





Tempo Real



Siga o SOS Designers








pub_flash( 'http://www.sosdesigners.com/banners/mktdigital_flash_468x60.swf', 468, 60 ); " alt="Tecnoponta - 468 x 60 - webdesign" />

Muitas vezes, ao construir um rodapé em páginas web usando DIVs e CSS, ele não fica extamente na parte inferior da página, especialmente se o conteúdo acima dele não chega a preencher toda a tela. Sendo assim, como posicionar o rodapé como rodapé mesmo? Algumas pessoas o fazem com Javascript, mas, particularmente, prefiro este modo em CSS mesmo.

Em sua DIV do rodapé, insira as seguintes propriedades:


#rodape{ position: relative; left: 0; bottom: 0; }


Aqui, eu posicionei o rodapé como relativo, sendo que, à esquerda e abaixo dele, tenho 0 pixels. Isto faz com que a DIV do rodapé “grude” na parte inferior da tela. Note que, se você substituir relative por absolute, seu rodapé ficará fixo no ponto 0,0 da tela, mas quando você rolar a página (se seu conteúdo for extenso verticalmente), perceberá que o rodapé permanece no mesmo lugar e sobrepõe seus demais conteúdos.


Isso acontece devido à diferença entre posicionamento absoluto e relativo:


No posicionamento absoluto, o elemento é “desgrudado” da tela, ou seja, o posicionamento absoluto cria um elemento independente – um agente livre – separado do restante do documento. Por isso, se seu rodapé for configurado com esta propriedade, ele irá sobrepor qualquer conteúdo que ultrapasse as coordenadas 0,0 em que ele está posicionado, pois ele ficará “congelado” nesta posição.


No posicionamento relativo, o elemento aparecerá após tudo que estiver antes dele na HTML e antes de tudo que está após ele na HTML, isto é, ele vai obedecer a ordem normal de elementos definidos no código HTML, por isso, seu rodapé configurado com esta propriedade, aparece depois de todo o seu conteúdo e não o sobrepõe.


Até a próxima dica!

Sobre o Colunista:

Juliana Padron


Descrição: Juliana Padron é designer e sócia-diretora da W3P Projetos Web. Especialista em email marketing, é uma das responsáveis pela criação do projeto Templateria, um e-commerce dedicado a templates de email marketing.

Site: http://www.w3p.com.br

Deixe seu comentário:





© Copyright 2002-2018
Portal SOS Designers
Webmaster: Luiz Antonio Bovi