Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
E ai pessoal, BLZ?
Estou desenvolvendo este site e estou enfrentando um problema.
O problema é o seguinte, preciso colocar o rodapé do site, porém, ele não fica no fim da página. Para que ele fique onde eu quero preciso estar informando a quantos pixels quero ele do topo, mas eu queria que isso fosse automatico, porque o tamanho do conteudo na página nem sempre será do tamanho que configurei como o inicio do rodapé, ai ele acaba sobrepondo o conteudo quando tem muito.
Se alguém puder me ajudar eu agradeço.
Código da página:
<?php
require_once 'config.php';
require_once 'database.php';
?><!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Título</title>
<link rel="stylesheet" href="estilo.css">
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<body>
<div id="tudo">
<div id="header">
<div>
<img src="img/logo.png" id="site-logo">
</div>
<div>
<a href="index"><img src="img/home.png" id="inicio-incone"></a>
</div>
<div>
<a href="mailto:"><img src="img/contact.png" id="email-incone"></a>
</div>
<div>
<a id="inicio-texto" href="index">Início</a>
</div>
<div>
<a id="email-texto" href="mailto:">E-mail</a>
</div>
<div id="zona-barra-busca"> </div>
<div id="texto-busca">Buscar no site:</div>
<form method="post" action="buscar3.php" id="busca">
<input type="search" name="busca" placeholder="Ex: Exemplo" id="busca-caixa" required="busca">
<input type="submit" value="Buscar" id="busca-botao">
</form>
<div id="zona-barra-slide"> </div>
<div id="zona-slide"> </div>
<nav id="menu">
<ul>
<li id="li1"><a href="index">Início</a></li>
<li id="li2"><a href="quemsomos">Quem Somos</a></li>
<li id="li3"><a href="produtos">Produtos</a></li>
<li id="li4"><a href="servicos">Serviços</a></li>
<li id="li5"><a href="projetos">Projetos</a></li>
<li id="li6"><a href="dicas">Dicas</a></li>
<li id="li7"><a href="novidades">Novidades</a></li>
<li id="li8"><a href="orcamento">Orçamento</a></li>
<li id="li9"><a href="contato">Contato</a></li>
</ul>
</nav>
</div>
<div id="conteudo">
<div id="zona-conteudo">
<div id="conteudo-site">
</div>
<div id="novidades">
<div id="titulo-novidades-conteudo">Novidades</div>
</div>
<div id="dicas">
<div id="titulo-dicas-conteudo">Confira nossas dicas</div>
</div>
</div>
<div id="zona-atendimento">
<div>
</div>
</div>
<div id="zona-newsletter">
<div id="zona-newsletter-titulo">Recebe nossas novidades</div>
<div id="zona-newsletter-descricao">Cadastre seu e-mail abaixo e receba nossas novidades.</div>
<div id="zona-newsletter-form">
<form action="enviar-newsletter.php" method="post">
<p>
<label id="zona-newsletter-form-nome">Nome:</label><br>
<input id="zona-newsletter-form-nome-input" type="text" name="nome" required="required">
</p>
<p>
<label id="zona-newsletter-form-e-mail">E-mail:</label><br>
<input id="zona-newsletter-form-e-mail-input" type="email" name="e-mail" required="required">
</p>
<input id="zona-newsletter-form-enviar" type="submit" name="enviar" value="Enviar">
</form>
</div>
</div>
</div>
<div id="rodape">
<div id="zona-rodape"> </div>
</div>
</div>
</body>
</html>Código css:
body{
background-image: url("img/bg.png");
z-index: 200;
top: 0px;
width:810px;
margin:0 auto;
overflow-x: hidden;
}
#tudo{
position: absolute;
}
#site-logo{
position: absolute;
z-index: 12;
left: 0px;
top: 0px;
width: 200px;
height: 181px;
border: 0px;
}
#inicio-incone{
position: absolute;
left: 300px;
top: 32px;
width: 40px;
height: 40px;
}
#email-incone{
position: absolute;
left: 300px;
top: 98px;
width: 40px;
height: 40px;
}
#inicio-texto{
position: absolute;
left: 347px;
top: 42px;
width: 40px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 13px;
font-weight: bold;
color: #ffffff;
}
#email-texto{
position: absolute;
left: 347px;
top: 107px;
width: 46px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 13px;
font-weight: bold;
color: #ffffff;
}
#texto-busca{
position: absolute;
left: 461px;
top: 72px;
width: 120px;
height: 25px;
font-family: Arial;
font-size: 16px;
font-weight: bold;
color: #ffffff;
}
#busca{
position: absolute;
left: 587px;
top: 72px;
}
#busca-caixa{
width: 135px;
height: 20px;
box-shadow: 2px;
margin-right: 5px;
}
#busca-botao{
width: 70px;
height: 20px;
background: linear-gradient(to bottom, #3e9140 0%,#29612b 100%);
border: 0px;
border-radius: 5px;
font-family: Arial;
font-size: 13px;
color: #ffffff;
cursor: pointer;
} width: 70px;
height: 20px;
background: #54c120;
border: 0px;
border-radius: 5px;
}
#zona-barra-busca{
position: absolute;
left: 440px;
top: 28px;
width: 5px;
height: 120px;
border-radius: 5px;
border: 0px;
background: linear-gradient(to bottom, #3e9140 0%,#8df12a 100%);
}
#zona-barra-slide{
position: absolute;
left: 0px;
top: 190px;
width: 850px;
height: 6px;
border-radius: 5px;
border: 0px;
background: linear-gradient(to bottom, #3e9140 0%,#8df12a 100%);
}
#zona-slide{
position: absolute;
left: 0px;
top: 200px;
width: 850px;
height: 260px;
border-radius: 5px 5px 0px 0px;
border: 0px;
background: linear-gradient(to bottom, #3e9140 0%,#29612b 100%);
} position: absolute;
z-index: 8;
margin: 0px;
left: 0px;
top: 460px;
width: 810px;
height: 40px;
border-radius: 0px 0px 5px 5px;
border: 0px;
background: linear-gradient(to bottom, #3e9140 0%,#29612b 100%);
}
#li1{
position: absolute;
list-style: none;
left: 0px;
top: 0px;
width: 60px;
height: 40px;
border-radius: 0px 0px 0px 5px;
} list-style: none;
background: #54c120;
} position: absolute;
left: 10px;
top: 10px;
margin: 0px;
padding: 0px;
width: 60px;
height: 40px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
} position: absolute;
left: 10px;
top: 10px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #000000;
font-family: Arial;
text-decoration: none;
}
#li2{
position: absolute;
list-style: none;
left: 60px;
top: 0px;
width: 120px;
height: 40px;
} list-style: none;
background: #54c120;
} position: absolute;
left: 5px;
top: 10px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
} position: absolute;
left: 5px;
top: 10px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #000000;
font-family: Arial;
text-decoration: none;
}
#li3{
position: absolute;
list-style: none;
left: 180px;
top: 0px;
width: 100px;
height: 40px;
} list-style: none;
background: #54c120;
} position: absolute;
left: 15px;
top: 10px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
} position: absolute;
left: 15px;
top: 10px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #000000;
font-family: Arial;
text-decoration: none;
}
#li4{
position: absolute;
list-style: none;
left: 280px;
top: 0px;
width: 100px;
height: 40px;
} list-style: none;
background: #54c120;
} position: absolute;
left: 15px;
top: 10px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
} position: absolute;
left: 15px;
top: 10px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #000000;
font-family: Arial;
text-decoration: none;
}
#li5{
position: absolute;
list-style: none;
left: 380px;
top: 0px;
width: 100px;
height: 40px;
} list-style: none;
background: #54c120;
} position: absolute;
left: 15px;
top: 10px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
} position: absolute;
left: 15px;
top: 10px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #000000;
font-family: Arial;
text-decoration: none;
}
#li6{
position: absolute;
list-style: none;
left: 480px;
top: 0px;
width: 70px;
height: 40px;
} list-style: none;
background: #54c120;
} position: absolute;
left: 12.5px;
top: 10px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
} position: absolute;
left: 12.5px;
top: 10px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #000000;
font-family: Arial;
text-decoration: none;
}
#li7{
position: absolute;
list-style: none;
left: 550px;
top: 0px;
width: 108px;
height: 40px;
} list-style: none;
background: #54c120;
} position: absolute;
left: 11.5px;
top: 10px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
} position: absolute;
left: 11.5px;
top: 10px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #000000;
font-family: Arial;
text-decoration: none;
}
#li8{
position: absolute;
list-style: none;
left: 658px;
top: 0px;
width: 111px;
height: 40px;
} list-style: none;
background: #54c120;
} position: absolute;
left: 12px;
top: 10px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
} position: absolute;
left: 12px;
top: 10px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #000000;
font-family: Arial;
text-decoration: none;
}
#li9{
position: absolute;
list-style: none;
left: 770px;
top: 0px;
width: 80px;
height: 40px;
border-radius: 0px 0px 5px 0px;
} list-style: none;
background: #54c120;
} position: absolute;
left: 10px;
top: 10px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
} position: absolute;
left: 10px;
top: 10px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #000000;
font-family: Arial;
text-decoration: none;
}/CSS Conteúdo/
#zona-conteudo{
position: absolute;
left: 0px;
top: 521px;
width: 565px;
min-height: 327px;
margin: 0px;
padding: 0px;
border-radius: 5px;
background: linear-gradient(to bottom, #3f9118 0%,#29612b 100%);
}
#conteudo-site{
position: relative;
top: 0px;
max-width: 555px;
}
#titulo-conteudo{
position: relative;
z-index: 100;
left: 5px;
top: 5px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 19px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
}
#texto-conteudo{
position: relative;
z-index: 99;
left: 5px;
top: 32px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 15px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
} position: relative;
left: -253px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: bold;
font-size: 15px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
} position: relative;
left: -253px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: bold;
font-size: 15px;
color: #d5d5d5;
font-family: Arial;
text-decoration: underline;
}
#novidades{
position: relative;
}
#titulo-novidades-conteudo{
position: relative;
left: 5px;
top: 90px;
width: 240px;
height: 30px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 19px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
}
#novidades-conteudo{
position: relative;
left: -235px;
top: 120px;
width: 240px;
height: 30px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 19px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
} position: relative;
left: 0px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
} position: relative;
left: 0px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #ffffff;
font-family: Arial;
text-decoration: underline;
}
#icon-novidades{
padding-right: 25px;
background: url(img/icon-novidades.png) no-repeat left center;
text-decoration: none;
}
#dicas{
position: relative;
}
#titulo-dicas-conteudo{
position: relative;
left: 270px;
top: 68px;
width: 240px;
height: 30px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 19px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
}
#dicas-conteudo{
position: relative;
left: 90px;
top: 98px;
width: 300px;
height: 30px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 19px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
} position: relative;
left: 0px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
} position: relative;
left: 0px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 18px;
color: #d5d5d5;
font-family: Arial;
text-decoration: underline;
}
#icon-dicas{
padding-right: 25px;
background: url(img/icon-dicas.png) no-repeat left center;
text-decoration: none;
}
#zona-atendimento{
position: absolute;
left: 615px;
top: 520px;
width: 207px;
height: 100px;
margin: 0px;
padding: 0px;
border-radius: 5px;
background: linear-gradient(to bottom, #69f128 0%,#1a3d1b 100%);
}
#zona-newsletter{
position: absolute;
left: 590px;
top: 627px;
width: 260px;
height: 220px;
margin: 0px;
padding: 0px;
border-radius: 5px;
background: linear-gradient(to bottom, #3f9118 0%,#29612b 100%);
}
#zona-newsletter-titulo{
position: absolute;
left: 10px;
top: 5px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: bold;
font-size: 15px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
}
#zona-newsletter-descricao{
position: absolute;
left: 10px;
top: 22px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: normal;
font-size: 15px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
}
#zona-newsletter-form{
position: absolute;
left: 0px;
top: 65px;
width: 260px;
height: 152px;
margin: 0px;
padding: 0px;
}
#zona-newsletter-form-nome{
position: absolute;
left: 15px;
top: 15px;
width: 50px;
height: 20px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: bold;
font-size: 13px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
}
#zona-newsletter-form-e-mail{
position: absolute;
left: 15px;
top: 70px;
width: 50px;
height: 20px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: bold;
font-size: 13px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
}
#zona-newsletter-form-nome-input{
position: absolute;
left: 10px;
width: 236px;
height: 23px;
margin: 0px;
padding: 0px;
}
#zona-newsletter-form-e-mail-input{
position: absolute;
left: 10px;
top: 90px;
width: 236px;
height: 23px;
margin: 0px;
padding: 0px;
}
#zona-newsletter-form-enviar{
position: absolute;
left: 80px;
top: 125px;
width: 100px;
height: 25px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: bold;
font-size: 13px;
color: #ffffff;
font-family: Arial;
text-decoration: none;
background: none;
border: 0px;
} position: absolute;
left: 80px;
top: 125px;
width: 100px;
height: 25px;
margin: 0px;
padding: 0px;
display: inline;
font-weight: bold;
font-size: 13px;
color: #5c5c5c;
font-family: Arial;
text-decoration: none;
background: #e0e0e0;
border-radius: 6px;
border: 1px solid;
border-color: #959595;
cursor: pointer;
}/CSS Rodapé/
#rodape{
position: relative;
top: 900px;
height: 0px;
}
#zona-rodape{
position: relative;
left: 0px;
top: -38px;
width: 850px;
height: 169px;
border-radius: 5px;
margin: 0px;
background: linear-gradient(to bottom, #3f9118 0%,#29622a 100%);
}
#para-conhecer-texto{
position: absolute;
left: 20px;
top: -29px;
width: 100px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 13px;
font-weight: bold;
color: #ffffff;
}
#inicio-texto-2{
position: absolute;
left: 20px;
top: 1px;
width: 100px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 11px;
font-weight: bold;
color: #ffffff;
} text-decoration: underline;
}
#quem-somos-texto{
position: absolute;
left: 20px;
top: 14px;
width: 100px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 11px;
font-weight: bold;
color: #ffffff;
} text-decoration: underline;
}
#produtos-texto{
position: absolute;
left: 20px;
top: 27px;
width: 100px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 11px;
font-weight: bold;
color: #ffffff;
} text-decoration: underline;
}
#servicos-texto{
position: absolute;
left: 20px;
top: 40px;
width: 100px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 11px;
font-weight: bold;
color: #ffffff;
} text-decoration: underline;
}
#projetos-texto{
position: absolute;
left: 20px;
top: 53px;
width: 100px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 11px;
font-weight: bold;
color: #ffffff;
} text-decoration: underline;
}
#dicas-texto{
position: absolute;
left: 20px;
top: 66px;
width: 100px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 11px;
font-weight: bold;
color: #ffffff;
} text-decoration: underline;
}
#novidades-texto{
position: absolute;
left: 20px;
top: 79px;
width: 100px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 11px;
font-weight: bold;
color: #ffffff;
} text-decoration: underline;
}
#para-contatar-texto{
position: absolute;
left: 189px;
top: -29px;
width: 100px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 13px;
font-weight: bold;
color: #ffffff;
}
#contato-texto{
position: absolute;
left: 189px;
top: 1px;
width: 115px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 11px;
font-weight: bold;
color: #ffffff;
} text-decoration: underline;
}
#orcamento-texto{
position: absolute;
left: 189px;
top: 14px;
width: 115px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 11px;
font-weight: bold;
color: #ffffff;
} text-decoration: underline;
}
#atendimento-online-texto{
position: absolute;
left: 189px;
top: 27px;
width: 115px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 11px;
font-weight: bold;
color: #ffffff;
} text-decoration: underline;
}
#floricultura-sol-nascente-texto{
position: absolute;
left: 366px;
top: -29px;
width: 189px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 13px;
font-weight: bold;
color: #ffffff;
}
#cnpj-texto{
position: absolute;
left: 366px;
top: -15px;
width: 189px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 11px;
color: #ffffff;
}
#inscricao-Estadual-texto{
position: absolute;
left: 366px;
top: -2px;
width: 189px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 11px;
color: #ffffff;
}
#hamilto-silva-moro-texto{
position: absolute;
left: 366px;
top: 27px;
width: 189px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 11px;
color: #ffffff;
}
#responsavel-tecnico-texto{
position: absolute;
left: 366px;
top: 40px;
width: 189px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 11px;
color: #ffffff;
}
#crea-texto{
position: absolute;
left: 366px;
top: 53px;
width: 189px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 11px;
color: #ffffff;
}
#sonia-r-k-moro-texto{
position: absolute;
left: 366px;
top: 80px;
width: 189px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 11px;
color: #ffffff;
}
#proprietaria-texto{
position: absolute;
left: 366px;
top: 93px;
width: 189px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 11px;
color: #ffffff;
}
#tecnica-texto{
position: absolute;
left: 366px;
top: 106px;
width: 189px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 11px;
color: #ffffff;
}
#copyright{
position: absolute;
left: 20px;
top: 110px;
width: 290px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 11px;
color: #ffffff;
}
#celular-img{
position: absolute;
left: 571px;
top: -29px;
}
#celular-numero{
position: absolute;
left: 634px;
top: -20px;
width: 200px;
height: 40px;
text-decoration: none;
font-weight: bold;
font-family: Arial;
font-size: 28px;
color: #ffffff;
}
#facebook-icon{
position: absolute;
left: 588px;
top: 58px;
}
#facebook-texto{
position: absolute;
left: 628px;
top: 64px;
width: 170px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 15px;
color: #ffffff;
} position: absolute;
width: 170px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 15px;
color: #ffffff;
}
#desenvolvido{
position: absolute;
left: 646px;
top: 107px;
width: 200px;
height: 20px;
text-decoration: none;
font-family: Arial;
font-size: 11px;
color: #000000;
}Leandro valew por responder, mas acho que você não entendeu meu problema.
É o seguinte, o rodapé já está no centro da página, o problema é que ele não fica la no final onde deveria, para isso preciso informar a localização dele, entende.
Usar position relative ou absolute não muda em nada nele, porque ainda continuo tendo que informar a que distancia do topo ele tem que ficar.
vc está usando position: absoluto pra muitos itens.
faz o seguinte... na div tudo tu seta position: relative pois essa div está encapsulando todo o conteúdo do site, ela não precisa ser absolute, deixa como relative para que os demais objetos tomem ela como referencia.
dae no rodapé tu seta position: absolute; bottom: 0;
só isso... talvez tenha que por um width: 100% e centralizar o cara.
Stromdh obrigado pela resposta, porém, com o que você me passou infelismente o rodapé só fica no fim da tela, ele não desce até o fim da página.
html, body{ height: 100% }
#tudo{
min-height: 100%;
height: auto !important;
height: 100%;
}Stromdh isso não faz o rodapé descer.
cara, eu colei todo o teu codigo em uma página html aqui... tu tem um problema estrutural de html e css.
tu setou uma altura pro body... 810px. sem falar que tem muitos elementos com position: absolute, top e height definidos
Não precisa disso. Tu tem que setar o html e o body pra irem até o fim da página (height: 100%), a mesma coisa com a div que encapsula todo o teu conteúdo, o restante vai na ordem de carregamento do html e tum mexe de leve no css, sem setar position absolute pra ninguém, a não ser pro footer, e com bottom 0 pra ele colar na base.
eu to meio sem tempo pra poder compilar um html aqui pra ti, mas eu mudaria essa estrutura inteira.
tenta retirar os height e os position absolute dos teus elementos e vai postando que te ajudo
O interessante em 1º lugar seria você identificar o que é cabeçalho conteúdo e rodapé da seguinte forma:
tudo o que for cabeçalho você coloca entre <header> </header>
tudo o que for conteúdo da pagina entre <section> </section>
tudo o que for rodapé entre <footer> </footer>faz primeiro esses passos aí.
cuidados nesses usos de position: absolute; por que se não vai bagunçar tudo !
ai depois vc colocar uma div para o header outra para section e outra para footer vai diminuir a quantidade de div e semanticamente vai ficar bem mais organizado seu código .
aí vc vai ter 3 div 4 como a div="tudo" ela será absoluta tendo poder hierárquico sobre tudo o que contém ela vc não vai correr o risco de quando diminuir ou aumentar o zoom de sua pagina ela se desmontar toda. depois posta o resultado pra gente!
abraço!!
Position relative vai fazer isso mesmo.
Usei assim se for ficar no centro.
#rodape { windth:900px; margin:0 auto}