• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

Riey

Footer > no fundo

20 mensagens neste tópico

Boas...

tenho um pequeno site feito da seguinte estrutura.

(tudo com divs)

topo.html

conteudo.html

footer.html

e depois tenho um index.php onde estão em include todos os ficheiros...

mas o que eu queria era colocar o footer sempre no fundo da página qualquer que seja a resolução, não estou a ver é como fazer, ou estou a fazer confusoes na cabeça para uma coisa tão simples...

cumprimentos, agradeço ajuda

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

basicamente é como tenho

<div>
  <div><? include ('topo.html'); ?></div>
  <div><? include ('conteudo.html'); ?></div>
  <div><? include ('rodape.html'); ?></div>
</div>

mas ele ajusta-se sempre de acordo com o tamanho do ficheiro de conteudo

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

se o ficheiro conteudo tiver 100px de altura, o rodape fica para ai a meio da pagina, ves o rodape no meio do browser... se tiver 1000px de altura ele fica no fundo da pagina depois de andares com o scrool, o que eu quero, é que ele esteja sempre no fundo da pagina, seja qual for a altura do conteudo, pois tenho pagina com pouco conteudo, e outras com muito

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Podes definir um tamanho fixo para cada documento.

Basta meteres:

<html style="min-height:xxx; max-height:xxx; overflow:scroll">

xxx pode ser um tamanho em pixeis, ou uma percentagem.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<link rel="stylesheet" href="css/style.css" type="text/css">                 

<div id="footer">
  <div class="direitos">&#169; site.com 2010 - Todos os Direitos Reservados</div>
  <div class="paginas">
    <a href="#" title="Home">link</a>
  </div>
</div>

jarsantos, tás a dizer para por isso em cada ficheiro html?

ou seja, o conteúdos ficaria com percentagem 100% e resolveria o assunto? tou a questionar porque nao posso testar agora

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

O melhor é fazeres aquilo que eu disse em cima, mas nas div's do index.html.

ficava qualquer coisa do estilo:

<html style="height=100%">

...

<div id="header" style="min-height=10%; max-height=10%; overflow=scroll">

<div id="body" style="min-height=80%; max-height=80%; overflow=scroll">

<div id="footer" style="min-height=10%; max-height=10%; overflow=scroll">

Se tiveres margens ou paddings tens que ter em atenção esse facto.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

O melhor é fazeres aquilo que eu disse em cima, mas nas div's do index.html.

ficava qualquer coisa do estilo:

<html style="height=100%">

...

<div id="header" style="min-height=10%; max-height=10%; overflow=scroll">

<div id="body" style="min-height=80%; max-height=80%; overflow=scroll">

<div id="footer" style="min-height=10%; max-height=10%; overflow=scroll">

Se tiveres margens ou paddings tens que ter em atenção esse facto.

obrigado, vou testar e depois digo algo

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Se queres o footer sempre ao fundo da página, define a margem inferior do footer como negativa, com um valor igual à sua altura.

Ou seja, se o footer tem 50px de altura, define margin-bottom: -50px;

Assim garantes que está sempre lá em baixo.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Se queres o footer sempre ao fundo da página, define a margem inferior do footer como negativa, com um valor igual à sua altura.

Ou seja, se o footer tem 50px de altura, define margin-bottom: -50px;

Assim garantes que está sempre lá em baixo.

nao resultou também...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Isto funciona porque eu testei:

<!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" style="width:100%; height:100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body style="width:100%; height:100%; margin:0">
<div style="width:100%; height:10%; background-color:#0F0"></div>
<div style="width:100%; height:80%; background-color:#FF0"></div>
<div style="width:100%; height:10%; background-color:#F00"></div>
</body>
</html>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

eu devo ter qualquer conflito nos ficheiros html ou que, pois noutro forum tambem testaram isto (http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page) e so comigo é que nao funcionou...

amanha vou para o desktop e dou a volta ao código, que isto num netbook de 10" e a programar no bloco de notas não dá jeitinho nenhum  ;)

obrigado pela ajuda, vou ver se amanha passo aqui e digo mais qualquer coisa, porque se com voces funciona, comigo tambem tem de funcionar.

cumprimentos, obrigado

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Com este código a div id="conteudo" ajusta a altura sempre que o tamanho do browser é alterado.

Defini implicitamente que o header e o footer tem 100px, mas podes facilmente alterar o tamanho deles e ajustar ás tuas necessidade.

PS: Queria ter feito isto aqui à uns meses quando fiz o site da minha namorada, sou mesmo noob, era tão fácil.

<!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" style="width:100%; height:100%; margin:0; padding:0">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
function setHeights()
{
var height = window.innerHeight-200;
var conteudo = document.getElementById('conteudo');
conteudo.innerHTML=height-200;
conteudo.innerHTML = conteudo.innerHTML+'<br />';
var i=0;
while(i<40)
{
	i=i+1;
	conteudo.innerHTML = conteudo.innerHTML+'teste<br />';
}
document.getElementById('conteudo').style.minHeight=height+'px';
document.getElementById('conteudo').style.maxHeight=height+'px';

}
</script>


</script>

</head>

<body style="width:100%; height:100%; margin:0; padding:0" onload="javascript:setHeights()" onresize="javascript:setHeights()">

<div style="width:100%; min-height:100px; max-height:100px; background-color:#0F0">header</div>
<div id="conteudo" style="width:100%; background-color:#FF0; overflow-y:scroll; overflow-x:hidden">
teste<br />
teste<br />
</div>
<div style="width:100%; min-height:100px; max-height:100px; background-color:#F00">footer</div>
</body>
</html>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

jarsantos, o mal é que isso fixa o topo no topo, e o footer sempre no footer, sendo que o conteudo do meio fica com scroll se for longo, e eu não queria isso, queria com scroll na pagina toda se o conteudo fosse longo...

estou a rever os ficheiros para ver porque é que os outros metodos nao funcionaram

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

jarsantos, o mal é que isso fixa o topo no topo, e o footer sempre no footer, sendo que o conteudo do meio fica com scroll se for longo, e eu não queria isso, queria com scroll na pagina toda se o conteudo fosse longo...

estou a rever os ficheiros para ver porque é que os outros metodos nao funcionaram

Tirar o header é fácil, se compreenderes o código consegues fazer isso. Quanto ao scroll não te sei ajudar.
0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora