[Resolvido] Rodapé fixo não funfa

Fala Compadre!

Lá na sua "div" rodapé, insere uma linha nela... digamos que sua div esteja assim no CSS

#rodape {
 regras;
}

#rodape {
 clear:both;
}

Abraços!

Se não funcionar o código do nosso amigo ai acima siga dê uma olhada nesse tutorial, ele explica corretamente o que você precisa

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

Usei ele esses dias e funcionou!

;)

nehum nem outro funcionaram :-(

Fala China!

Criar uma Div com o atributo "clear" também resolve, mas eu prefiro, nesse caso, ao invés de utilizar o ID, usar a CLASS.

Primeiramente, porque a class eu posso utilizar quantas vezes eu precisar dela.

Segundo, esse lance de criar uma "div class='clear'" é legal quando você trabalha com Float.

Se você criar, por exemplo, um código css nessa formatação:

estilo.css

#wrapper {
 width:760px;
 height:auto;
 font-size:12px;
 font-family: Arial, Tahoma, Verdana, sans-serif;
 background-color: #333;

}

#topo {
 height: 150px;
}

#container {
 height:auto;
}

#coluna-esquerda {
 float:left;
 display:inline; /*Pra não dar rolo no EI*/
 width: 400px;
 height:250px;
}

#coluna-direita{
 float:right;
 display:inline; /*Pra não dar rolo no EI*/
 width: 300px;
 height:250px;
}

#rodape {
 height:150px;
 clear:both:
}

E no XHTML, você inserir dessa maneira:

<div id="wrapper">

 <div id="topo"></div>

 <div id="container">

 <div id="coluna-esquerda"></div>

 <div id="coluna-direita"></div>

	</div>

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

</div>

Agora, se você criar a classe "clear" ....

.clear {
 clear:both;
}

<div id="wrapper">

 <div id="topo"></div>

 <div id="container">

 <div id="coluna-esquerda"></div>

 <div id="coluna-direita"></div>

	</div>

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

	<div class="clear"></div>
</div>

A cor do wrapper vai até o final do site. Portanto, a DIV com esse atributo, serve para você forçar o container principal a ir até o final dele, e não travar a hora que ele encontra um clear na frente dele....

Espero ter ajudado em alguma coisa!

Abraços!

isso que você me falou e mais ou menos a teoria do majour

Até tentei ela só que eu não consegui acertar o rodapé

Entendeu ?

Pelo menos aqui deu certo agora...

body{
background:#fff url(img/bg-fundo-outras.jpg) repeat-x;/background das outras páginas tirando home/

	margin:0;
	padding:0;
}
#bghome{
	background:#fff url(img/bg-fundo.jpg) repeat-x;
	margin:0;
}
#container{
	width:960px;
	margin:auto;
	display:table;
	position: relative;

}
#logo{
	margin:36px 0px 55px 0px;
}

	width:384px;
	height:30px;
	float:left;
	background:url(img/logo-pousada-parnaioca.png);
	text-indent:-9999px;
	outline:none;
}
#menu{
	float:left;
	padding:38px 0px 0px 0px;
	list-style: none;
}

	float:left;
	margin-right: 2px;
}

	color:#005826;
	display:block;
	text-decoration:none;
	font-size:12px;
	font-weight:bold;
	font-family:Arial;
	text-transform:uppercase;
	height:35px;
	line-height:35px;
	padding:0 18px;
	outline:none;

}

	background: url('img/hover-menu.jpg') no-repeat left top;
}

	color:#ffffff;
	background: url('img/bg-menu-right.jpg') no-repeat right top ;
}
#areabanner{
	background-color:#ffffff;
	margin:14px 0px 57px;
	float:left;
	padding:10px;
}
#box{
	margin:80px 0px 52px 0px;
	clear:both;
	font-size:12px;
	color:#767676;
}

	float: left;
	width:258px;
	background: url(img/bg-fundo-box.jpg) repeat-x;
	height: 153px;
	border: 1px solid #CCC;
	padding: 20px;
	margin-right: 31px;
	margin-bottom: 104px;
}

	font: normal 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #08542a;
	text-decoration: none;
	margin-top:-9px;
	margin-bottom:-2px;
}

	border: solid 1px #f5f5f5;
	padding: 2px;
	float: right;
	margin:8px 0 10px 10px;
}

	border:solid 1px #252525;
	cursor:pointer;
}

	line-height:16px;
	font-size:14px;
	color:#767676;
	margin-bottom: 20px;
}

	font-weight:bold;
	color:#252525;
	text-decoration:underline;
	font-size:15px;
}

	text-decoration:none;
}

	margin:0px;
}

	margin:0px;
	float:right;
}

