Jump to content


Photo

Footer Fixo Na Página?


  • Faça o login para participar
20 replies to this topic

#1 Inu

Inu

    Veterano

  • Usuários
  • 1138 posts
  • Sexo:Masculino
  • Localidade:Canela, Rio Grande do Sul, Brasil

Posted 03/01/2009, 20:44

Olá,
Meu objetivo é manter o footer fixo no final da página; na minha resolução (1024x768), o footer fica como deveria. Mas, na resolução de um amigo (1680x1050), ele fica logo abaixo do texto, e não no final da página propriamente dito. Ou seja, eu queria que o footer ficasse "colado" com a barra de status do navegador. O meu código do footer é este:
#footer {
width: 100%;
background-image: url('images/footer.jpg');
margin: 0px auto;
height: 25px;
clear: both;
}
Como posso corrigir isto?
E ah, se eu quiser um site ajustável à qualquer resolução, é só definir a propriedade css width como 100%? Ou isto é incorreto? Se for, qual o método mais aceitável? Estou utilizando desta maneira e por enquanto está tudo OK.
Obrigado!

#2 Édipo Costa Rebouças

Édipo Costa Rebouças

    Rock Lee

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 04/01/2009, 07:26

boa tarde Inu, esse problema do footer normalmente resolvo usando javascript, com css ainda não achei uma solução que funcione bem para o ie6.

no esquema com javascript, você teria que pegar a altura total da area visivel do browser e de uma coluna que esta acima do footer, e fazer alguns calculos para ver se esta estar, caso sim vc não faz nada, caso não vc aumenta ela para uma altura que empurre o footer até onde vc deseja.
Desenvolvedor WEB Citrus7 - Uma agência web diferente - Édipo Costa Rebouças
Portfolio http://www.edipo.com.br
Último trabalho : http://www.didierlevy.com.br [XHTML + CSS + JS + PHP ]

Posted Image Meu post lhe ajudou? me da pontinho!

#3 Inu

Inu

    Veterano

  • Usuários
  • 1138 posts
  • Sexo:Masculino
  • Localidade:Canela, Rio Grande do Sul, Brasil

Posted 04/01/2009, 13:29

Olá,
Obrigado pela ajuda, mas a pessoa que me reportou o problema está utilizando o navegador Firefox. Existe solução para este?
Grato,

#4 Alex Hiroshi

Alex Hiroshi

    Super Veterano

  • Ex-Admins
  • 4923 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 04/01/2009, 13:54

position: fixed?
Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#5 Inu

Inu

    Veterano

  • Usuários
  • 1138 posts
  • Sexo:Masculino
  • Localidade:Canela, Rio Grande do Sul, Brasil

Posted 04/01/2009, 14:25

Olá!
Com essa declaração, o footer sumiu na minha resolução. Coloquei na máxima que tem aqui (1280x1024) e ele continua fora do lugar. Segue o código:
#footer {
width: 100%;
background-image: url('images/footer.jpg');
margin: 0px auto;
height: 25px;
clear: both;
position: fixed;
}
Obrigado,

#6 Alex Hiroshi

Alex Hiroshi

    Super Veterano

  • Ex-Admins
  • 4923 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 04/01/2009, 14:29

Acho que não precisa mais do clear both. Agora tem que declarar a posição que você quer, no caso bottom:0.
Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#7 Inu

Inu

    Veterano

  • Usuários
  • 1138 posts
  • Sexo:Masculino
  • Localidade:Canela, Rio Grande do Sul, Brasil

Posted 04/01/2009, 14:38

Bom...
Na minha resolução está tudo OK. Porém, na 1280x1024 ele ainda não fica fixo no canto.
O código:
#footer {
width: 100%;
background-image: url('images/footer.jpg');
margin: 0px auto;
height: 25px;
position-bottom: 0px fixed;
}
Grato,

Edição feita por: Inu, 04/01/2009, 14:45.


#8 Alex Hiroshi

Alex Hiroshi

    Super Veterano

  • Ex-Admins
  • 4923 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 04/01/2009, 14:49

Não é position-bottom. Procure isso para ver se existe.

É position:fixed, para deixar em uma posição fixa e bottom:0, para declarar a posição.
position:fixed; bottom:0

Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#9 Inu

Inu

    Veterano

  • Usuários
  • 1138 posts
  • Sexo:Masculino
  • Localidade:Canela, Rio Grande do Sul, Brasil

Posted 04/01/2009, 15:14

Olá!
É mais ou menos isso :B Mas, do jeito que me explicaste, ele fica fixo "em cima" da div content. Queria que ele ficasse fixo após a div content acabar. No código, eu abro a div content, fecho ela, aí abro a div footer e fecho. O CSS:
#footer {
width: 100%;
background-image: url('images/footer.jpg');
margin: 0px auto;
height: 25px;
position: fixed;
bottom: 0;
}
Como seria aí?
Obrigado,

#10 Alex Hiroshi

Alex Hiroshi

    Super Veterano

  • Ex-Admins
  • 4923 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 04/01/2009, 15:17

Fixo só depois da div content acabar? Como se a div content tivesse 100% de altura? Se for, a resposta está aí: deixa a content com 100% de altura.
Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#11 Inu

Inu

    Veterano

  • Usuários
  • 1138 posts
  • Sexo:Masculino
  • Localidade:Canela, Rio Grande do Sul, Brasil

Posted 04/01/2009, 15:29

