[Resolvido] Mudando o margin top da div

[Davicamarinha 0]

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?

[brcontainer 16]

Ola amigo poderia colocar o HTML, derrepente é algo simples que por CSS mesmo poderemos resolver.

Atenciosamente Silverfox.

[Davicamarinha 0]

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.

[William Bruno 1501]

#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

[Davicamarinha 0]

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)

[William Bruno 1501]

mostre como você fez.

[Davicamarinha 0]

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);
	
}

[William Bruno 1501]

beleza.. tá certinho.. tem um link para o site?

 

ou o html+css completo para vermos como ficou ?

[Davicamarinha 0]

Link do site como ficou: http://www.gp1motos.com.br/site/

[William Bruno 1501]

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.

[Davicamarinha 0]

funcionou...