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]