Ajuda em CSS: Centrar a página Verticalmente

chantas

Power Member
Boas!

Tal como o titulo diz, eu preciso de centrar uma página verticalmente para que o site esteja no centro no ecrã do user...e isto porque estou a fazer um site sem tabelas, só com divs, e na resolucao de 1024*768 está td bem, mas quando aumento a resolucao para por exemplo 1280*1024 o footer fica muito em cima e nota-se um grande vazio em baixo que não é agradável em termos visuais... :(

Eis o meu css:

.largura {
margin:0 auto;
width:801px;
}

body {
background:#6a6a6a url(images/fundo.gif) 0px 4px repeat-x;
margin:0px;
padding:0px;
}

#header {
height:84px;
background:url(images/header.jpg) 50% 50% repeat-y;
margin-top:4px;
}


#corpo1 {
background:url(images/corpo1.jpg) 50% 50% repeat-y;
height:154px;

}

#corpo2 {
background:url(images/corpo2.jpg) 50% 50% repeat-y;
height:337px;
}

#footer {
background:url(images/footer.jpg) 50% 50% repeat-y;
height:25px;
}

Através do margin-top consigo centrar a página em 1280*1024...mas dps numa resolucao de 1024*768 fica mto em baixo!

Resumindo...o meu objectivo é que em resolucoes superiores a 1024*768 a página esteja centrada no ecrã!É possivel através de CSS? Se sim como??

Thanks in advance! :)

ps: se for preciso ponho aqui uma imagem do site..mas acho q já perceberam o problema! ;)
 
Vê o código da página seguinte para aprenderes a centrar tanto verticalmente como horizontalmente uma página/bloco/whatever:

http://www.mycelly.com/css_templates/css_template_11.htm

Já estive a olhar para o código dessa página mas não estou a conseguir aplicá-lo!ruimoura, podes dar-me o exemplo em como aplicar o código no div do body sff?É o que está a usar como imagem o fundo.gif! Se perceber um penso que já me desenrasco com o resto!

Obrigado! :)
 
O código do div centrado é:

#inhalt {
position:absolute;
height:200px;
width:400px;
margin:-100px 0px 0px -200px;
top: 50%;
left: 50%;
text-align: left;
padding: 0px;
background-color: #f5f5f5;
border: 1px dotted #000000;
overflow: auto;
}
Repara nas linhas do height e width para o tamanho da caixa, e depois para a posição centrada os atributos margin, top e left.

Por cada 100 pixels que adicionares ao height e width no div central, tens que adicionar 50 à margin top e left. Ex:

height:300px;
width:500px;
margin:-150px 0px 0px -250px;
 
Última edição:
ja respondi isso num reply a um post poucas linhas abaixo do teu... mas aqui vai, ve:
http://www.techzonept.com/showthread.php?t=157188

(...)


aqui o resumo mais importante:

Código:
<style>
#centrar {
 
position:absolute;
top: 50%; 
left: 50%;
width: 800px; /* comprimento da tua div/site (teras que ajustar para o teu site) */
height: 500px; /* altura da tua div/site (teras que ajustar para o teu site) */
margin-top: -250px; /* aqui defines com o resultado negativo da divisão por 2 da tua altura neste caso -(500/2)*/
margin-left: -400px; /* aqui defines com o resultado negativo da divisão por 2 do teu comprimento neste caso -(800/2)*/
 
}

</style>


depois:

<div id="centrar">
CONTEUDO DO SITE AQUI
nota que a div tem height=500 e width=800, logo não ultrapasses esses valores com o teu conteudo, ou corre tudo mal ;p
</div>
 
ja respondi isso num reply a um post poucas linhas abaixo do teu... mas aqui vai, ve:
http://www.techzonept.com/showthread.php?t=157188

(...)


aqui o resumo mais importante:

Código:
<style>
#centrar {
 
position:absolute;
top: 50%; 
left: 50%;
width: 800px; /* comprimento da tua div/site (teras que ajustar para o teu site) */
height: 500px; /* altura da tua div/site (teras que ajustar para o teu site) */
margin-top: -250px; /* aqui defines com o resultado negativo da divisão por 2 da tua altura neste caso -(500/2)*/
margin-left: -400px; /* aqui defines com o resultado negativo da divisão por 2 do teu comprimento neste caso -(800/2)*/
 
}

</style>


depois:

<div id="centrar">
CONTEUDO DO SITE AQUI
nota que a div tem height=500 e width=800, logo não ultrapasses esses valores com o teu conteudo, ou corre tudo mal ;p
</div>

