Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia a todos,
eu estou com um dilema, eu tenho uma div, que é o meio do site, e queria q ela mudasse de posição de acordo com a resolução do monitor, ou seja, ficasse sempre no meio da tela (algo meio layout elastico). Tentei fazer por CSS usando %, mas não ficou do jeito que eu queria. Ai pensei em fazer via javascript, tentei algo assim:
<script language="JavaScript">
if(screen.height==900){
alert("A resolução do seu monitor é:"+screen.height)
document.getElementById("meio").style.marginTop = "10px";
}
</script>
Mas não funcionou, alguem pode me ajudar com isso?
Mais fácil postar o site: http://www.gp1motos.com.br/site/
o banner em flash deveria se adaptar a resolução do monitor, ficando sempre ao meio, sem ficar por cima da barra do menu. O problema é que em CSS se eu usar %, ele não funciona como deveria, a diferença de posição é minima. Por isso queria fazer um esquema com valores fixo e javascript.
#container{
position: absolute;
width: tantos px;
height: tantos h px;
left: 50%
margin-left: -tantos px/2;
top: 50%
margin-top: - tantos h px/2;
}assim seu site ficará centralizado sempre.
para isso, margin-left deve ser metade negativa do width, e margin-top, metade negativa do height
Funcionou em parte, ele centralizou horizontalmente, mas verticalmente ele jogou a div la para cima, cortando pela metade a div (metade para fora do monitor)
mostre como você fez.
Segue como eu fiz.
div#meio{
position:absolute;
width:931px;
height:410px;
left:50%;
margin-left:-465px;
top:50%;
margin-top:-205px;
background-image:url(images/preto.png);
}beleza.. tá certinho.. tem um link para o site?
ou o html+css completo para vermos como ficou ?
Link do site como ficou: http://www.gp1motos.com.br/site/
o absolute do container div#tela { está atrapalhando.
a div#meio precisa se posicionar apartir do body do documento.
defina um min-height para os containers, pois se o cara tiver numa resolução muito pequena, vai estragar mesmo.
funcionou...
Ola amigo poderia colocar o HTML, derrepente é algo simples que por CSS mesmo poderemos resolver.
Atenciosamente Silverfox.