Tamanho de fonte proporcional ao componente em layout líquido

[Spyder.RV]

Estou montando um site com o layout utilizando DIV's, sem tabelas. Os tamanhos e posicionamentos de todos os objetos das páginas são em percetual, dando uma idéia de layout líquido. Ainda tem alguns ajustes mas tá ficando bom, pois independente da resolução do monitor do cliente, a página se ajusta.

O problema agora é com o tamanho das fontes, que não acompanham o ajuste de tamanho das DIV's ou dos objetos.

Alguém sabe alguma maneira de "travar" o tamanho da fonte para que fique sempre na mesma proporção do componente ao qual ela faz parte?

[.Andreia.]

Mas os tamanhos das fontes dos textos não estao com valores fixados?

[Spyder.RV]

Mas os tamanhos das fontes dos textos não estao com valores fixados?

É claro que estão! E é justamente aí que está o problema...

Imagina o cenário

Eu tenho uma DIV definda com 300px de Largura e Altura e tenho um texto dentro dela com tamanho 10px e o comprimento desse texto em tamanho 10px é 200px. Quando eu converter essa div para percentual, em 800x600, ela vai ter uma largura de 37,50%.

Em 1024x768, essa DIV a 37,5% vai ter 384px e não 300px e em resoluções maiores, o tamanho em percentual convertidos para px vai ser maior ainda.

Só que o texto, como está setado em 10px, vai continuar com seu comprimento total em 200px.

O que eu quero saber é se existe alguma maneira de fixar o tamanho das fontes de maneira proporcional ao tamanho do seu objeto pai, no caso desse exemplo, uma DIV. Assim; quando a DIV crescer, o tamanho da fonte cresceria proporcionalmente à DIV e o visual da página seria muito semelhante em qualquer resolução.

[KaKarotto]

Você pode definir o tamanho da fonte também com porcentagem.

[Spyder.RV]

Você pode definir o tamanho da fonte também com porcentagem.

Falai KaKarotto, tudo beleza?

Eu já estou tentando fazer isso mas não tá dando certo.

Olha só esse exemplo: http://2008.laboratoriohormonal.com.br/

Os textos estão a 100%, menos no rodapé onde tem o texto Este está hospedado nos servidores da: Ultrario...

No rodapé está configurado pra rodar a 62,5%. Roda bem a 1024x768, mas em 800x600 estoura.

[KaKarotto]

É....trabalhar com posição absoluta é complicado ...

