Layout com Porcentagem

[Ecos 0]

html, body {
margin: 0px;
padding: 0px;
height:100%;
background-image:url(../images/cima.png);
background-repeat:repeat-x;
background-position:top;
}

#all{
width:100%;
min-height:100%;
height:100%;
position:relative;
padding:0px;
margin:0px;
}

#header{
height:20%;
width:100%;
background-image:url(../images/crm.png);
background-position:center center;
background-repeat:no-repeat;
}

#middle{
width:100%;
height:80%;
background-image:url(../images/login.png);
background-position:center center;
background-repeat:no-repeat;
position:fixed;
}

#pos_form{
margin-top:21.5%;
}

 

Vou tentar explicar de uma maneira que todos entendam o que está acontecendo.

Tenho uma DIV que envolve toda a tela, #all.

Tenho uma que é o topo, #header.

Tenho uma que é o meio, #middle.

E tenho um formulário que posiciono ele no meio da DIV #middle, que é o formulário de login.

 

Na Div #middle, tenho uma imagem centralizada de fundo de 400px x 200px.

Criei uma tabela de 400px e centralizei na Div #middle para ficar na frente da imagem.

Daí no Form eu declarei um Margin-Top:20% para descer o Form. No FF 4.0 fica certo, mas no Chrome ele fica na risca da imagem.

 

Para verem:

 

Site

 

Testem nos navegadores que eu falei.

Não entendo porquê não funciona.

[Kaue Machado 0]

html, body {
margin: 0px;
padding: 0px;
height:100%;
background-image:url(../images/cima.png);
background-repeat:repeat-x;
background-position:top;
}

#all{
width:100%;
min-height:100%;
height:100%;
position:relative;
padding:0px;
margin:0px;
}

#header{
height:20%;
width:100%;
background-image:url(../images/crm.png);
background-position:center center;
background-repeat:no-repeat;
}

#middle{
width:100%;
height:80%;
background-image:url(../images/login.png);
background-position:center center;
background-repeat:no-repeat;
position:fixed;
}

#pos_form{
margin-top:21.5%;
}

 

Vou tentar explicar de uma maneira que todos entendam o que está acontecendo.

Tenho uma DIV que envolve toda a tela, #all.

Tenho uma que é o topo, #header.

Tenho uma que é o meio, #middle.

E tenho um formulário que posiciono ele no meio da DIV #middle, que é o formulário de login.

 

Na Div #middle, tenho uma imagem centralizada de fundo de 400px x 200px.

Criei uma tabela de 400px e centralizei na Div #middle para ficar na frente da imagem.

Daí no Form eu declarei um Margin-Top:20% para descer o Form. No FF 4.0 fica certo, mas no Chrome ele fica na risca da imagem.

 

Para verem:

 

Site

 

Testem nos navegadores que eu falei.

Não entendo porquê não funciona.

Você já tentou ao invés de aplicar o background à div middle, aplicar o background dentro de uma div dentro da div middle e usar essa div ao invés de uma tabela? E nessa div você aplica padding-top de acordo com sua necessidade.

[Ecos 0]

Não tentei. Se é o que eu entendi o que você falou.

 

================

Se vocês viram o site e começou a mudar é porquê eu estou mechendo.