Obrigado pela ajuda! E para o fundo tmb posso usar este método?? Pergunto isto pq o meu fundo está mesmo no "body" e não numa div!
 
Já coloquei o código que me deram ajustado para o tamanho do meu site dentro do style do "body" em que o site ficou optimo!Mesmo no meio do ecrã! :) Mas agora o meu ultimo problema (espero eu) é que o meu fundo tem tmb que estar centrado pq encaixa no header e no footer da página! O que tenho de fazer para q o fundo (background) fique igualmente centrado??

Cumps!
 
Já coloquei o código que me deram ajustado para o tamanho do meu site dentro do style do "body" em que o site ficou optimo!Mesmo no meio do ecrã! :) Mas agora o meu ultimo problema (espero eu) é que o meu fundo tem tmb que estar centrado pq encaixa no header e no footer da página! O que tenho de fazer para q o fundo (background) fique igualmente centrado??

Cumps!

É jogares com a width e a margin. tipo

margin: 0 auto;
width: mesmo que a parte superior;
 
É jogares com a width e a margin. tipo

margin: 0 auto;
width: mesmo que a parte superior;

Hmmm...desculpa mas não percebi!:'(

Eis como tenho agora o código:

body {
background:#6a6a6a url(images/fundo.gif) 0px 0px repeat-x;
position:absolute;
top: 50%;
left: 50%;
width: 801px; /* comprimento da tua div/site (teras que ajustar para o teu site) */
height: 600px; /* altura da tua div/site (teras que ajustar para o teu site) */
margin-top: -300px; /* aqui defines com o resultado negativo da divisão por 2 da tua altura neste caso -(500/2)*/
margin-left: -400.5px; /* aqui defines com o resultado negativo da divisão por 2 do teu comprimento neste caso -(800/2)*/

Podes dizer-me ao certo como faço isso neste código?? O site já está centrado, falta apenas o fundo.gif!

Thanks!
 
Hmmm...desculpa mas não percebi!:'(

Eis como tenho agora o código:



Podes dizer-me ao certo como faço isso neste código?? O site já está centrado, falta apenas o fundo.gif!

Thanks!

usas logo a seguir ao teu background:

background-position: X%, Y%;

onde o X% e Y% são as posições em percentagem da distancia que queres o fundo dos bordos da div. para estar sempre centrada na div podes usar background-position: 50%, 50% (valores iguais). e a tua imagem esta sempre no meio da div. para ajustares o teu fundo, é só mexeres nas percentagens, sabendo que 100% é tudo à direita para o x e no fundo para o y, o 1% é à esquerda para o x e no topo para o y. Brinca com os valores da percentagem e vais perceber o que falo.


abraço.
 
Quando eu pensava que já estava tudo mto bem resolvido, ou seja, tudo centrado como queria....fui até à secção de fotos do meu site onde tenho instalado o Javascript Lightbox 2.0 e reparo que agora que a página está toda centrada o "overlay" do lightbox está TODO MARADO :( Já andei às volta pelo css e pelo que percebi parece que existe um certo "conflito" entre o position do "body" e do "overlay"!

Aqui está o CSS que interessa para eu tentar resolver o caso:

CSS do Body
body {
background:#6a6a6a url(images/fundo.gif) repeat-x ;
margin:0px;
padding:0px;
background-position: center;
background-attachment:fixed;
position:absolute;
top: 50%;
left: 50%;
width: 801px; /* comprimento da tua div/site (teras que ajustar para o teu site) */
height: 600px; /* altura da tua div/site (teras que ajustar para o teu site) */
margin-top: -300px; /* aqui defines com o resultado negativo da divisão por 2 da tua altura neste caso -(500/2)*/
margin-left: -400.5px; /* aqui defines com o resultado negativo da divisão por 2 do teu comprimento neste caso -(800/2)*/
}

CSS do Overlay do Lightbox

#overlay{
position:absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}

Já tentei alterar várias definições sem sucesso!

Resumindo, com estas definicoes do "body" o site fica centrado às 1000 maravilhas...mas a partir do momento em que o site ficou centrado, o Lightbox ficou a aparecer de uma maneira esquisita em que o overlay não ocupa o ecra todo mas sim apenas meio ecrã...problema de position não é??

Peço mais uma vez a vossa ajuda para resolver este ultimo problema (espero eu....)

Thanks!!!! :)
 
Back
Topo