Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

girotto000

Footer feito com imagem

Recommended Posts

Boa noite. O footer do meu site é feito a partir de uma imagem.

Porém, n consigo "grudar" ela no fim da minha página...

Códigos:

 

Nas paginas:

<div id="rodape"></div>
No CSS

#rodape{
	background: url('../images/rodape.png') no-repeat;
	position:absolute;
	width: 990px;
	height: 320px;
	bottom:1;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá giroto000, blza!

 

Veja alguns link para te ajudar.

 

1) http://www.maujor.com/tutorial/rodape-embaixo-da-janela.php

 

2) http://tableless.com.br/colocar-rodape-fixo-no-bottom/

 

 

 

Espero ter ajudado,

 

vkw

Compartilhar este post


Link para o post
Compartilhar em outros sites

Qual o comportamento da [inline]DIV[/inline] com o código que você citou? Poderia postar o código completo?

Opa beleza?

Código no HTML:

<div id="rodape"></div>

E no CSS:

#rodape{
	background: url('../images/rodape.png') no-repeat;
	position:absolute;
	width: 990px;
	height: 320px;
	bottom:1;
}

Resultado:

 

f2cf9ea377.jpg

 

Como pode ver está no final da pagina porém na está grudada no fim.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você está usando algum reset no seu CSS?. Exemplo:

* {
    margin: 0;
    padding: 0;
}
E mude o valor do [inline]bottom[/inline] para 0.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Você está usando algum reset no seu CSS?. Exemplo:

* {
    margin: 0;
    padding: 0;
}
E mude o valor do [inline]bottom[/inline] para 0.

 

Somente para outras divs...

Faz diferenca?

Se eu mudo o bottom para 0 a imagem fica no meio da pagina...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sim, pois todo elemento possui um estilo padrão de acordo com o browser.

 

O mais provável seja isso. Poste o código completo, pode haver outro trecho de código gerando este problema.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sim, pois todo elemento possui um estilo padrão de acordo com o browser.

 

O mais provável seja isso. Poste o código completo, pode haver outro trecho de código gerando este problema.

Não tem mais código é só isso mesmo rsrs

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style>
#rodape{
	background: url('rodape.png') no-repeat;
	position:absolute;
	width: 990px;
	height: 320px;
	bottom:1;
}
</style>
</head>
<body>
<div id="rodape"></div>
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style>
* {
        margin: 0;
        padding: 0;
}

#rodape{
	background: url('rodape.png') no-repeat;
	position: absolute;
	width: 990px;
	height: 320px;
	bottom:0;
}
</style>
</head>
<body>
<div id="rodape"></div>
</body>
</html> 

Então aplique o CSS reset e veja se funciona.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara, então sua imagem se encontra no bottom e a parte verde que gera a margem entre os dois compõem a sua imagem, ou seja, é assim que tem que ser :yes:

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara, então sua imagem se encontra no bottom e a parte verde que gera a margem entre os dois compõem a sua imagem, ou seja, é assim que tem que ser :yes:

Usando este código:

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style>
* {
        margin: 0;
        padding: 0;
}

#rodape{
	background: url('rodape.png') no-repeat;
	position: absolute;
	width: 990px;
	height: 320px;
	bottom:0;
}
</style>
</head>
<body>
<div id="rodape"></div>
</body>
</html>

Resultado:

 

 

http://puu.sh/fESbn/acab126c1e.jpg

 

Ainda não está colada no chão :/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Veja ele funcionando, não é assim que deseja?

 

http://jsfiddle.net/wilnet/4qxk8rhh/

 

 

OBS: Verifique tb se o Caminho de sua Imagem está correta.

 

 

CSS:

#rodape{
    background: url('rodape.png') no-repeat;
    position: absolute;
    width: 990px;
    height: 320px;
    bottom:0;
}

HTML:

<div id="rodape"></div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

RESOLVIDO!

 

Código final:

 

html:

 

<div id="rodape"></div>

 

CSS

 

#rodape{
background: url('../images/rodape.png') no-repeat;
position: absolute;
width: 990px;
height: 278px;
bottom:1;
}

 

Obrigado pela ajuda de todos ;)

Compartilhar este post


Link para o post
Compartilhar em outros sites

É isso ai,

 

O Code era esse mesmo.

 

vlw

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.