Manter Uma Imagem Sempre Alinhada Com O Rodapé

Rubiz Gardini · Novembro 4, 2007

Olá pessoal, tudo bem?

Eu to com um problema aqui que é o seguinte: a página redimensiona conforme o conteúdo; então tenho o frame principal, e uma coluna na direita aonde vai o menu.

O menu fica alinhado direitinho, a coluna tb, mas ela tem um detalhe de layout que precisa sempre ficar alinhado com o rodapé, independente do tamanho da página.

É um acabamento que deixa o layout bem mais sutil, não dá pra retirá-lo, e não tem jeito de deixar as páginas com tamanho fixo, pois realmente o conteúdo é administrável e pode variar muito.

Alguém tem idéia de como posso fazer pra manter sempre esse detalhe de layout alinhado com o rodapé do div no qual ele está?

KaKarotto · Novembro 4, 2007

Oi Rúbia, tem como postar o código ?

Pra mim não está claro a forma com que montou o layout da página, principalmente por estar usando frames, não ficou muito claro pra mim.

Outra coisa, o menu fica na direita ou na esquerda?

Posta o código ae beleza?

Kelabrassss

Rubiz Gardini · Novembro 5, 2007

Ok, vejo que não ficou nada claro hehehehe.

Não usei frames, e sim DIVs.

Veja, essa página por exemplo está errada, pois está com tamanho fixo fora dos meus propósitos, mas para o user está perfeita.

Já essa, está perfeita pois está com tamanho auto-ajustável, mas o lado direito deveria estar igualzinho à página anterior. Isso não está acontecendo porque a imagem que dá fechamento ao box não está no rodapé..

Entendeu?

babaloricha · Novembro 5, 2007

Nãopercibi o problema pra min ta certinho! no ff pelomenos,mas geralmete pra resolver esses problemas eu costumo prencher o espaco que falta da div com uma outra divi vazia tipo assim

se a div tem 200 pixels de altura mas so vai usar 150 pixels coloque uma divi de 50px de altura pra completar ai ela não se move

Rubiz Gardini · Novembro 5, 2007

Então, essa é a origem do meu problema: eu não sei quanto a div vai ter de tamanho.

E se você notar no primeiro, o desenho com a sombinha do menu vai atéééé o rodapé; no segundo, vai só até onde termina o menu.

babaloricha · Novembro 5, 2007

Bom ve se isso te resolve

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
&lt;script language="javascript">
function testa(){
var pai = document.getElementById("pai");
alert(pai.clientHeight);
}
</script>
<div id="pai" style="background-color:#0066FF">
    <div id="filhoG" style="height:200px">
    </div>
    <div id="filhoP" style="height:100px">
    </div>
</div>
<input type="button" value="teste" onclick="testa();" />
</body>
</html>

tipo assim a divi pai e seu menu ai você tem que descobrir quantos botoes você vai ter e quale o tamanho do botao sabendo disso você vai fazer uma funcao que cria uma div ou atribui um valor a ela que pega o tamanho do menu subtrai o tamanho dos botoes o valor que der atribui a div vazia.

acho isso resolve.

da uma pesqusada sobre o clienteHeight !

Editado Novembro 5, 2007 por babaloricha

KaKarotto · Novembro 6, 2007

Então Rúbia, é uma questão chatinha de liquid layout.

Eu resolvo esse problema de uma forma não muito boa. Colocando o height como porcentagem. Eu colocaria no height da sua coluna da direita com um valor de 100%, pra sempre ir até o final da página.

Mas tem um baita de um problema. Não da pra usar o height em porcentagem se usar a descrição no html (<!DOCTYPE....)

Não sei até hj porque os browsers não funcionam com o height em porcentagem quando usada a declaração no início do html.

Em alguns sites, eu não preciso usar essa declaração no início, só preciso que o site funcione nos principais navegadores, que é a intenção do cliente, então eu simplesmente deixo o doctype no começo como comentário, para qualquer dia que eu queira acionar, eu tiro as tags de comentário.

Aliás, se alguém souber como usar um height em porcentagem usando as declarações e puder me dizer eu agradeceria.

Rubiz Gardini · Novembro 7, 2007

Dessa do Doctype eu não sabia!! por isso que meus 100% nunca funcionaram então? hmmm..

E sobre esse clientHeight, tb vou dar uma pesquisada!

Mas de qualquer forma, nesse caso de height, acho q nem o abençoado flash resolveria o meu problema...

Valeu pessoal!

Rubiz Gardini · Novembro 8, 2007

Agora fiquei com a pulga atrás da orelha, o browser realmente precisa dessa tag doctype ?

A página deixa de ser interpretada por alguma coisa caso não tenha isso?

KaKarotto · Novembro 9, 2007

hahuahauah

Tava demoraaaaando pra você perguntar isso rsrsrs..

Eu já tive as mesmas dúvidas, ó:

Sobre o DocType

http://www.tableless.com.br/doctype

Sobre o Quirksmode

http://revolucao.etc.br/archives/o-que-e-quirks-mode/

edit:

Existe outra forma de fazer o que você quer sem usar porcentagem no seu div da direita. Uma delas é aproximar ao maximo a borda direita do div do conteúdo com a borda esquerda da div da direita.

Então você usa o css para mostrar apenas a borda da direita do conteúdo. Para quem vê, a impressão que dá é que a borda na direita do site pertence ao div da direita, mas não, é a borda direita do conteúdo.

Dessa forma você poderia deixar o tamanho do height do div da direita com o valor AUTO. Então é interessante que o div central tenha conteúdo suficiente para não deixar a página com o rodapé no alto da tela, já que o rodapé estará logo abaixo do div do conteúdo central, e o div central também deve ter o height setado como auto.

Essa é uma forma de fazer que em muitos casos funciona.

Kelabraaaaaaasssssss

Editado Novembro 9, 2007 por KaKarotto

Entrar

Manter Uma Imagem Sempre Alinhada Com O Rodapé

Pergunta

Rubiz Gardini

Link para o comentário

Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

KaKarotto

Link para o comentário

Compartilhar em outros sites

Rubiz Gardini

Link para o comentário

Compartilhar em outros sites

babaloricha

Link para o comentário

Compartilhar em outros sites

Rubiz Gardini

Link para o comentário

Compartilhar em outros sites

babaloricha

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

Rubiz Gardini

Link para o comentário

Compartilhar em outros sites

Rubiz Gardini

Link para o comentário

Compartilhar em outros sites

KaKarotto

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades