Ir para o conteúdo
Weasel

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

Mensagens Recomendadas

Weasel    3
Weasel

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)?

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Weasel    3
Weasel

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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
rgcaldas    0
rgcaldas

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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
djthyrax    11
djthyrax

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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
rgcaldas    0
rgcaldas

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.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Weasel    3
Weasel

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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
djthyrax    11
djthyrax

<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ê. :)

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Weasel    3
Weasel

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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
mad16v    0
mad16v

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 :)

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Weasel    3
Weasel

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;

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
mad16v    0
mad16v
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.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Weasel    3
Weasel
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 ?

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Weasel    3
Weasel

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

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


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade