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

Ajuda a centrar pagina

Discussão em 'Web Development' iniciada por Conspiracy, 14 de Dezembro de 2008. (Respostas: 8; Visualizações: 606)

  1. Conspiracy

    Conspiracy Power Member

    Viva pessoal!

    Então é assim. Estou a fazer um sitezeco e deparei-me com um problema que não estou a conseguir resolver com os meus básicos, remotos e superficiais conhecimentos de css e html :D
    Por isso gostava que me ajudassem a descobrir o problema e dentro das vossas possibilidades me indicassem uma forma de o resolver.
    O problema é não conseguir centrar o site!

    Isto foi feito em grande parte através do imageready sacando grande parte do código dele tb.:o

    Ele fica assim:
    [​IMG]




    Eu apostava na propriedade Position: absolute; de cada div no css, mas...

    Até deve ser básico mas pronto...
     
  2. slipknoize

    slipknoize 1st Folding then Sex

    Acrescenta este código ao CSS do main:

    Código:
    margin-right: auto;
    margin-left: auto;
     
  3. Conspiracy

    Conspiracy Power Member

    O main ficou assim:


    Mas o site continua alinha à esquerda! :(
    Já tinha testado com essas linhas no css, mas voltei a testar para ter a certeza. Limpei tb a cache do browser e fiz o ctrl+F5.
    continua aberto a sugestões, no entanto obrigado slipknoize ;)
     
  4. Otaku Ichise

    Otaku Ichise Power Member

    Cuidado ao usar muito o atributo "position absolute" normalmente evito usar a nao ser que tenha uma div escondida que seija pra mostrar em :hover, pois ai ja nao tem muitos meios de afectar mais alguma alteraçoes que queiras fazer.
     
  5. Conspiracy

    Conspiracy Power Member

    Pois, é mesmo ele que me está a lixar o esquema.
    Experimentei tirar esse atributo a todos os div e então ficaram todos alinhados na vertical, sem se organizarem para fazerem a pagina.
    Estou a tentar perceber qual devo escolher (absolute, fixed, relative ou static...).
    vou testar umas coisas a ver se percebo como funciona.
    Mais dicas são bem-vindas ;)
     
  6. Otaku Ichise

    Otaku Ichise Power Member

    Alguma coisa que precises posso ver por ti, tenho tempo livre ate fim de Dezembro :) se quiseres podes deixar ai uma copia do ficheiro html e o css (se for style externo) que eu posso verificar aqui nas calmas :)

    http://otaku_ichise.sitesled.com/ fiz isto sem o atributo "posição absoluta"
     
    Última edição: 14 de Dezembro de 2008
  7. Conspiracy

    Conspiracy Power Member

    Na verdade essas cópias estão no 1º post...

    Mas não era bem isso que pretendia. Não queria que "vomitassem" o código já feito!

    O que me faz confusão é o facto de tudo estar bem alinhado usando o atributo posição aboluta, pelo que percebi funciona atribuindo a cada div a sua posição em coordenadas de pixel. A confusão entra na parte em que tento colocar um div que "envolve" todos os outros e tentar centrar esse div.
    Pensei que todos os outros funcionasse na mesma, mas tomando as posições face ao novo div que os envolve.
    Ou seja, criei o #main e atribui-lhe dimensões e depois, como o slipknoize sugeriu, tentei fazer com que ele se ajustasse automaticamente ao browser com os atributos margin, levando consigo todos os outros que tomariam a sua posição absoluta dentro do #main! Mas isso não acontece. É aqui que fico preso.
     
  8. geoblast

    geoblast Power Member

    Experimenta atribuir ao main a position:relative;.

    Aí todos os restantes div's vão posicionar-se em relação ao main.
     
  9. Conspiracy

    Conspiracy Power Member

    Pois, era isso que faltava!

    Já tinha experimentado colocar no #main e não deu nada, pq entretanto tinha removido os atributos margin auto do #main!
    Mas agora com a tua dica voltei a tentar, e achei que teria lógica colocar os margin como já tinha dito.

    Bem, obrigado a todos, sem vocês ia ser complicado lá chegar, apesar de ser simples. Mas deu-me para estas brincadeiras e vou aprendendo algumas coisitas :D

    O css ficou com o #main da seguinte forma, e tive tb de acrescentar o body para tirar o espaço vazio por cima do site:


    No HTML já pude remover o aling="center" do #main, pq já não fazia la nada!
     

Partilhar esta Página