1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Ajuda em CSS: Centrar a página Verticalmente

Discussão em 'Web Development' iniciada por chantas, 30 de Maio de 2007. (Respostas: 12; Visualizações: 2358)

  1. chantas

    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:

    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! ;)
     
  2. ruimoura

    ruimoura Power Member

  3. chantas

    chantas Power Member

    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! :)
     
  4. ruimoura

    ruimoura Power Member

    O código do div centrado é:

    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: 30 de Maio de 2007
  5. msdevweb

    msdevweb Power Member

    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>
     
  6. chantas

    chantas Power Member

    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!
     
  7. chantas

    chantas Power Member

    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!
     
  8. ruimoura

    ruimoura Power Member

    É jogares com a width e a margin. tipo

    margin: 0 auto;
    width: mesmo que a parte superior;
     
  9. chantas

    chantas Power Member

    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!
     
  10. msdevweb

    msdevweb Power Member

    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.
     
  11. chantas

    chantas Power Member

    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
    CSS do Overlay do Lightbox

    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!!!! :)
     
  12. chantas

    chantas Power Member

    RESOLVIDO!! Apliquei um div Wrapper e agora está tudo 5* :)
     
  13. msdevweb

    msdevweb Power Member

Partilhar esta Página