Redimensionar página de acordo com tamanho do Broswer

[Rafael Queiroz 0]

Olá!

 

Não sei nada de JS e sei um pouco de HTML e CSS.

 

Eu criei um site em tamanho 1000px x 500px. Entretanto percebi que, quando diminuo o tamanho do broswer, algumas divs criadas simplesmente não aparecem, pq o div principal (que engloba todas as outras divs do site) está com o overflow: hidden. Outra coisa que percebi é que as divs começam a se sobrepor, caso o broswer seja diminuido de tamanho.

 

Eu tenho procurado a alguns dias já, mas não consigo achar em nenhum lugar um script que me ajude no que eu quero.

Eu gostaria de saber se tem como, conforme diminuo o tamanho do navegador, o meu site e todo o seu conteúdo diminua proporcionalmente. Não tem problema se o conteúdo ficar ilegível ou pequeno demais a ponto de parecer sumir da tela. O meu interesse, aqui, é que ele mantenha as proporções e posições dos divs exatamente iguais ao tamanho para que ele foi projetado.

 

Valeu pela ajuda! :)

[Rafael Queiroz 0]

Ah, não sei se ajuda alguma coisa (não entendi direito o que o cara quis dizer), mas eu achei algo que fala de redimensionamento de página de acordo com o tamanho do navegador aqui nesse link: http://javascript.about.com/library/blanim17.htm

Tentei fazer, mas não funcionou aqui..

[Henrique Barcelos 290]

Isso não eh com Javascript, procure por Layout Líquido...

 

Vou mover o tópico para a área específica...

 

Javascript/DHTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Webstandards

[Thiago Retondar 18]

Mas vamos lá... É necessário esse overflow na div que engloba tudo?

 

O site vai ter um conteúdo certo, ou vai ser "aleatório", ou seja, vão ter mais conteúdos? Se for "aleatório", não use height fixo, use auto.

 

Olhe um tutorial » http://forum.imasters.com.br/index.php?/topic/347842-layout-liquido/

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Rafael Queiroz 0]

Então, Thiago. O site vai ter um conteúdo certo.

Assim, a página principal abre somente o fundo com um menu que fica no centro da página. Conforme eu clico nos links do menu, o conteúdo dessa seção aparece em volta do menu.. Para isso, estou usando um script de hide/show divs que achei na internet. Mas, para isso, tenho que determinar o valor dessas divs escondidas com um valor position: absolute, e determinar sua posição no site. Entretanto, quando diminuo o navegador, as divs com valor absoluto somem do campo de visão da div principal.

Como eu estou utilizando um background-image pra div "container" (a div que engloba tudo), e eu quero que ela fique sempre do mesmo tamanho, acredito que eu tenha que definir um valor fixo pra ela. (Não sei se estou falando besteira aqui.)..

 

Eu gostaria, na verdade, que o site diminuisse de tamanho de acordo com o tamanho do navegador. Ou seja, como se fosse uma imagem. Conforme diminuo o tamanho do navegador, tudo diminui (a fonte, os divs, as figuras que tem no site, etc.). Isso é possível?

 

valeu! :)

[Thiago Retondar 18]

Não entendi quase nada... =X

 

Pode postar o link para eu ver melhor sobre o que está falando?

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[angelorubin 142]

Bom dia,

 

Você pode deixar tudo que citou (as fontes, div's e as figuras) redimensionáveis através do CSS conforme a resolução do navegador do usuário.

 

Porém, no caso das figuras vão lhe causar problemas, pois quando redimensionadas perdem a qualidade e ficam distorcidas normalmente.

 

Uma solução é utilizar arquivos de imagens que se repitam (por exemplo para o background), fora isso imagens lhe causarão problemas quando redimensionadas.

 

Espero que ajude.

[GabrielFerrari 41]

Caso alguém caia no tópico procurando por redimencioar a div de acordo com o espaço livre do navegador

Fica ai um código que uso http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

window.onload = function(){
larg = getWidth().toString();altu = getHeight().toString();	
function getWidth(){return window.innerWidth ? window.innerWidth :
document.documentElement ? document.documentElement.clientWidth :
document.body ? document.body.clientWidth :
window.screen.width;
}
function getHeight(){
return window.innerHeight ? window.innerHeight :
document.documentElement ? document.documentElement.clientHeight :
document.body ? document.body.clientHeight :
window.screen.height;
}
document.getElementById('nome da sua div').style.width = larg + 'px';
document.getElementById('nome da sua div').style.height = altu + 'px';
}

[Thiago Santos_1038 0]

Oi boa tarde... sou novo em foruns...

e tbm em programação... rs

tem como você me orientar Gabriel aonde eu colo esse script e explicar sobre o Larg e Alt e os 'px' rsrss

 

Obrigadooo