Jump to content
rjsma

Ajustar o site para todas as resoluções de ecras

Recommended Posts

rjsma

Boas,

Tenho aqui um problema ao ajustar um site que fiz para todas as resolucoes de ecras.Pelo o que vi e pelo o topico que vi já aqui na pap deve ser uma coisa deste genero mas nao esta a resultar .


body{
width:100%;
height:100%;
}

Uma maozinha nisto?

Share this post


Link to post
Share on other sites
mjamado

Boas,

Tenho aqui um problema ao ajustar um site que fiz para todas as resolucoes de ecras.Pelo o que vi e pelo o topico que vi já aqui na pap deve ser uma coisa deste genero mas nao esta a resultar.

Sim, não e mais ou menos... :cheesygrin:

Em primeiro lugar, que doctype estás a usar? Alguns, nomeadamente os strict, não contemplam altura, isto é, o corpo tem sempre a altura do conteúdo. É possível fazer alguns hacks para forçar uma altura mínima de 100% no body, mas não costuma ser boa política. Para arrumar com o assunto da altura, não te preocupes em demasia: o próprio conteúdo se encarregará de empurrar o fundo para lá da janela do browser.

Quanto à largura, nunca te esqueças que, apesar de teres definido a largura do body como 100%, se o somatório das larguras absolutas dos conteúdos interiores for superior à largura do browser, o body vai esticar para acomodar tudo. Verifica isso primeiro. O ideal é, se começas a usar %, continuas a usar %, sempre, em todas as tags.

Depois, e como falas em "todas as resoluções de ecrãs", penso que estarás a contemplar, também, dispositivos móveis, certo? Se for o caso, lembra-te que a dimensão é bem menor que o normal; como tal, a maioria das vezes, precisa de um layout diferente - normalmente, até mais do que um, dependendo se está ao alto ou deitado, ou até se é quadrado. Podes usar css media queries para controlar que folhas de estilo carregar, consoante as dimensões e orientação actuais.

Para finalizar, lembra-te, também, que existe um limite para a largura de um texto que seja confortável de ler. Linhas demasiado compridas fazem com que o olhar "dance" ao mudar de linha, o que vai frustrar e irritar os utilizadores com ecrãs de 22 polegadas. E nós não queremos isso. Dá um max-width, em ems (aconselhado) ou pixels, à zona principal, e ajusta o resto do layout para ter em conta as situações limite de mínimos e máximos dessa zona.

Anyway, para algo mais concreto, é preciso o (x)HTML e o resto da CSS...


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Share this post


Link to post
Share on other sites
rjsma

Estou a usar este doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Não estou a incluir os dispositivos moveis, só queria fazer de uma maneira que o site aparece-se sempre da mesma maneira consoante o tamanho do ecra

Abraço

:cheesygrin:

Share this post


Link to post
Share on other sites
mjamado

Estou a usar este doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Se não estou em erro, nenhum dos XHTML respeita a altura sem hacks. Isso deve estar na documentação da W3C, mas não estou por aí além inclinado para ler documentos técnicos a esta hora...  :)

De qualquer das formas, e como já disse, não te preocupes com a altura - conforme fores metendo conteúdo, ele vai crescendo e empurrando o fundo para fora de qualquer altura de browser...

Não estou a incluir os dispositivos moveis, só queria fazer de uma maneira que o site aparece-se sempre da mesma maneira consoante o tamanho do ecra

OK, então o que tu queres é o inverso do que eu estava a pensar - é fazer com que a largura seja sempre constante, independentemente do tamanho do browser, certo? Isso é bastante mais fácil, basta colocares um div com largura definida em pixels (e uns margins auto à direita e à esquerda para ficar centrado) e pronto.

Ou ainda não apanhei bem o problema?


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Share this post


Link to post
Share on other sites
rjsma

Não posso fazer isso porque tenho conteudo espalhado pela a pagina toda.So queria que o site aparecesse sempre da mesma maneira em todos os ecras, dos mais pequenos aos maiores.Pensava que era width:100%; no body mas não resultou.

Share this post


Link to post
Share on other sites
Cynary

Tem que haver uma maneira de redimenzionar/ajustar o site conforme a largura do ecra  :)

Tipo este http://www.compal.pt/#

Usa o espaço todo e consegue ajuastar-se consoante o tamanho do ecra

Tentaste ver o código?

Esse site usa javascript para ajustar a largura do ecrã (actualmente, funciona a maior parte das vezes, mas por segurança e complexidade, é melhor usar HTML/CSS para isso ...). Basicamente, verifica a largura do browser. Se for acima de um tamanho mínimo (no caso deles 600px), ajusta a largura do objecto flash (nota que não mexe no body, mas sim no objecto flash!), se for abaixo, coloca a largura em 600px.

Aconselho-te a usar uma div como te foi sugerido :)

Percebi que queres mexer no body, mas é fácil -- basicamente, todo o body estará dentro dessa div, substituindo-te esta o body! Facilita muito o trabalho, em termos de centrar se for preciso -- bom quando queres uma largura fixa -- ou de controlar a largura do corpo.

Para fazeres isso, tens algo como:

<html>

...

<body>

<div>

<!-- Código do body aqui! -->

...

</div>

</body>

Quanto à altura, não te preocupes, que isso é controlado pelo conteúdo :) .

Share this post


Link to post
Share on other sites
rjsma

sim, já tinha uma div global no meu codigo.O problema se por o width:700px;  e um margin:0 auto; por exemplo, o conteudo que tenho perto das margens vai-se a vida.Outra situação defino a div global com uma largura de 700 px e se o ecra que esta a visualizar o site for 14 polegas ou ainda mais pequeno, como seria?

Já estou é todo confuso, pensava que era um assunto mais facil do que parece 😲

Share this post


Link to post
Share on other sites
yoda

sim, já tinha uma div global no meu codigo.O problema se por o width:700px;  e um margin:0 auto; por exemplo, o conteudo que tenho perto das margens vai-se a vida.Outra situação defino a div global com uma largura de 700 px e se o ecra que esta a visualizar o site for 14 polegas ou ainda mais pequeno, como seria?

Já estou é todo confuso, pensava que era um assunto mais facil do que parece 😲

Com uma div centrada, o site não se vai ajustar se o ecrã for menor que a largura da mesma. Antes de te preocupares com isso, preocupa-te em tentar ver se realmente vale o esforço e se esse tal layout vale a pena.

Share this post


Link to post
Share on other sites
rjsma

Eu compreendi, com a div centrada em ecras mais pequenos rouba e as margens deixadas e assim nao prejudica o conteudo.O que me está a fazer confusao e que existe montes de sites que ocupa a pagina toda sem deixar a margem nas laterais e ficam perfeitos consoante a tela e não me parece que se utiliza so javascript para essa efeito.

Share this post


Link to post
Share on other sites
mjamado
Já estou é todo confuso, pensava que era um assunto mais facil do que parece 😲

Há livros inteiros à volta de designs líquidos, elásticos e fixos.


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Share this post


Link to post
Share on other sites
mjamado

Eu compreendi, com a div centrada em ecras mais pequenos rouba e as margens deixadas e assim nao prejudica o conteudo.O que me está a fazer confusao e que existe montes de sites que ocupa a pagina toda sem deixar a margem nas laterais e ficam perfeitos consoante a tela e não me parece que se utiliza so javascript para essa efeito.

O da Compal só mete JS porque tem um objecto não-standard pelo meio. Se todo o teu conteúdo for (x)HTML válido, e todos esses elementos forem construídos sob regras de design líquido, o design vai ajustar a qualquer resolução.


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Share this post


Link to post
Share on other sites
rjsma

Há livros inteiros à volta de designs líquidos, elásticos e fixos.

É capaz de me indicar um bom e em portugues?

Share this post


Link to post
Share on other sites
mjamado

É capaz de me indicar um bom e em portugues?

"E" ou "ou"? :) Em português, não conheço nem um... Bom, mas em inglês, tens o (apropriadamente chamado) Flexible Web Design: Creating Liquid and Elastic Layouts with CSS. Procura nas várias Amazons até encontrares o mais barato.


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Share this post


Link to post
Share on other sites
mjamado
Sao quase 30 euros, fora os portes de envio que deve ser um balurdio por ser de outro pais.

Já viste na francesa e na alemã? Costuma ser mais barato do que nas outras, e os portes também devem ser bem menores...

Acha que consigo aprender bem na internet sobre layouts flexiveis?

Conseguir, consegues, mas tens que já ter um conhecimento sólido de CSS - sabes como é a malta a escrever sobre coisas novas na 'Net: parte sempre do princípio que quem está a ler aquilo tem os conhecimentos anteriores em dia.


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Share this post


Link to post
Share on other sites
rjsma

Vou ver 1º se consigo pescar alguma coisa na internet, em ultimo caso terei de compra o livro.

Obrigado pela a ajuda

:)

Share this post


Link to post
Share on other sites
taviroquai

Site da compal... tentei abrir aqui num recem instalado Ubuntu...

Para visualizar este site precisa do plug - in Flash 9.0.0

Para fazer o download do seu plug-in clique na imagem. Notícias Compal

:cheesygrin:

Anyway... penso que online tens informação que precisas para ler sobre CSS... pelo menos comigo tem sido "suficiente"... quando não consigo resolver algo, pergunto aqui na comunidade ou no Google...

http://maujor.com/tutorial/sintaxetut.php

http://pt-br.html.net/tutorials/css/

Na pratica... usa o firebug para testares diferentes regras...

https://www.youtube.com/embed/FsX6qwQqGgQ?feature=oembed

Para o IE, pelo menos no 8, já traz a ferramenta de programação...

https://www.youtube.com/embed/DRdhertDzgM?feature=oembed

Espero ter ajudado...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.