background: url(img/bg-rodape.jpg);
height:73px;
position:relative;

#b{
	clear:both;
	visibility:hidden;
	background:#abefae;

}
#rodape{
	position:relative;
	width:100%;
	height:80px;/*Altura do rodape*/
	background:#e3c998;
	bottom:0px;

}

	padding:6px 0px 0px 157px;
	color:#343333;
	font-family:arial;
}

	float:left;
	list-style:none;
	margin:0px;
	padding-left:157px;
}

	float:left;
}

	text-decoration:none;
	color:#343333;
	font-family:arial;
}

	text-decoration:underline;
}
#apousada{
	float:left;
}

	font-weight:bold;
	font-family:Arial;
	font-size:25px;
	color:#08542a;
	margin:0px 0px 14px 20px;
}

	font-family:arial;
	font-size:15px;
	color:#603913;
	text-align:justify;
}

	float:left;
	margin:0px 17px 16px 0px;
}

Modifiquei apenas duas coisas...no seu CSS, o rodapé tava com um "margin-top:-80px", que tava jogando 80pixels pra baixo, e sua div B continha mais 80px de altura....moral da história, você tava tendo 160px de diferença entre o conteúdo e o rodapé...

E não sei se foi erro na hora de digitar, mas o margin-top não é a altura do container, e sim, a margem que ele terá sobre o container acima... a altura de um container você descreve como height...

Abraços meu velho!

tente assim

#seu rodape{ position: fixed;
bottom:0px;
z-index:500;
width:defina px;
height:defina px;

}

ie 6

* html #seu rodape{

 position: absolute;
 top: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+575+"px" : body.scrollTop+575+"px");

}

Nossa, um lay-out fácil assim, n tem como ter problemas desse tipo!!!

<body>
 <div id="wrapper">
 <div id="topo"></div>
 <div id="conteudo"></div>
 <div id="espaco_rodape"> </div>
 <div id="rodape"></div>
 </div>

html, body { height: 100%; }
#wrapper { min-height: 100%; position: relative; }
#topo { height: 200px; }
#espaco_rodape, rodape { height: 00px; } / aqui no lugar de 00 vem a altura do rodape /
#rodape { position: absolute; bottom: 0 }

>
Pelo menos aqui deu certo agora...

Modifiquei apenas duas coisas...no seu CSS, o rodapé tava com um "margin-top:-80px", que tava jogando 80pixels pra baixo, e sua div B continha mais 80px de altura....moral da história, você tava tendo 160px de diferença entre o conteúdo e o rodapé...

E não sei se foi erro na hora de digitar, mas o margin-top não é a altura do container, e sim, a margem que ele terá sobre o container acima... a altura de um container você descreve como height...

Abraços meu velho!

Pode deixar André eu vou ver sua solução mano

>
tente assim

espero ter ajudado! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Vlw kreator vou tentar sim mano

>
Nossa, um lay-out fácil assim, n tem como ter problemas desse tipo!!!

..rsrsrs é ?

pode ser falta de experiência mano porque eu terminei o curso agora e esse é meu trabalho final e nao entregando ele fico sem meu diploma entende ?

essa parte de rodapé líquido eu não me lembro de ter visto no curso...

Estou tendo dificuldades com esse projeto mais encontra partida estou tentando coisas novas para aprimorar meu conhecimento e aprender também..rsrsrs

acho que deve ser por isso dos perreguens ^^

e eu tenho certeza que quando terminar esse projeto final eu vou pegar alguns livros sobre css para ler até pq prentendo focar bem nisso

Mas vlw pela ajuda Evandro e pode deixar que eu vou ver esse código também

Abraços

PS: A medida do progresso com esse safado desse rodapé eu posto aqui ^^

Uma pequena correção de uma coisa muito feia que eu fiz aqui sem perceber, rs.

<body>
 <div id="wrapper">
 <div id="topo"></div>
 <div id="conteudo"></div>
 <div id="rodape"></div>
 </div>
</body>

html, body { height: 100%; }
#wrapper { min-height: 100%; position: relative; }
/ Trocar 00px pela altura do rodapé /
#conteudo { margin-bottom: 00px; }
#rodape { bottom: 0; height: 00px; position: absolute; }
Não me leve a mal quando disse sobre a facilidade do lay-out. O mesmo está muito bom, bem diagramado, elementos bem posicionados, mesmo assim não deixa de ser simples e não haveria motivos para ter problemas com esse tipo de posicionamento. Mas um ponto positivo das dificuldades é que elas ensinam. Tenho certeza que após resolver o seu problema, dificilmente o mesmo se repetirá.

