Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Kaayá Pezzuti

Rodapé instável

Por , em Desenvolvimento frontend

Recommended Posts

Kaayá Pezzuti    0

Kaayá Pezzuti
Postado

Olá pessoal, estou com um problema com o rodapé

Fiz a cagada de deixar ele por ultimo, e agora ele não fica instável.

 

a pagina para vcs verem o problema e essa http://kaayapezzuti.zz.mu/textes/_pessaude/

 

a principio eu fiz tudo correto para funcionar

body, html{
min-height:100%
}
.content{
position:relative;
}

footer{
position:absolute;
bottom:0;
clear:both;
height:20px;
}

ai ja era pra ficar no rodapé, dessa forma ele funciona se eu não aumentar o tamanho da tela dar aquele zoom, ai ele sobrepoe o conteúdo.. mas se eu tirar o zoom ( diminuir o conteúdo ) ele fica certinho sempre no rodapé.

Agora se eu trocar essa POSITION:ABSOLUTE por RELATIVE, fica certinho no tamanho normal não sobrepor nada. so que quando eu diminuo o conteúdo (dou zoom out) ele sobe junto com o conteúdos fica grudado sempre no bottom do conteúdo.

não sei se deu para entender, para melhor detalhe e só inspecionar o código no site

http://kaayapezzuti.zz.mu/textes/_pessaude/css/style.css esta logo no inicio do css o rodape

 

Como posso contornar esse problema?!

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaayá Pezzuti    0

Kaayá Pezzuti
Postado

não é possível eu testei em todos os navegadores possiveis

Vou postar o print para entender melhor

 

POSITION ABSOLUTE COM - ZOOM

position+absolute+--.png

 

 

POSITION ABSOLUTE COM +ZOOM

Position_absolute++.png

 

POSITION RELATIVE COM + ZOOM

position+relative+com+zoom.png

 

POSITION RELATIVE -ZOOM

position+relative+com+-+zoom.png

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaayá Pezzuti    0

Kaayá Pezzuti
Postado

Olá Kaayá!

 

Tenta mudar a position:relative para position:absolute.

Caso isso não resolva, veja uma solução criada pelo mestre Maujor:

 

http://www.maujor.com/tutorial/rodape-embaixo-da-janela.php

 

Atenciosamente,

Pedro HSB

foi exatamente dessa maneira que eu fiz.. tem os dois modos nas imagens o position absolute e relative..

 

mas se como ja fiz todos os css do site e deixei por ultimo o rodapé.. deve estar dando problema com algum elemento que não consigo saber qual e porque.

 

existe alguma forma de contornar esse problema? ou vou ter que reprogramar tdo?

Compartilhar este post

Link para o post
Compartilhar em outros sites

pedrohsb    6

pedrohsb
Postado

Tenta ver se você consegue criar igual o Maujor, só alterando as divs, que são:

  • Tudo
  • Topo
  • Conteúdo
  • Rodapé

 

Código principal:

<body>
<div id="tudo">
  
  <div id="topo"></div>
  
  <div id="conteudo">
    ...aqui entra(m) a(s) coluna(s) do layout.
  </div>
  
  <div id="rodape"></div>

</div>
</body>
</html>

Tenta fazer assim.

Qualquer coisa, só dá um toque!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaayá Pezzuti    0

Kaayá Pezzuti
Postado

Tenta ver se você consegue criar igual o Maujor, só alterando as divs, que são:

  • Tudo
  • Topo
  • Conteúdo
  • Rodapé

 

Código principal:

<body>
<div id="tudo">
  
  <div id="topo"></div>
  
  <div id="conteudo">
    ...aqui entra(m) a(s) coluna(s) do layout.
  </div>
  
  <div id="rodape"></div>

</div>
</body>
</html>

Tenta fazer assim.

Qualquer coisa, só dá um toque!

 

eu fiz e até funciona... mas quando eu dou zoom na pagina, o rodapé sobrepoe o conteúdo igual na 2 foto que postei

ja quando eu dou zoom out, ele funciona certinho.

 

mas caso navegador do cliente estere com zoom, ou um cliente não enxerga direito e der zoom do navegador, o rodapé vai sobrepor o conteúdo

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaayá Pezzuti    0

Kaayá Pezzuti
Postado

Resolvi, Estava tendo problema nas minhas <article> eu tinha 2 e estava dividindo com float:left e float:right; e isso estava cortando <div id="home"> foi só eu ir no css e dar um display:table; na div home que o problema foi resolvido! !!!

o rodapé não sobrepois mais nada e esta perfeito!

 

para quem quiser saber

quem salvou a minha vida foi esse exemplo http://www.richardbarros.com.br/blog/css/css-truques-para-dominar-a-propriedade-float

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito