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!
Tira o rodapé de dentro da div tudo para ver se fica como você quer
Há uma pequena divergência na área útil para renderização.
O seu site cabe corretamente em uma altura de 768px, por exemplo. Porém, há que se considerar a barra de título, endereços e abas, além de eventuais abas adicionais do seu navegador, quais diminuem a área útil, ou 'viewport' do navegador. O mesmo vale para largura. Quando não há a barra de rolagem, considera-se apenas a largura do navegador, que pode ou não dispor de bordas. Quando há a barra de rolagem, existe a divergência, inclusive quanto ao estilo da barra aplicada.
Pelo testador, você admite que a área útil seja de 768 pixels (que foi tomado por exemplo). Para um ambiente de teste real, você deveria diminuir desse valor, todo e qualquer elemento que possa influenciar nessa área.
Uma forma de verificar quanto espaço você tem disponível, é através da propriedade availableHeight via javascript:
window.onload = function(){
alert('Você possui ' + screen.availableWidth + 'x' + screen.availableHeight + 'px disponíveis para renderização');
}
Achei que só colocando o position relative e absolute nos items com o rodapé em bottom:0 fosse resolver
Mas falta alguma coisa ai, e não sei o que é
Quando estou testando local em minha tela ele fica assim: http://www5.xpg.com.br/image.php?u=www.cinechina.xpg.com.br/imasters/tela1.jpg
Tenho aqui local um código do Evandro que testa todos os tipos de resolução, quando coloco a mesma resolução que meu PC tem ele me mostra assim: http://www5.xpg.com.br/image.php?u=www.cinechina.xpg.com.br/imasters/tela2.jpg
Ou seja, no teste de resolução está correto mas o outro não
Em qual devo confiar mais? Será que está correto pelo meu código??
Aguardo