CSS Position

[Rzorr 0]

Boa tarde

 

Estou desenvolvendo um blog e estou usando css, o que acontece o seguinte na div footer eu quero que conforme os posts vão entrando no site o rodapé vai ficando embaixo o que acontece e exatamente ao contrario o rodapé fica no top da pagina ums 100px para baixo e já tentei varias coisas só que o rodapé não fica embaixo de tudo alguem ai pode me ajudar segue código.

 

*{margin:0;padding:0;}
/*           divs                      */

body{margin:0;padding:0;}
#geral{width:1024px;margin:0 auto;}
#head{position:relative;margin-top:50px;margin-left:100px;}
#menu{float:right; border-radius:10px;}
#menu ul, li{margin:05px;display: inline-block;padding: 05px;background-color: #e8e8e8;  border-radius:10px; }
#menu a {text-decoration: none;color:#ff4500;margin-left:  5px;}
#menu a:hover{color:#ff8247;}
#post{positon:relative;margin-top:50px;background-color: #e8e8e8;width: 600px;height:50px;color:#ff4500;  border-radius:10px;}
#comentes{position:relative;}
#footer {position:relative; margin-top:100%;}
#facebook{clear:both;   }

#right{float: right;width:300px;border:solid 1px; border-radius:10px;}


/* Classes*/

.titu{position:relative;top:10px;margin-left:10px;}
.dat{position: relative;margin-top:10px;margin-left:500px;}
.texto{positon:relative;width:600px;height: auto;}
.img{position:relative;margin-top:10px;width:600px;height: auto;}
.db{font-size:100px;color:#ff4500;}

 

Obrigado.

[Samuel Pacheco QDS 1]

tira todos os position:relative; e coloca clear:both; no #footer

[Rzorr 0]

Se eu tirar todos os Position:relative como faço o posicionamento?

 

 

Será que mais alguem pode me ajudar eu ja fiz o que o amigo de cima falou mas não funcionou já apaguei o codigo todo e escrevi tudo de novo e nada o radapé sempre fica no meio da pagina a unica coisa que funcionou foi colocar top:1000px; mas ai fica um grande espaço vazio.

 

 

 

 

alguém???

[Dian Carlos 29]

Man. tenta por o id 'geral' com 'overflow: hidden', e tira o 'margin-top' do footer...

[Morpheus#2005 1]

Eu faço assim....testa ai.

 

html, body, #wrap {height: 100%;} body > #wrap {height: auto; min-height: 100%;} #main {padding-bottom: 40px;} /* deve ser a mesma altura do rodapé */ #footer { position: relative; margin-top: -40px; /* A mesma altura do rodapé, o valor deve ser negativo */ height: 40px; clear:both } 

<div id="wrap"> <div id="header"></div> <div id="main"></div> </div> <div id="footer"></div>

[Rzorr 0]

Então eu testei as sugestões mais não deu certo não então vou postar meu código novamente para vocês verem se tem alguma coisas que ta impossibilitando a resolução do problema Morpheus#2005 teste do seu jeito e não funcionou o que aconteceu de diferente foi que o menu colou na parde superior da pagina.

 

#geral{margin:0 auto; padding:0 auto; width:1024px; min-height: 100%; }
html, body{margin:0; padding:0; height:100%;}
#head{postion:relative;}
#menu{position:relative; float:right;margin-top:-100px;}
#menu ul,li{ display:inline-block; background-color:#000; padding:05px; margin:10px; border-radius:10px;}
#menu a {text-decoration:none; color:#fff;}
#menu a:hover{text-decoration:none;}
#menu a:visited{color:red;}
#posts { margin-top:110px; width:600px; background-color:#000; border-radius:7px; height:50px;}
#right {float:right; width: 300px; height: auto; border: solid 1px;border-radius:10px;}
#roda{ position:absolute;  bottom: 0px; width: 100%;}
#oferta{background-color: #000; margin-top: 10px; padding:05px;color:#fff;  border-radius:05px;}
#categoria{background-color: #000; margin-top: 10px; padding:05px;color:#fff;  border-radius:05px;}
h2{}
.titu{width: 600px; color:#fff;}
.dat {color:#fff;}
.img {width: 600px; heigth: 0 auto; margin-top:15px;border: 1px solid;}
.texto{width:600px; font-family: 'Times New Roman',Times,serif;}
.db{font-size:90px; color: #FF4500;}