[Resolvido] Rodape fixo sobrepõe conteúdo principal

Jarael · Março 21, 2012

Bom dia, gente! Eu já fucei esse fórum, fucei o google, consultei o meu chefe (ele também não sabe) mas não adianta!

Eu preciso de um rodape que fique fixo ao fim da página, porém, que não sobreponha o conteúdo das divs centrais quando eu redimensionar o browser.

Como eu poderia fazer isso?

Marrabel · Março 21, 2012

crie um seletor para limpar os floats (caso tenha)

#clear {
clear:both;
}

Depois você insere ele após o fechamento da div do conteudo todo

Exemplo:

<div id="conteudo">
Seu conteudo
</div>
<div id="clear"></div>
<div id="rodape">

e no seletor rodape inclua essas propriedades:

Exemplo:

#rodape{
bottom:0;
position:relative;
width:100%; /* opcional /*
}

Se não der certo, poste seu codigo HTML e CSS, e se puder um link para seu site tambem.

Espero ter ajudado.

Jarael · Março 21, 2012

Obrigada, Marrabel... Mas não deu certo... o rodapé fica logo abaixo da div do meio, não fica no fim da pagina... Eu quero que o rodapé fique no fim da pagina, porem, quando eu iminuir o tamanho do browser, quero que ele não sobreponha o conteúdo da div do meio... Eu tinha feito isso com position:fixed;... mas aí ele sobrepunha...

PS: Eu sei que as posiçoes de footer e all estao erradas, mas eu já tentei de tudo e nao consigo acerta-las de um modo que o rodapé fixe embaixo e nao sobreponha o conteudo

body {
background-color: #FFF;
margin:0px;
}

#head {
background-image: url(Imagens/img_bg.jpg);
height: 144px;
width: auto;
}

#footer {
background-image: url(Imagens/img_rp.jpg);
height: 108px;
width: 100%;	 
bottom: 0px; 
       position: fixed;
}

#all {
height: 559px;
width: 1024px;
margin-top: -144px;
margin-right: auto;
margin-bottom: 100px;
margin-left: auto;
padding-top: 0;
padding-right: auto;
padding-bottom: 0;
padding-left: auto;
}

#top {
background-image: url(Imagens/img_bg.jpg);
height: 144px;
width: auto;
}

#top-logo {
background-image: url(Imagens/img_02.jpg);
height: 152px;
width: 209px;
}

#top-button {
background-image: url(Imagens/img_03.gif);
height: 34px;
width: 118px;
float:right;
margin-top:-100px;
}

#content-left-img {
background-image: url(Imagens/img_4.jpg);
height: 381px;
width: 340px;

}
#content-right-button {
background-image: url(Imagens/img_05.gif);
height: 52px;
width: 204px;
margin-top: -100px;
margin-left: 750px;
}



#clear {
clear:both;
}



<body>

<div id = "head"> </div>
<div id = "all"> 
 <div id = "top">
   <div id = "top-logo"> </div>
     <div id = "top-button"> </div>
 </div> <!--content-top-->
 <div id = "content-left-img"> </div>
 <div id = "content-right-button"> </div>
             </div> <!-- all -->

 <div id = "clear"> </div>
<div id = "footer"> </div>



</body>

NetBoy16 · Março 21, 2012

footer é o rodape? se sim, pq você colocou uma outra div chamado clear? no rodape deixe assim:

#footer {
       background-image: url(Imagens/img_rp.jpg);
       height: 108px;
       width: 100%;    
       clear:both;
}

JCMais · Março 21, 2012

Faz o rodapé com determinada altura, e na div do teu conteúdo aplica um margin-bottom um pouco maior que essa altura.

Ex:

#conteudo {
   /* ... */
   margin-bottom: 100px;
}
#footer {
   position: fixed;
   height: 90px;
   bottom: 0;
}

NetBoy16 · Março 21, 2012

