Help
Mais um codigo para a galera se divertir.
Independendo da resolução de vídeo do cliente, é possível ajustar o site para que o mesmo fique sempre centralizado na janela. Veja aqui como fazer isso!
Inicialmente, o seguinte código ficará dentro do <HEAD> da página:
QUOTE
<script language="JavaScript">
function alinhamento(){
var w=document.body.clientWidth;
var calc = w-document.all['alinha'].offsetWidth;
alinha.style.left=calc/2
}
</script>
function alinhamento(){
var w=document.body.clientWidth;
var calc = w-document.all['alinha'].offsetWidth;
alinha.style.left=calc/2
}
</script>
Depois, a função criada será inserida dentro da tag <BODY> usando os eventos "onload" e "onresize"
QUOTE
<body onload="alinhamento()" onresize="alinhamento()">
Por último, deverá ser criada uma camada com posicionamento absoluto logo após a tag <BODY>.
A mesma deve ser fechada antes da tag </BODY>
QUOTE
<body onload="alinhamento()" onresize="alinhamento()">
<div id="alinha" style="position:absolute">
*********** o site vai aqui ***************
</div>
</body>
<div id="alinha" style="position:absolute">
*********** o site vai aqui ***************
</div>
</body>
Pronto, com isso o seu site está alinhado em qualquer tipo de resolução !
Explicando:
A variável w capturará o Width disponível no browser do cliente.
A variável calc pegará o valor da variável w e irá subtrair do Width da camada alinha
Por que isso?
o Width do browser do cliente menos o Width da camada que cobre toda a página, mostrará quantos pixels ficaram de fora do site, sendo assim, podemos trabalhar com eles e aproveitá-los para alinhar o site.
Agora, na linha alinha.style.left=calc/2, eu atribuo o valor gerado na variável calc e divido por 2, para pegar o valor dessa divisão e colocar no "left" da camada alinha, pois como ela está com posicionamento absoluto, posso posicioná-la onde eu quiser. Dessa forma, o valor que ficou de fora do site foi dividido e uma das metades dele foi utilizado para criar um espaço à esquerda da camada, na qual esse espaço será sempre relativo ao tamanho da resolução, ficando sempre alinhado seja qual for a resolução de vídeo do pc!
O mesmo pode ser feito com o Height da página, usando a mesma lógica, na qual ficaria assim:
QUOTE
<script LANGUAGE="JavaScript">
function alinhamento(){
var w=document.body.clientWidth;
var h=document.body.clientHeight;
var calcw = w-document.all['alinha'].offsetWidth;
var calch = h-document.all['alinha'].offsetHeight;
alinha.style.left=calcw/2;
alinha.style.top=calch/2;
}
</script>
function alinhamento(){
var w=document.body.clientWidth;
var h=document.body.clientHeight;
var calcw = w-document.all['alinha'].offsetWidth;
var calch = h-document.all['alinha'].offsetHeight;
alinha.style.left=calcw/2;
alinha.style.top=calch/2;
}
</script>
Dessa forma, se o site ou uma imagem forem de dimensões bem pequenas, ficarão centralizados tanto em relação ao Width quanto em relação ao Height, como ja dito antes, "independendo da resolução de vídeo"
