[Resolvido] Problema com rodapé fixo

[Martin Carvalho 0]

Olá galera!

 

Estou desenvolvendo um site e estava tudo lindo, até as últimas 3 ou 4 horas...

 

Ao tentar finalizar a home, fui criar um rodapé fixo embaixo, com altura 100px e largura 100%.

Coloquei o HTML e BODY com height:100% e a #geral com min-height:100% + height:auto mas ao fazer alguns testes vi que a #geral simplesmente não chegava ao fim da página...

Já li mil matérias e tentei mil formas diferentes para tentar consertar isso, mas simplesmente não sei mais o que fazer!

 

Por favor me ajudem!!

 

Link:

www.cafecomletras.net/augusto

[Eliseu M. 2]

O corretor é usar position:fixed com bottom:0 e left:0. Acho que já ficou claro :D

 

Até mais!

[Henrique Barcelos 290]

O mestre maujor ensina... http://maujor.com/tutorial/rodape-embaixo-da-janela.php

No caso, se é pra ficar fixo, independentemente da rolagem, troque position:absolute por position:fixed

[Martin Carvalho 0]

Galera, valeu pela ajuda mas ainda não é isso.

 

Desculpa se eu não fui claro mas o que eu to tentando fazer é criar uma div com fundo azul (#436994) com width:100% e height:100px que fique por trás do rodapé que já está lá mas que tive que colocar uma largura fixa nele...

 

O que eu preciso é um rodapé com position absolute e bottom:0 e left:0, cobrindo com um azul a largura da tela toda, mas só no fim do site.

 

Deve ter algum problema no meu código porque eu já tentei de mil formas diferente mas não estou conseguindo de jeito nenhum...

 

Já tentei também utilizando as técnicas do maujor mas não consegui

 

É até meio difícil de explicar mas se não for pedir muito, alguém poderia dar uma olhada no meu código fonte e testar?

 

www.cafecomletras.net/augusto2

 

Obrigado!

[angelorubin 142]

Boa tarde,

 

Tenta assim:

 

CSS

 

.faixaRodape {
   background: url("../images/faixaFundo.jpg") repeat-y scroll center bottom transparent;
   height: 100px;
   left: 50%;
   margin: 2px 0 -50px -640px;
   position: absolute;
   width: 1280px;
   z-index: 2;
}

 

Espero que ajude.

[Martin Carvalho 0]

Boa tarde,

 

Tenta assim:

 

CSS

 

.faixaRodape {
   background: url("../images/faixaFundo.jpg") repeat-y scroll center bottom transparent;
   height: 100px;
   left: 50%;
   margin: 2px 0 -50px -640px;
   position: absolute;
   width: 1280px;
   z-index: 2;
}

 

Espero que ajude.

 

Também não deu...

Aquele rodapé tá certo do jeito que tá, o que eu to precisando fazer é uma outra div que vá por trás dele e continue o azul com uma width:100% mas não consigo colocar ele no final da página por nada!

 

Quando eu coloco essa div no final do código e aplico o position absolute e bottom 0, ela não vai pro final absoluto da página, ela fica meio que flutuando no meio da página... Não faço idéia do que seja, nunca aconteceu antes!

[angelorubin 142]

Boa tarde,

 

Olha eu faria algo nesse sentido: Clique aqui

 

Segue o código:

 

CSS

 

<style type="text/css">
* {
margin:0;
padding:0;
}
#geral {
border:1px solid #CCC;
width:99%;
height:auto;
min-height:200px;
overflow:hidden;
margin:3px;
z-index:1;
position:relative;
}
#topo {
border:1px solid #CCC;
width:80%;
height:180px;
margin: 3px auto;
z-index:2;
position:relative;
}

#conteudo {
border:1px solid #CCC;
width:80%;
height:auto;
min-height:300px;
margin:3px auto;
overflow:hidden;
z-index:3;
position:relative;
}

#rodape {
border:2px solid #000;
width:80%;
height:30px;
margin:3px auto;
background-color:#FF0;
z-index:4;
position:relative;
}

#faixa {
width:100%;
height:100px;
margin:-5px 0 0 0;
background-color:#06F;
z-index:5;
position:relative;
bottom:0;
}

p {
margin:5px 0 5px 0;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
text-align:justify;
padding:3px;
}
</style>

 

HTML

<div id="geral">

<div id="topo">Topo</div>

<div id="conteudo">
   <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
   <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
   <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
   <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
   <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
   <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
   <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
   <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</div>

<div id="rodape">Rodapé</div>

<div id="faixa">Faixa</div>  

</div>

 

Espero que ajude.

[Martin Carvalho 0]

Caramba, nada funciona!! =/

 

Dando um alert na altura da div#geral ele retorna 775px como se a altura fosse só o que vejo no monitor e não a altura total do site!

O que poderia ser?!

[angelorubin 142]

Bom dia,

 

Olha, eu aconselho a você ir corrigindo por partes, senão fica complexo demais.

 

Por exemplo, o conteudo esta estourando a div #geral.

 

CSS

#geral {
   height: auto;
   min-height: 2000px;
   overflow: hidden;
   position: relative;
}

 

Essa regra acima já corrigi este problema e partindo disso siga adiante que vamos lhe auxiliando.

[Martin Carvalho 0]

Pois é, assim realmente daria pra fazer com que a faixa fique sempre em baixo porém cria um outro problema porque cria um espação entre o conteúdo e o rodapé... Teria que ser o rodapé colado no final do site junto com a faixa azul...

 

Pois é, assim realmente daria pra fazer com que a faixa fique sempre em baixo porém cria um outro problema porque cria um espação entre o conteúdo e o rodapé... Teria que ser o rodapé colado no final do site junto com a faixa azul...

[Martin Carvalho 0]

Depois de muitas horas quebrando a cabeça e ralando muito eu finalmente consegui o que queria!

 

Realmente tinha muita coisa pra arrumar no código...

Agora estou só com um pequeno problema mas creio que seja fácil arrumar...

 

Preciso que o box da direita que contém a Newsletter, o Twitter e o "filie-se" se estenda até o fim da página com esse bg meio azul claro mas ele simplesmente não obedece o height:100% e termina aonde foi o último elemento... O que devo fazer???

 

#boxDireita{
margin:30px 10px 0 0;
background:#efeff1;	
text-align:left;
padding-top:20px;
height:100%;
}

[angelorubin 142]

Bom dia,

 

Nesse caso creio que será necessário utilizar a técnica faux colunm (colunas falsas).

 

Da uma olhada nesse (Clique aqui) que montei e tenta analisar o que foi feito.

 

FONTE:Técnica Faux Colunm

 

Qualquer dúvida poste novamente.

[Martin Carvalho 0]

Na verdade isso não vai solucionar o problema...

Eu não quero definir a cor cinza para todo o lado direito, apenas de onde começa o box de newsletter até o rodapé...

 

Alguma outra solução?

[Evandro Oliveira 331]

Posicione o box de newsletter no rodapé, de forma absoluta, iniciando debaixo.

[Martin Carvalho 0]

É... Com o position também não consegui... Arrumei uma solução em jscript, não é perfeita mas quebra o galho por enquanto!

 

Mesmo assim, valeu galera ;)

[Eliseu M. 2]

Eita, nada funciona? Essa DIV que você quer deixar fixa provavelmente está dentro de uma outra com position absolute ou relative, daí ela ficará fixa em relação à DIV pai e não ao corpo da página (BODY), tenho quase certeza que foi isso.