@JCMais porque deixar position fixed no rodape ?

JCMais · Março 21, 2012

É a forma que uso, eu não entendi direito o que o usuário quer, mas se ele quiser deixar o rodapé sempre no final, tem outras técnicas, como esta: http://ryanfait.com/sticky-footer/

Jarael · Março 21, 2012

footer é o rodape? se sim, pq você colocou uma outra div chamado clear? no rodape deixe assim:
#footer {
       background-image: url(Imagens/img_rp.jpg);
       height: 108px;
       width: 100%;    
       clear:both;
}

Não deu certo, netboy... O rodape (footer) nao fica fixo na parte de baixo da pagina... :/ MAs muito obrigada

Faz o rodapé com determinada altura, e na div do teu conteúdo aplica um margin-bottom um pouco maior que essa altura.

Ex:
#conteudo {
   /* ... */
   margin-bottom: 100px;
}
#footer {
   position: fixed;
   height: 90px;
   bottom: 0;
}

JCMAIS, o conteúdo é sobreposto pelo rodapé quando eu diminuo o browser :/

NetBoy16 · Março 21, 2012

Jarael, tem como passar o link da página pra eu dar uma analisada mais a fundo ?

Jarael · Março 21, 2012

Eu nao tenho a pagina online, netboy

http://ryanfait.com/sticky-footer/

Eu quero o rodapé igual ao desse site, mas eu não to conseguindo fazer dar certo... Eu ja tentei mas não deu... Deve ser algum erro no meu codigo

JCMais · Março 21, 2012

Poste o código HTML e CSS atuais. Edite o post anterior para adicionar os códigos;

Marrabel · Março 21, 2012

Pelo que analisei no site que voce indicou, ele tem a classe wrapper (conteudo) e uma push (vazia)

no css dele, mostra que essa classe wrapper tem o margin-bottom negativo a altura do rodape e da classe "push" que esta vazia

Lá o rodape e a classe push tem a altura de 142px, entao a classe wrapper tem margin-bottom de -142px.

Então antes de finalizar a classe wrapper(conteudo) ele joga o tal push e dpois que fechada a classe wrapper, ele joga o rodape

Creio que seja isso que de o efeito de redimensionar o rodape sem sobrepor o conteudo.

Obs: o rodape tem que estar em position:relative;

Deu pra entender? :upset:

Faz o teste

Alvaro Jr · Março 21, 2012

você pode usar sim um posição absolute ao invez de relative

porque a absolute ela nao sobre ponhe os conteúdo

e dps melhor definir sua camadas z-index:1; e a camada do conteudo pra z-index:3;

e isso pode resolver esse problema

Jarael · Março 21, 2012

Poste o código HTML e CSS atuais. Edite o post anterior para adicionar os códigos;

Pronto

NetBoy16 · Março 21, 2012

Voce tentou inspecionar o elemento do rodape lá e fazer do jeito que está lá no outro site? :mellow:

Thiago Moraes · Março 21, 2012

Ele quer um rodapé igual ao do google...tem q trabalhar com position absolutee min-height.

Alvaro Jr · Março 21, 2012

Cara ou blackgound ou div

posição absolute = pagadding pra outro resoluçao

ai você tira overflow se de barra você sempre contrar as camada

x-index: 1 2 3

se cama 1 tive em baixo da 3 vai sobrepor sim

Jarael · Março 22, 2012

Gente, muito obrigada! Eu consegui agora, segui exatamente como no exemplo do site que o JCMais me passou!

Arquivado

[Resolvido] Rodape fixo sobrepõe conteúdo principal

Recommended Posts

Jarael 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marrabel 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jarael 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

JCMais 75

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

JCMais 75

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jarael 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jarael 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JCMais 75

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marrabel 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alvaro Jr 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jarael 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Moraes 32

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alvaro Jr 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jarael 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

recuperando parametros simplexml_load_file

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

Fóruns

Tempo Real