Centralizar conteúdo

[RodrigoGomes]

Estou tendo problemas em centralizar o conteúdo do meu site, aparentemente tudo funciona bem, menos em monitores pequenos.

vou tentar explicar, o meu DIV central fica por cima do DIV superior e do DIV inferior quando a área de exibição é menor. e eu gostaria que não ficasse por cima, e a página ficassem com barra de rolagem.

fiz uns desenhos pra tentar explicar melhor:

Layout Normal, em uma área de exibição grande:

Layout em uma área de exibição pequena

Layout na forma que eu gostaria que ficasse em uma área de exibição pequena

css:

#topo{
position: absolute;
width:100%;
height:80px;
background-color: rgba(0,0,0,0.8);
min-width:800px;
}
#rodape{
position: absolute;
bottom:0;
width:100%;
height:50px;
background-color: rgba(0,0,0,0.8);
min-width:800px;
}
#conteudo{
position: absolute;
left:50%;
top:50%;
margin:-215px 0 0 -385px;
width:770px;
height:460px;
background-color: rgba(0,0,0,0.8);
min-width:770px;
border-radius: 10px;
}

site: www.l2ouro.com

---

eu já tentei adiciona min-width:800px / min-height:600px no body e funcionava só a barra de rolagem, ela aparecia porem o conteúdo do site continuava ficando em cima das divs por terem posição absoluta..

alguém sabe o que devo fazer?

desde já agradeço!

Editado Novembro 30, 2010 por Vampyro

[_Vinny_]

Um dos problemas deve ser por causa de:

top:50%;

Em conteúdo, pois ele vai fazer o espaço no topo de acordo com o tamanho da janela. Tente mudar para um valor fixo em pixels.

[RodrigoGomes]

Um dos problemas deve ser por causa de:

top:50%;

Em conteúdo, pois ele vai fazer o espaço no topo de acordo com o tamanho da janela. Tente mudar para um valor fixo em pixels.

esta é a forma de "centralizar" o conteúdo, com um valor fixo é impossível centralizar..

talvez se eu fizesse o layout de outra forma, com mais divs..

mas sinceramente não imagino como faria isso, parece um problema sem solução.. talvez uma limitação de código..

[_Vinny_]

talvez se eu fizesse o layout de outra forma, com mais divs..

Poderia ser uma alternativa, mas teria um pouco mais de trabalho e bastante esforço.

Pelas imagens parece simples, mas o bicho pega na hora do vamos ver -.-'

Se precisar de ajuda nesta alternativa, basta pedir.

[priestknack]

não use position absolute, faça assim que não deforma,

<div>
<div style="margin:0 auto; width:800px; height:150px;">conteudo do top</div>
<div style="margin:0 auto; width:600px; height:300px;">conteudo do middle</div>
<div style="margin:0 auto; width:800px; height:150px;">conteudo do bottom</div>
</div>

depois visita meu site, tem tutoriais de programação (ainda poucos)... mas pode acrescentar muito.

http://www.beadletters.com.br

Editado Janeiro 11, 2011 por _Vinny_
Adicioner tag [code]

[Matheus Matos]

Não use position, e sim float.

Aula de Float: http://www.tableless.com.br/propriedade-float-do-css

Abraços