Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal, estou com um problema em meu código aqui
Tenho uma imagem de 1900x1280 que sempre redimensiona em base do tamanho da tela, ela tem um Position: Absolute
Tenho o conteúdo todo que o Rodapé está colando no final da rolagem, e não no final da página
Por exemplo, se eu tenho um monitor de 1280 e meu conteudo vai até 1315 o rodapé fica sempre no 1280
Ele também está com Position: Absolute e Bottom:0
Segui 2 tutoriais do Maujor o de colar o Rodapé no Final e o de construir um layout de 2 colunas....juntei mais ou menos os 2 layouts para atender ao que eu queria, mas não estou tendo sucesso, meu código está logo abaixo em forma de escopo para que vocês possam visualizar melhor o meu problema
Vejam só:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste Resolução</title>
</head>
<body>
<img src="img/chales-4.jpg" id="imgResize" alt="nao sou um elemento semantico">
<div id="tudo">
<div id="logo"> LOGO </div>
<div id="topo"> BOTÕES RÁPIDOS</div>
<div id="navegacaoMenu">COLUNA MENU</div>
<div id="principal">FLASH PLAYER</div>
<div id="baseTexto" >BASE TEXTOS </div>
<div id="clear"></div>
<div id="rodape">RODAPE</div>
</div>
<style type="text/css">body{
border:black solid;
margin:0;
font: 12px Arial, Helvetica, sans-serif;
background:#ffe;
text-align:center;
}
#imgResize {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -7;
}
#tudo {
border:red solid;
width:760px;
background: url(faux-bg.gif) repeat-y 0 0;
text-align:left;
margin:0 auto;
}
#topo {
width:578px;
height:50px;
background-color:#906;
float:right;
}
#principal {
width:578px;
height:300px;
background-color:#9cf;
float:right;
}
#baseTexto {
width:578px;
height:400px;
background-color:#CCC;
float:right;
position:relative;
}
#logo {
width:180px;
background-color:#ffbf3d;
float:left;
}
#navegacaoMenu {
width:180px;
background-color:#ffbe7d;
float:left;
position:relative;
}#principal * {
padding: 0 20px;
}#navegacao * {
padding: 0 8px;
}
#clear {
clear:both;
}
#rodape {
position:absolute;
clear:both;
bottom:0;
height:20px;
background-color:#b5daa2;
}
</style>
</body>
</html>Alguem pode me ajudar?
Aguardo!
Carregando comentários...