Olá!
Não deu.
O meu código HTML está assim:
<div id="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum nibh non ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed fermentum turpis faucibus diam. Nullam hendrerit, mauris in mattis vulputate, massa elit feugiat ligula, sit amet blandit ligula felis eget sapien. Mauris ultricies cursus mauris. Duis massa nulla, viverra a, consequat malesuada, auctor sed, purus. Nunc mattis, metus in gravida fermentum, leo pede interdum turpis, a mattis tortor ipsum eget nulla. Aliquam euismod leo. Aliquam adipiscing tellus sed massa. Nunc pellentesque neque vel dolor. Vestibulum fringilla tortor. Donec in sem.</p></div> <div id="footer"> </div>
E o CSS:
#content {
width: 700px;
padding: 0px;
margin: 0px auto;
height: 100%;
} 
#footer {
width: 100%;
background-image: url('images/footer.jpg');
margin: 0px auto;
height: 25px;
position: fixed;
bottom: 0;
}
Obrigado,

Edição feita por: Inu, 04/01/2009, 15:29.


#12 Alex Hiroshi

Alex Hiroshi

    Super Veterano

  • Ex-Admins
  • 4923 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 04/01/2009, 15:35

Acho que não vai ser o que você quer, mas vamos lá.
html, body {height:100%;}
Tire o position: fixed e bottom: 0, e volte com o clear:both.
Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#13 Inu

Inu

    Veterano

  • Usuários
  • 1138 posts
  • Sexo:Masculino
  • Localidade:Canela, Rio Grande do Sul, Brasil

Posted 04/01/2009, 15:50

Ih, nem adiantou, ainda. Parece que não tem jeito, né?
Mas, para ajudar melhor, segue a página completa e o CSS da página.
[codebox]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='pt' lang="pt">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="pt-br" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Rafael</title>
</head>
<body>
<div id="corpo">
<div id="header"></div>
<div id="menu"><br />
<ul class="menuhor">
<li><a href="http://localhost/fol...bsp;&nbsp;</li>
<li><a href="http://localhost/fol...a=quemsou">Quem sou</a>&nbsp;&nbsp;&nbsp;&nbsp;</li>
<li><a href="http://localhost/fol...bsp;&nbsp;</li>
<li><a href="http://localhost/fol...=precos">Tabela de preços</a>&nbsp;&nbsp;&nbsp;&nbsp;</li>
<li><a href="http://localhost/folio/index.php?pagina=encomende">Encomende!</a>&nbsp;&nbsp;&nbsp;&nbsp;</li>
<li><a href="http://localhost/fol...bsp;&nbsp;</li>
</ul>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum nibh non ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed fermentum turpis faucibus diam. Nullam hendrerit, mauris in mattis vulputate, massa elit feugiat ligula, sit amet blandit ligula felis eget sapien. Mauris ultricies cursus mauris. Duis massa nulla, viverra a, consequat malesuada, auctor sed, purus. Nunc mattis, metus in gravida fermentum, leo pede interdum turpis, a mattis tortor ipsum eget nulla. Aliquam euismod leo. Aliquam adipiscing tellus sed massa. Nunc pellentesque neque vel dolor. Vestibulum fringilla tortor. Donec in sem.</p>
</div>
<div id="footer"> </div>
</div>
</body>
</html> [/codebox]
[codebox]html, body { height:100%; }
body {
font-family : Helvetica, Arial, sans-serif;
font-size: 10px;
line-height : 15px;
text-align: justify;
background-color: #bdcee4;
color: #000000;
margin: 2px 0 0 0;
padding: 0px;
}
#corpo {
background-color: #bdcee4;
width: 100%;
}
#header {
background-image: url('images/header.jpg');
background-repeat: no-repeat;
width: 700px;
height: 200px;
position: relative;
margin: -14px auto;
}
#menu {
height: 45px;
width: 100%;
background-image: url('images/menu.jpg');
margin: 15px auto;
}
#content {
width: 700px;
padding: 0px;
margin: 0px auto;
height: 100%;
}
#footer {
width: 100%;
background-image: url('images/footer.jpg');
margin: 0px auto;
height: 25px;
clear: both;
}[/codebox]
Obrigado!

#14 Édipo Costa Rebouças

Édipo Costa Rebouças

    Rock Lee

  • Ex-Admins
  • 1079 posts
  • Sexo:Masculino
  • Localidade:Brasil - São Paulo

Posted 05/01/2009, 08:16

só lembrando, position fixed não funciona no ie6, tem que fazer gambi com position absolute para funcionar bem....
Desenvolvedor WEB Citrus7 - Uma agência web diferente - Édipo Costa Rebouças
Portfolio http://www.edipo.com.br
Último trabalho : http://www.didierlevy.com.br [XHTML + CSS + JS + PHP ]

Posted Image Meu post lhe ajudou? me da pontinho!

#15 BGGMB

BGGMB

    12 Horas

  • Usuários
  • 156 posts
  • Sexo:Masculino
  • Localidade:Vinhedo SP
  • Interesses:CSS, XHTML, SEO, Photoshop, Illustrator, After Effects, InDesign, Fireworks, Dreamweaver...

Posted 15/01/2009, 14:57

segue um exemplo

body { margin-bottom:40px; }

.footer { height:40px; position:absolute; bottom:0; left:25% /*isso pode ficar meio zuado hahahaha*/; }

o problema é centralizar =)
mais acho que isso é o mais próximo do que você quer certo?
front-end engineer <tags: css/xhtml/javascript/seo/usability/semantic>
www.brunobincoletto.com - twitter @brunobincoletto




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq