Footer > no fundo

Riey · December 6, 2009 at 02:14 PM

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

scorch · December 6, 2009 at 03:47 PM

Fazes o include do footer.html só no fim, em último.

Riey · December 6, 2009 at 03:56 PM

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

scorch · December 6, 2009 at 03:59 PM

Ajusta-se como? Em comprimento?

Riey · December 6, 2009 at 04:06 PM

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

scorch · December 6, 2009 at 04:49 PM

Podes mostrar o código do footer? 😉

jarsantos · December 6, 2009 at 04:59 PM

Podes definir um tamanho fixo para cada documento.

Basta meteres:

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

Riey · December 6, 2009 at 05:08 PM

<!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

jarsantos · December 6, 2009 at 05:33 PM

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

ficava qualquer coisa do estilo:

...

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

Riey · December 6, 2009 at 06:16 PM

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

Riey · December 6, 2009 at 09:17 PM

nao resultou jarsantos 😉

yoda · December 6, 2009 at 09:41 PM

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.

Riey · December 6, 2009 at 10:03 PM

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...

jarsantos · December 6, 2009 at 10:15 PM

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>

yoda · December 6, 2009 at 10:22 PM

nao resultou também...

Impossível, deves ter outra coisa mal 😉

Riey · December 6, 2009 at 10:25 PM

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

jarsantos · December 6, 2009 at 11:33 PM

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>

Riey · December 13, 2009 at 10:32 PM

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

jarsantos · December 14, 2009 at 12:57 AM

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.

Riey · December 14, 2009 at 09:01 PM

tirar o header? nao quero tirar o header... lol

Footer > no fundo

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information