Boa noite caros colegas!!!
Não sou programador experiente, estudei tudo que pude e pesquisei horrores na internet para tentar resolver um problema do meu layout mas tudo que tentei não deu certo e não consegui.
A questão é a seguinte, estou buscando fazer um layout 100% ajustável a tela, tudo que preciso é que o rodapé siga a div central sempre abaixo dela mesmo que o conteúdo seja extenso, vi vários tópicos e vários posts, testei vários e não consegui, todos os meus estudos são pela internet então realmente sou um coadjuvante!!
A questão é que o rodapé sempre fica ajustado a div banner que fica dentro da div centro, eu já tentei posicionar de várias formas com float, aboslute, relative, e não tenho obtido o resultado que preciso na minha index, o engraçado é que justamente na pagina contato onde tenho somente uma imagem dentro da pagina central o rodapé respeita e se posiciona corretamente!!
Mas na pagina index ele fica abaixo das outras divs que vou colocar conteúdo posicionado com top:0px abaixo da div banner e não abaixo da div centro como deveria ficar!!!
Por favor me ajudem!!!
Link do meu dominio onde estou testando esse layout!!!
( http://www.aciprofissional.com/ ) Se olharem na home a direita debaixo da primeira div branca vão ver parte da logo do rodapé!!!
Código HTML
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EPK Equipamentos</title>
<link href="css/style.css" rel="stylesheet"/>
<link href="css/stylecontato.css" rel="stylesheet"/>
<link href="css/hover-min.css" rel="stylesheet" media="all"/>
<STYLE type="text/css">
A:link {text-decoration:none; color:#ffffff; font-weight: bold;font-size:18px; }
A:visited {text-decoration:none;color:#ffffff;font-weight: bold;font-size:18px; }
A:active {text-decoration:none;color:#000000;font-weight: bold; font-size:18px; }
A:hover {text-decoration:none;color:#000000;font-weight: bold; font-size:18px; }
</STYLE>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/cycle.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#banner').cycle({
fx: 'fade',
timeout: 2500,
next:'#next',
prev:'#prev'
});
});
</script>
</head>
<body bgcolor="#1b75bb">
<div id="geral">
<div id="fundotopo">
<div id="botoes">
<div id="logotopo"> </div>
<div id="botaoinicio"> <a href="index.html" class="button hvr-shutter-in-horizontal"> <img src="imagens/botoes/inicio.png"/></a> </div>
<div id="botaoempresa"> <a href="empresa.html" class="button hvr-shutter-in-horizontal"> <img src="imagens/botoes/empresa.png"/></a> </div>
<div id="botaoprodutos"> <a href="produtos.html" class="button hvr-shutter-in-horizontal"> <img src="imagens/botoes/produtos.png"/></a> </div>
<div id="botaolocalizacao"> <a href="localizacao.html" class="button hvr-shutter-in-horizontal"> <img src="imagens/botoes/localizacao.png"/></a> </div>
<div id="botaocontato"> <a href="contato.html" class="button hvr-shutter-in-horizontal"> <img src="imagens/botoes/contato.png"/></a> </div>
</div> </div>
<div id="centro">
<div id="banner">
<img src="imagens/banners/banner1.png" title:"#" alt:"#" width="100%" />
<img src="imagens/banners/banner2.png" title:"#" alt:"#" width="100%" />
<img src="imagens/banners/banner3.png" title:"#" alt:"#" width="100%" /> </div>
<div id="et"></div> <div id="e1"></div> <div id="e2"></div> <div id="e3"></div>
<div id="servicos"></div>
<div id="dt"></div> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div>
</div>
<div id="rodape">
<div id="desenvolvedor"><img src="imagens/logodesenvolvedor.png" width="125" height="77"/></div>
</div>
</div>
</body>
</html>
Folha de estilo
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
}
#geral {
width:100%;
}
#fundotopo {
width:100%;
height: 121px;
top: 0px;
background-image:url(../imagens/fundotopo.png);
background-repeat:repeat-x;
}
#botoes {
position: relative;
top: 0px;
width:980;
margin:auto;
height: 122px;
}
#logotopo {
top: 0px;
height: 121px;
width: 176px;
float:left;
margin-left:0px;
background-image:url(../imagens/logotopo.png);
background-repeat:no-repeat;
}
#botaoinicio {
top: 0px;
height: 121px;
width: 145px;
float:left;
margin-left:30px;
}
#botaoempresa {
top: 0px;
height: 121px;
width: 145px;
float:left;
margin-left:10px;
}
#botaoprodutos {
top: 0px;
height: 121px;
width: 145px;
float:left;
margin-left:10px;
}
#botaolocalizacao {
top: 0px;
height: 121px;
width: 145px;
float:left;
margin-left:10px;
}
#botaocontato {
top: 0px;
height: 121px;
width: 145px;
float:left;
margin-left:10px;
}
#centro {
float:left;
clear:left;
top: 121px;
width:100%;
background-color:#FFF;
}
#banner {
width:100%;
}
#vai {
position:absolute;
margin-top:5px;
background-color:#FCBF10;
text-decoration:none;
text-align:center;
padding:3px;
height: 18px;
width:30px;
right:3%;
left:97%;
z-index:150;
}
#volta {
position:absolute;
margin-top:5px;
background-color:#FCBF10;
padding:3px;
text-align:center;
height: 18px;
width:30px;
right:4.5%;
left:95.5%;
z-index:151;
}
#et {
position:absolute;
left:0px;
height:40px;
width:245px;
background-color:#808284;
z-index:100;
}
#e1 {
position:absolute;
margin-top:45px;
left:0px;
height:210px;
width:245px;
background-color:#e6e7e8;
z-index:101;
}
#e2 {
position:absolute;
margin-top:260px;
left:0px;
height:210px;
width:245px;
background-color:#e6e7e8;
z-index:102;
}
#e3 {
position:absolute;
margin-top:475px;
left:0px;
height:210px;
width:245px;
background-color:#e6e7e8;
z-index:103;
}
#servicos {
position:absolute;
margin-top:0px;
left:250px;
right:250px;
height:685px;
background-color:#FFFFFF;
z-index:99;
}
#dt {
position:absolute;
right:0px;
height:40px;
width:245px;
background-color:#808284;
z-index:104;
}
#d1 {
position:absolute;
margin-top:45px;
right:0px;
height:210px;
width:245px;
background-color:#FFFFFF;
z-index:105;
}
#d2 {
position:absolute;
margin-top:260px;
right:0px;
height:210px;
width:245px;
background-color:#FFFFFF;
z-index:106;
}
#d3 {
position:absolute;
margin-top:475px;
right:0px;
height:210px;
width:245px;
background-color:#FFFFFF;
z-index:107;
}
#rodape {
width:100%;
height: 121px;
background-image:url(../imagens/fundobase.png);
background-repeat:repeat-x;
background-position:bottom;
z-index:300;
}
#desenvolvedor {
float:right;
padding:5px;
right:5px;
}