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

Weasel

Como colocar "texto" sempre junto ao fundo da página?

17 mensagens neste tópico

Por exemplo temos uma pagina em que queremos por um footer tipo copyright ou coisa assim, mas é por exemplo uma pagina com pouco conteudo.... 1 linha vá...

esse footer vai aparecer logo a seguir a essa linha....como é que posso colocar o footer a aparecer sempre junto ao fundo do browser dinamicamente (caso tenha conteúdo a menos)?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

não percebi como usando isto vou colocar o footer sempre junto á parte de baixo do browser, caso não tenha conteúdo que chegue...explica-me sff

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Colocas uma div para o conteúdo com a propriedade que te indiquei e o tamanho que quiseres (90%) e crias outra div em baixo dessa com o footer, mesmo que o conteúdo seja menor a propriedade vai obrigar o tamanho que colocares em pixeis ou percentagem

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

assim não vai funcionar... funciona para uma resolução específica mas falha para todas as outras...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

<div style="position:absolute; bottom:0%;">footer woot!</div>

Para ficar centrado:

<div style="position:absolute; bottom:0%; left:0%; right:0%; text-align:center;">footer woot!</div>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

assim não vai funcionar... funciona para uma resolução específica mas falha para todas as outras...

Funciona se trabalhar com % como sugeri, tipo definir mínimos de 20% para o header, 70% para o body e 10% para o footer, ou algo do género.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

<div style="position:absolute; bottom:0%;">footer woot!</div>

Para ficar centrado:

<div style="position:absolute; bottom:0%; left:0%; right:0%; text-align:center;">footer woot!</div>

Quase funcionou...

Quando testei deu perfeito, pensei logo wow! mas lembrei-me de meter mais conteudo na página (de maneira que tivesse de fazer scroll) e kaput, o div footer fica na mesma junto ao fundo da janela do browser, ou seja o "conteúdo" da janela passa para baixo do  div footer, e o que eu pretendia era caso a pagina tivesse conteúdo suficiente para se fazer scroll, a div footer acompanha-se o conteúdo...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

<div style="position:absolute; bottom:0%;">footer woot!</div>

Para ficar centrado:

<div style="position:absolute; bottom:0%; left:0%; right:0%; text-align:center;">footer woot!</div>

Quase funcionou...

Quando testei deu perfeito, pensei logo wow! mas lembrei-me de meter mais conteudo na página (de maneira que tivesse de fazer scroll) e kaput, o div footer fica na mesma junto ao fundo da janela do browser, ou seja o "conteúdo" da janela passa para baixo do  div footer, e o que eu pretendia era caso a pagina tivesse conteúdo suficiente para se fazer scroll, a div footer acompanha-se o conteúdo...

Em vez de bottom:0%, usa top:100%. Pode ser que dê. :)
0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Não deu.... Agora quando tem muito conteúdo o footer efectivamente fica a seguir ao conteúdo , no fundo da pagina, mas se tiver pouco conteúdo, o footer fica colado logo a seguir ao conteúdo...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Bem..... mas que preguiça que vocês têm.  :eek:

CSS:

#footer {
position: absolute;
bottom: 0;
background-color: #fff;
color: #000;
width: 80%; /* See note below */
text-align: center;
padding: 2% 10%;
}
/* SBMH -- see http://css-discuss.incutio.com/?page=BoxModelHack 
* Stupid hack lets IE see 100%, others see 70%. 
*/
#footer {
    \width: 100%;
    w\idth: 80%;
}

HTML

<div id="footer">O TEXTO DO FOOTER FICA AQUI</div>

Exemplo de como fica a página, mesmo sem ter contéudo nenhum:

http://www.skeletorscorpse.com/css/footer/nocontent.html

Tá aqui a "papinha" toda feita :)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Assim não resulta....

pois se tiveres conteudo da página que tenha de se fazer scroll o footer em vez de ir para baixo desse conteudo fica por cima (junto á parte de baixo do browser é certo) mas por cima do conteúdo da pagina...

Só se fizer em php para testar "quanto" conteúdo a pagina tem (não sei mto bem como) e caso seja necessário scroll omite o position:absolute; caso contrario usa o position:absolute;

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Assim não resulta....

pois se tiveres conteudo da página que tenha de se fazer scroll o footer em vez de ir para baixo desse conteudo fica por cima (junto á parte de baixo do browser é certo) mas por cima do conteúdo da pagina...

Então algo está mal..... talvez tenhas conflitos entre o teu CSS ?!?

Um exemplo com o mesmo código CSS+HTML, mas desta vez com montes de conteúdo:

http://www.skeletorscorpse.com/css/footer/fullcontent.html

E não acontece o que descreveste.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Assim não resulta....

pois se tiveres conteudo da página que tenha de se fazer scroll o footer em vez de ir para baixo desse conteudo fica por cima (junto á parte de baixo do browser é certo) mas por cima do conteúdo da pagina...

Então algo está mal..... talvez tenhas conflitos entre o teu CSS ?!?

Um exemplo com o mesmo código CSS+HTML, mas desta vez com montes de conteúdo:

http://www.skeletorscorpse.com/css/footer/fullcontent.html

E não acontece o que descreveste.

Se fores ver o codigo fonte dessa página tens

#footer {

bottom: 0;

background-color: #cfc;

color: #000;

width: 80%;

text-align: center;

padding: 2% 10%;

}

Sem o position:absolute;

Esses demos são um bocado enganosos a quem estiver distraído.

Não conhecem nenhuma solução para este problema ?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Já resolvi

Colocando assim no CSS

html { height: 95%;}

body { height: 95%;}

#nonFooter { position: relative; min-height: 95%;}

* html #nonFooter { height: 95%;}

#Footer { position: relative; margin-top: -7.5em; }

e criando uma DIV logo asseguir ao <body> com id="nonFooter" e depois a div do footer

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