Jump to content
Sign in to follow this  
Riey

Footer > no fundo

Recommended Posts

Riey

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

Share this post


Link to post
Share on other sites
scorch

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


scorch_pp.png

PS: Não respondo a perguntas por mensagem que podem ser respondidas no fórum.

Share this post


Link to post
Share on other sites
Riey

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

Share this post


Link to post
Share on other sites
scorch

Ajusta-se como? Em comprimento?


scorch_pp.png

PS: Não respondo a perguntas por mensagem que podem ser respondidas no fórum.

Share this post


Link to post
Share on other sites
Riey

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

Share this post


Link to post
Share on other sites
scorch

Podes mostrar o código do footer? ;)


scorch_pp.png

PS: Não respondo a perguntas por mensagem que podem ser respondidas no fórum.

Share this post


Link to post
Share on other sites
jarsantos

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.

Share this post


Link to post
Share on other sites
Riey

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

Share this post


Link to post
Share on other sites
jarsantos

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.

Share this post


Link to post
Share on other sites
Riey

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

Share this post


Link to post
Share on other sites
Riey

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

Share this post


Link to post
Share on other sites
jarsantos

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>

Share this post


Link to post
Share on other sites
Riey

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

Share this post


Link to post
Share on other sites
jarsantos

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>

Share this post


Link to post
Share on other sites
Riey

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

Share this post


Link to post
Share on other sites
jarsantos

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.