O que acontece no seu caso é que o div footer perde muito em tamanho quando vizualizado em 800x600. Ele estoura pois não cabe mesmo as letras li naquele espaçozinho....A área do site está definida já e o que for maior que ela é escondido (overflow:hidden no #areaUtilsite).

Você pode diminuir o tamanho do div da coluna da esquerda e diminuir o top do footer, pra uns 88% mais ou menos...Consequentemente você vai ter que diminuir o espaçamento "top" do div dentro do footer.

Eu vou te dar um conselho, se quiser pegue. Não trabalhe com posições absolutas...dão muito trabalho. Existem certos momentos em que você deve utilizar o position:absolute...quando? Não sei, depende de projeto pra projeto, mas a hora que você precisar dele você vai saber.

Nesse caso eu prefiro utilizar sempre posições relativas, assim o conteúdo vai se ajustando conforme o tamanho das letras e conforme o tamanho do div que o contorna.

Eu digo pra você não utilizar posições absolutas, porque após resolver esse problema, você vai começar a ter outros, principalmente quando começar a inserir o conteúdo...aliás, eu de você inseria-os já, se você não tem ainda o conteúdo, vá para um site que gere um conteúdo pra você e teste no seu layout. Não deixa pra colocar o conteúdo só no final...vai te dar uma boa dor de cabeça...

Outra coisa...EU prefiro fazer os layouts liquidos em resolução baixa, 800x600, para só depois testar nas resoluções altas...Isso porque é mais facil acontecer erro da forma contrária, quando você faz um site em 800x600 liquido ele no minimo vai ficar com um espaçozinho a mais em algum lugar, muitas vezes imperceptível.

Ok? Pergunta minha, está usando algum framework CSS?

Akeleabrasssss

[Spyder.RV]

É....trabalhar com posição absoluta é complicado ...

O que acontece no seu caso é que o div footer perde muito em tamanho quando vizualizado em 800x600. Ele estoura pois não cabe mesmo as letras li naquele espaçozinho....A área do site está definida já e o que for maior que ela é escondido (overflow:hidden no #areaUtilsite).

Você pode diminuir o tamanho do div da coluna da esquerda e diminuir o top do footer, pra uns 88% mais ou menos...Consequentemente você vai ter que diminuir o espaçamento "top" do div dentro do footer.

Eu vou te dar um conselho, se quiser pegue. Não trabalhe com posições absolutas...dão muito trabalho. Existem certos momentos em que você deve utilizar o position:absolute...quando? Não sei, depende de projeto pra projeto, mas a hora que você precisar dele você vai saber.

Nesse caso eu prefiro utilizar sempre posições relativas, assim o conteúdo vai se ajustando conforme o tamanho das letras e conforme o tamanho do div que o contorna.

Eu digo pra você não utilizar posições absolutas, porque após resolver esse problema, você vai começar a ter outros, principalmente quando começar a inserir o conteúdo...aliás, eu de você inseria-os já, se você não tem ainda o conteúdo, vá para um site que gere um conteúdo pra você e teste no seu layout. Não deixa pra colocar o conteúdo só no final...vai te dar uma boa dor de cabeça...

Outra coisa...EU prefiro fazer os layouts liquidos em resolução baixa, 800x600, para só depois testar nas resoluções altas...Isso porque é mais facil acontecer erro da forma contrária, quando você faz um site em 800x600 liquido ele no minimo vai ficar com um espaçozinho a mais em algum lugar, muitas vezes imperceptível.

Ok? Pergunta minha, está usando algum framework CSS?

Akeleabrasssss

Valeu pelas observações, vão ser muito úteis; sinal q você manja mesmo desse negócio. Eu ainda estou começando (e sofrendo)...

Quanto à sua pergunta se estou usando framework CSS... Não estou usando nenhum não. estou digitando tudo "na unha mesmo" mesmo. Aliás, estou usando sim, é o framework "unhex 2.0" heheheh :laugh:

Abração

[KaKarotto]

Unhex 2.0 hauhuahauuhauhaua

Faz bem, usar framework pra Css não é uma boa na minha opinião. Eu achei que estava pois o código está em inglês. Eu costumo também fazer em inglês meus códigos, não é costume de todo mundo por isso minha dúvida.

Outra coisa que esqueci de comentar...faça primeiro no FF e vai testando no IE. Nunca o contrário...

Outra pergunta minha, você usa photoshop no pc da configuração da sua assinatura? Se usar, eu gostaria de saber se roda bem...

Visite o site do maujor.com lá tem muitas dicas interessantes. Você chega até a se perder...leitura recomendada pra quem está começando, pra quem está no meio e pra quem está no fim rsrsrsrs.

Akeleabrassssss

[Spyder.RV]

Unhex 2.0 hauhuahauuhauhaua

Faz bem, usar framework pra Css não é uma boa na minha opinião. Eu achei que estava pois o código está em inglês. Eu costumo também fazer em inglês meus códigos, não é costume de todo mundo por isso minha dúvida.

Outra coisa que esqueci de comentar...faça primeiro no FF e vai testando no IE. Nunca o contrário...

Outra pergunta minha, você usa photoshop no pc da configuração da sua assinatura? Se usar, eu gostaria de saber se roda bem...

Visite o site do maujor.com lá tem muitas dicas interessantes. Você chega até a se perder...leitura recomendada pra quem está começando, pra quem está no meio e pra quem está no fim rsrsrsrs.

Akeleabrassssss

estou usando toda a swite CS3 e tá rodando de boa...

Sempre testo no FF, depois nos outros... hehehee