Ir para conteúdo

POWERED BY:

Arquivado

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

guhfloripa

colocar div no rodapé da pagina no final da pagina

Por , em Desenvolvimento frontend

Recommended Posts

guhfloripa    0

guhfloripa
Postado

alguem sabe colocar div no rodapé da pagina? peguei esta função aki

 

<div style="background-color:#0B77A4; height:10px; position: absolute; buttom: 0;"></div>

 

porem nao funciona.. no mozila funcionam, porem no internet exeplorer nao funciona a função e nao fica no rodape da pagina. valeu obrigado qualquer ajuda eh sempre bem vinda

Compartilhar este post

Link para o post
Compartilhar em outros sites

~TiuTalk~    7

~TiuTalk~
Postado

Primeiro isso não é uma função, pois como já foi dito, HTML não é linguagem de programação... Isso é apenas um bloco de código :)

 

Coloque algum conteúdo da DIV:

<div style="background-color:#0B77A4; height:10px; position: absolute; buttom: 0;">Teste</div>

 

Você também vai precisar especificar, provavelmente, a position do body:

<body style="position: relative">

 

Recomendo você estudar um pouco mais de CSS antes de fazer isso tudo ;)

 

--

 

Tópico movido para o fórum correto.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Primeiro você tem que colocar um html, body { height: 100% } - adicone um * no começo para o Internet Explorer. Coloca um position: relative e min-height: 100% no #container.

 

No rodapé é só fazer o que foi dito. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

guhfloripa    0

guhfloripa
Postado

tentei fazer.. isto conforme foi dito nao funciona.. aparece o rodape no final da pagina porem se scrol pra baixo ela fica parada no meio do site por cima dos conteudo.

 

<body style="position: relative">

<div style="background-color:#0B77A4; height:10px; position: absolute; buttom:

 

0;">Teste</div>

 

</body>

 

e o q o nosso amigo falo sobre os #container poderia descrever melhor? obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Com base em minha resposta anterior, estude esse código.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html, body { height: 100%; }
body {
	background: blue
}
#container {
	position: relative;
	min-height: 100%;
}
#footer {
	width: 800px;
	background: red;
	position: absolute;
	bottom: 0;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout líquido</title>
</head>

<body>
<div id="container">
<div id="content">
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
<p>Texto</p>
</div>
<div id="footer">
	<address>Rodapé do site.</address>
</div>
<!--/footer-->
</div><!--/container-->
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito