[Resolvido] Posicionar layout

[pulao 0]

boa tarde gostaria de saber como faço para ajietar meu layout para ficar como essa pagina http://www.cotemig.com.br/, nesse caso em resolução alta o corpo principal fica no centro da pagina com o fundo verde, ja em resolução baixa o fundo verde desaparece e fica so o corpo principal...

 

ate agora tenho esse codigo

#container{
  width:980px;
}

#principal {
margin:auto;
float:left;
width:100%;
height:1000px;
padding: 5px;
margin:0 auto;
text-align: left;
border: 0px solid #EAEAEA;
background-image:url(imagens/fundo.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
}

#esquerda{
float:left;
width:0%;
height:1000px;
background-color:#ffffff;

}
#direita{
float:left;
width:0%;
height:1000px;
background-color:#ffffff;

}

ele funciona bem e resolucao baixa o corpo principal fica centralizado, ja em resolução alta o corpo principal fica na esquerda da tela...

desde ja agradeço a atenção!

[Giovani 104]

pulao, o site está centralizado e o rodapé está em 100%.

 

Na #principal, que engloba o site, está dessa forma:

#principal {
   background: none repeat scroll 0 0 #FFFFFF;
   border-bottom: 1px solid #D1D1D1;
   margin: 0 auto 20px;
   overflow: hidden;
   padding: 0 10px;
   width: 980px;
}

[pulao 0]

deu certo e centralizou a pagina, mas sabe me dizer porque os links em resolução baixa sairam do lugar?

[Giovani 104]

Quais links não estão no lugar?

[pulao 0]

#principal {
margin:auto;
float:left;
width:100%;
height:1000px;
padding: 5px;
margin:0 auto;
text-align: left;
border: 0px solid #EAEAEA;
background-image:url(imagens/fundo.png);
background-repeat: no-repeat;

background-attachment: scroll;
background-position: center;





}

#esquerda{
float:left;
width:0%;
height:1000px;
background-color:#ffffff;

}
#direita{
float:left;
width:0%;
height:1000px;
background-color:#ffffff;

}



#banner{
position:absolute;
top:290px;
left:250px;
}
#login{
position:absolute;
top:20px;
left:750px;
}

#menu{
position:absolute;
left:520px;
top:240px;
}

#newsletter{
position:absolute;
top:800px;
left:730px;
}

.botao1 {
background-color:#B0C4DE;
font: 12px Verdana, serif;
font-weight:400;
color: green;
}
.campos {
background-color:white;
font: 13px Verdana, candara;
color:	#548B54;
margin-right: 02px;
}td img {display: block;}


.facebook  {
position:absolute;
top:793px;
left:440px;
margin:0px;
padding:0px;
}
.facebook a, .facebook a:visited {
font: bold 12px/24px arial, helvetica, sans-aerif;
padding:0px;
text-decoration: none;
text-align:center;
color:green;
background-image: url(imagens/face.jpg);
width:25px;
height:25px;
display:block;
}

 

entao esse css posiciona os links na tela, daí mudo a resolução e fica tudo zuado

[Giovani 104]

pulao, recomendo que leia, atentamente, esse tópico: Como criar um tópico para o seu problema.

[pulao 0]

certo

[pulao 0]

Resolvido joguei em tabelas e esta quase tudo certo agora !

[Giovani 104]

Não sei os outros, mas eu ainda não entendi bem o que você quer :(

 

Tabelas devem ser usadas quando falamos em dados tabulares, se esse for o caso você está correto, caso contrário seu código estaraá errado.

Resolvido joguei em tabelas e esta quase tudo certo agora !