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

Ajustar à resolução

Discussão em 'Web Development' iniciada por aluno, 20 de Maio de 2006. (Respostas: 9; Visualizações: 3455)

  1. aluno

    aluno Power Member

    Boas

    Estou a fazer uma página que pretendo que fique toda no centro no écran, isto é, que o conteúdo fique sempre todo visível no écran sem necessidade de scroll bar.
    Para isso usei tabelas com alturas e larguras em % para que se ajustem a resoluções diferentes.
    No entanto, o tamanho das imagens não se ajusta.
    Há alguma forma de fazer com que a página se ajuste toda automaticamente à resolução?

    Obrigado :)
     
  2. keoshi

    keoshi Power Member

    O melhor mesmo é deixar as tabelas de lado e definir uma estrutura com tamanho relativo (%) para que se ajuste, mas não percebo bem a pergunta...as imagens não se ajustam? Podes mostrar um exemplo?
     
  3. aluno

    aluno Power Member

    Se puseres a resolução do teu ecran para 1024x768 vais ver a página como eu a quero.
    Se escolheres 800x600 vai-te aparecer a scroll bar porque o tamanho das imagens não se ajusta.. ficam grandes demais.
    Se escolheres uma resolução maior que a inicial as imagens ficam pequenas demais.

    http://tvtel.pt/yoga/LasTTry/LasTTry-A.html


    Eu já usei um código que resolve mas dá trabalho porque tens que fazer uma página para cada resolução:

    <script language="JavaScript1.2">
    if (screen.width==800||screen.height==600) //se for 800x600
    window.location.replace("index800x600.html")
    </script>

    Há alguma forma melhor?
     
  4. keoshi

    keoshi Power Member

    OK, com exemplo exacto é muito melhor :D

    Quando dizes scroll bar é só à vertical que te referes, certo?

    Se é só isso (e é o que eu penso) o problema é fácil de resolver:

    vê no código da página este excerto:
    Código:
    [FONT=monospace]
    [/FONT]<tr align="center" valign="middle">
        <td><p>&nbsp;</p>
          <p>&nbsp;</p>
    
    Retira esses dois parágrafos (<p></p>) e as imagens vão 'subir'. There, problem fixed!

    Se quiseres fazer mesmo bem limpa o código todo do body e mete apenas:

    Código:
    <div id="centro">
    <img src="moldura-Y.png" width="230" height="390" />
    <img src="moldura-Z.png" width="230" height="390" />
    
    <div class="copyright">
    Copyright   &copy; 2006<br />
    Todos os direitos reservados.</div>
    
    </div>
    
    E adiciona ao style no header o seguinte:

    Código:
    #centro {
    width:500px;
    margin-top: 35px;
    margin-right:0 auto;
    margin-left:0 auto;
    padding:0;
    }
    
    .copyright {
    text-align:center;
    margin-top:20px;
    }
    
     
  5. aluno

    aluno Power Member

    Deixa ver se é desta que me consigo explicar :007:

    O que eu queria perguntar era se dá para pôr uma página a ajustar-se automaticamente à resolução do ecran da pessoa que abrir a página, para assim a internet toda ver a página do tamanho que quiseres e sem nunca aparecer a scroll bar.
     
  6. keoshi

    keoshi Power Member

    OK, então segue o exemplo deste código e assim já percebes :)

    Código:
    <html>
    <head>
    <style type="text/css">
     .centrar {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 30%;
      height: 30%;
      margin: auto;
      background-color: ccc;
      color: white;
    } 
    </style>
    </head>
    
    <body>
    <div class="centrar">Este div está centrado.</div>
    </body>
    
    </html>
    
    Depois mudas os valores consoante as tuas necessidades.

    Espero ter ajudado!
     
  7. jaac

    jaac Power Member

    Se construiste a tua página bem, podes usar javascript para carregar diferentes css que se adaptem à resolução...

    Se tiveres a página mesmo bem feita, podes usar javascript para alterar o tamanho do width e heigth e fica tudo no sítio.
     
  8. aluno

    aluno Power Member

    Obrigado pelas dicas! :beerchug:
    Entretanto descobri uma outra solução para o que pretendia, que passa por fazer o site todo em flash. Os sites todos em flash ajustam-se automaticamente à resolução do ecran de quem o abrir (e até ao tamanho da janela do browser quando alternas entre diminuir e maximizar).
    Acho que me vou começar a dedicar mais ao flash.
    Será que já está suficientemente massificado para que ao teres um site todo em flash não corras o risco de uma grande parte das pessoas não o conseguir ver?
     
  9. Memphis

    Memphis Power Member

    O ideal é não fazer sites superiores a 760px de largura, assim dão sempre!

    Senão, as imagens principais ficam com 760px e o resto fica sempre igual e a repetir em fundo e já se ajusta à largura da página.

    Isto falando em larguras...
     
  10. Squillace

    Squillace Power Member

    Usar o Flash SÓ por uma questão de resolução é muito estúpido. Além disso, tens aqui todas as informações para conseguires fazer a coisa como deve ser. Para que o teu site se adapte automáticamente a todas as resoluções, tem que ser compatível. Um site carregado de imagens raramente será redimensionável. E segundo percebi aquilo que disseste mais acima ("...porque o tamanho das imagens não se ajusta..."), queres que as imagens se adaptem, o que é a pior coisa que podes fazer. As imagens tem que ser fixas. Se as aumentares ou reduzires, ficam distorcidas. Queres isso?
     

Partilhar esta Página