Ajustar pagina

ti17

Power Member
Boas a todos,

é assim, eu estou a fazer uma pagina, e já está publicada, mas quando vou ver a pagina noutro pc que não seja o meu, a página fica toda diferente, sei que é por causa da resolução de cada pc que isso acontece, e o que queria saber é se alguem me sabe explicar como faço para a minha página se ajustar automaticamente a todo o tipo de resoluções,

Por exemplo apartir de 800*600, todas as resoluções iguais ou superiores a esta.

obg e cumpts
 
Podes postar o link do site?

Por norma não dá para ajustar assim tão bem sites a tamanhos de resolução. Podes definir dimensões fixas (por 'px') ou então por percentagem. Porém, percentagens podem dar problemas caso o utilizador use resoluções mais baixas e/ou mais altas.

Recomendo o uso de tamanhos fixos para ecrãs de 1024x768, segundo a estatística da W3Schools 36% dos utilizadores usam esse. No entanto, 57% usam maior do que isso, porém o mais favorável aos utilizadores é pôr com o tamanho mínimo possível, já que quem tem maior resolução pode vê-los à mesmo, o mesmo não acontece ao contrário.

Espero que o futuro fique a tender para percentagens com tamanhos mínimos ( min-width: e min-height: em CSS), mas parece que o IE7 ainda não os conheçe lá muito bem.
 
O artigo no Dynamic Drive deu-me uma pequena ideia. Seria algo redundante criar um site para cada resolução, então parece compensar mais atribuir um StyleSheet diferente de acordo com a resolução (já que espero que uses CSS no teu site, ti17). Isto dará algo do género de
Código:
[FONT=Courier New]<script type="text/javascript">
//<!--

/*
Informação retirada de:
http://www.dynamicdrive.com/dynamicindex9/info3.htm
http://cse-mjmcl.cse.bris.ac.uk/blog/2005/08/18/1124396539593.html
*/

//primeiro cria a funcao que ira invocar o CSS
function _invocarEstilo(nome_do_css) [/FONT][FONT=Courier New]{
  if ( document.createStyleSheet() ) { //isto pergunta ao browser se conhece a funcao[/FONT][FONT=Courier New]
    document.createStyleSheet('http://www.o_teu_site.pt/estilos/' + nome_do_css);
[/FONT]  [FONT=Courier New] }[/FONT][FONT=Courier New]
  else { //senao tentara o mesmo por outros metodos[/FONT]
[FONT=Courier New]     //primeiro é criado uma tag de 'link', dado-lhes os seus atributos e entao adicionado ao codigo[/FONT]
[FONT=Courier New]    var newSS = document.createElement('link');
    [/FONT][FONT=Courier New]newSS.rel = 'stylesheet';
    [/FONT][FONT=Courier New]newSS.href = [/FONT][FONT=Courier New]'http://www.o_teu_site.pt/estilos/' + nome_do_css[/FONT][FONT=Courier New];
    [/FONT][FONT=Courier New]newSS.type = 'text/css';

    [/FONT][FONT=Courier New]document.getElementsByTagName("head")[0].appendChild(newSS);
  [/FONT][FONT=Courier New]}
}
[/FONT] 
[FONT=Courier New]
if (screen.width == 800 || screen.height == 600) //if 800x600
  _invocarEstilo('estilo_800x600[/FONT][FONT=Courier New].css[/FONT][FONT=Courier New]'); //aqui busca o css dando-lhe o nome do ficheiro que vai chamar

else if (screen.width == 640 || screen.height == 480) //if 640x480
[/FONT][FONT=Courier New]  _invocarEstilo('[/FONT][FONT=Courier New]estilo[/FONT][FONT=Courier New]_640x480[/FONT][FONT=Courier New].css[/FONT][FONT=Courier New]');[/FONT]
[FONT=Courier New]
else if (screen.width==1024||screen.height==768) //if 1024x768
[/FONT][FONT=Courier New]  _invocarEstilo('[/FONT][FONT=Courier New]estilo[/FONT][FONT=Courier New]_1024x768[/FONT][FONT=Courier New].css[/FONT][FONT=Courier New]');[/FONT]
[FONT=Courier New]
else //if all else
[/FONT][FONT=Courier New]  _invocarEstilo('[/FONT][FONT=Courier New]estilo[/FONT][FONT=Courier New]_grande.css');[/FONT]
[FONT=Courier New]
//-->
</script>[/FONT]
 
Back
Topo