Bons estudos.

continuo nao acertando... :(

caraca! ^_^

isso não deveria dar tantos problemas... vamos lá.

você precisa de um container!

como o teu rodapé está em 100%, você precisa de algum elemento para dar o 'contexto de posicionamento' para ele, tal que esse elemento tenha min-height de 100% dos pais dele mesmo, ou seja, o <body> e o <html>

no caso, criei um #wrapper

html, body {

	height: 100%;
}
#wrapper {
	min-height: 100%;
	position: relative;
}

#rodape{
	position:absolute;/* adicionei */
	width:100%;
	height:80px;/*Altura do rodape*/
	background:#e3c998;
	bottom:0px;
}
#container{
	width:960px;
	margin: 0 auto;
	display:table;
	position: relative;/* adicionei */
	padding-bottom: 80px;/* adicionei */

remova o #b

ficou o html assim então:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
	<title>Pousada Parnaioca | Projeto Final Web Designer</title>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="estilo.css" type="text/css" />
</head>
<body>
<div id="wrapper">
	<div id="container">
 <h1 id="logo"><a href="index.html">Pousada Parnaioca</a></h1>

 <ul id="menu">
 <li ><a href="index.html">Home</a></li>
 <li class="active"><a href="apousada.html">A Pousada</a></li>
 <li><a href="apartamentos.html">Apartamentos</a></li>
 <li><a href="suites.html">Suites</a></li>
 <li><a href="passeios.html">Passeios</a></li>
 <li><a href="fotos.html">Fotos</a></li>
 <li><a href="praias.html">Praias</a></li>
 <li><a href="eventos.html">Eventos</a></li>
 <li><a href="contato.html">Contato</a></li>
 </ul><!--/menu-->

 <div id="apousada">
 <h1>A pousada</h1>

 <p><img src="img/img-1.jpg" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
 massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
 pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
 arcu.</p>
 </div><!-- /aposada -->

	</div><!-- /container -->
	<div id ="rodape">
 <p>Copyright © 2010 Pousada Parnaioca</p>

 <ul>
 <li><a href="index.html">Home</a> | </li>
 <li><a href="apousada.html">A Pousada</a> |  </li>
 <li><a href="apartamentos.html">Apartamentos</a> | </li>
 <li><a href="suites.html">Suites</a> | </li>
 <li><a href="passeios.html">Passeios</a> | </li>
 <li><a href="fotos.html">Fotos</a> | </li>
 <li><a href="praias.html">Praias</a> | </li>
 <li><a href="eventos.html">Eventos</a> | </li>
 <li><a href="contato.html">Contatos</a></li>
	</div><!--rodapé-->
</div><!-- /wrapper -->
</body>
</html>

Boa noite, também estou tentando deixar um rodape fixo, e estou até conseguindo que ele fique no final dessa maneira, porém se o conteúdo é maior que a página, o rodapé some, ficando abaixo do conteúdo. Abs

Aew acertei galera a solução do bruno foi 10!

Consegui entender o porque que eu estava errando ^^

Tá perfeito

>
Boa noite, também estou tentando deixar um rodape fixo, e estou até conseguindo que ele fique no final dessa maneira, porém se o conteúdo é maior que a página, o rodapé some, ficando abaixo do conteúdo. Abs

Croft segue essa explicação do bruno pois é a melhor opção

ps: se não fosse o efeito de rodapé 100%, o #rodape, estaria dentro do #container, e ai não seria necessário usar o #wrapper.

>
Boa noite, também estou tentando deixar um rodape fixo, e estou até conseguindo que ele fique no final dessa maneira, porém se o conteúdo é maior que a página, o rodapé some, ficando abaixo do conteúdo. Abs

Creio que essa seja a funcionalidade de um rodapé: aparecer depois do conteúdo.

Se você precisa de um rodapé fixo, sugiro que abra um novo tópico para o seu problema, pois a solução difere da postada aqui.

>

>

Boa noite, também estou tentando deixar um rodape fixo, e estou até conseguindo que ele fique no final dessa maneira, porém se o conteúdo é maior que a página, o rodapé some, ficando abaixo do conteúdo. Abs

Creio que essa seja a funcionalidade de um rodapé: aparecer depois do conteúdo.

Se você precisa de um rodapé fixo, sugiro que abra um novo tópico para o seu problema, pois a solução difere da postada aqui.

Ele não está ficando depois do conteúdo, esta aparecendo escondido atrás do conteúdo, talvez tenha escrito errado. Vou tentar a solução do Bruno que funcionou para o amigo acima. Abs

tenta sim que essa é boa :-)