Autor Zpráva
Mati
Profil
Na stránkách www.translatorium.cz se snažím v hlavičce stránky vložit text, ale v různých prohlížečích se mi zobrazuje různě velký, takže v některých prohlížečích je malý a v některých přesahuje oblast hlavičky. Z toho co jsem nastudoval, jsem pochopil, že každý z prohlížečů zobrazuje velikost písma různým způsobem. Chtěl bych se zeptat, zda je možné zadat velikost písma tak, aby se text vešel do zvolené oblasti.
Str4wberry
Profil
A nemáte v nějakém prohlížeči nastavenou jinou velikost písma?

Obecně se na velikost písma nedá spoléhat. Tedy ideální je to udělat tak, aby se obsah vešel i v případě, že bude mít uživatel nastaveno větší písmo. V případě uvedeného webu by to znamenalo se rozloučit s absolutním posicováním hlavičky, potom nebude problém ji při větším písmu roztáhnout dolů.
Mati
Profil
To, že to je nastavením prohlížeče, to chápu a jsem s tím smířený a protože každý si to nastavení může udělat individuálně, tak jsem se tomu chtěl přizpůsobit.

Přišel jsem pouze na dvě možnosti: buď šířku přizpůsobit velikosti písma, jak navrhujete a jednotky zadat např. pomocí čtverčíků a nebo celou hlavičku vytvořit jako obrázek.

První způsob se mi nelíbil, protože jsem chtěl mít stránky široké cca 800px (teď už přesně nevím proč, ale nejspíš jsem to někde vyčetl na JPW) a důvod proč to tak mít mi přišel rozumný. Druhý způsob se mi nelíbí, protože stejně musím text nějak vložit pro případ, že má někdo vypnuté zobrazování obrázků a navíc se zbytečně stránky zvětší o obrázek, který se musí načítat.

Proto jsem chtěl najít způsob, jak mít možnost ovlivnit velikost písma podle velikosti oblasti do které ji chci zobrazit, jako je to možné u jiných značkovacích jazyků, jako je třeba TeX.
Str4wberry
Profil
Já to myslel tak, že se obsah bude natahovat na výšku. Takže stačí jen výšku natvrdo nenastavovat, ale nechat ji, ať se přizpůsobí. (To ale nebude fungovat, když je všechno absolutně posicované, tedy jsou elementy vyjmuty z toku dokumentu, takže nadřazený obal neví, jak má být vysoký, aby se do něj všechno vešlo.)

Mati
Profil
Děkuji za radu, zkusím to tak předělat. Vlastně jsem o tom už taky přemýšlel, ale nějak jsem si nebyl jist, zda se mi to podaří zkombinovat s tím obrázkem, tak jsem to nejdřív udělal absolutně pozicované, abych si ušetřil přemýšlení.
Str4wberry
Profil
Ono obrázek koneckonců naposicovat můžete (má pevnou výšku, není potřeba, aby něco ovlivňoval)*. Důležitý je ten text, který v závislosti na velikosti písma má výšku proměnlivou.

*) Případně může být vložen jako background.
Mati
Profil
Tak jsem to předělal, téměř všude jsem zrušil absolutní nebo relativní pozicování a styly se výrazně zjednodušily a o třetinu zmenšily. A zdá se, že to funguje.

Ale narazil jsem na problém. Jak na stránkách, kde nemám žádné podmenu (např. Úvod ) nastavit velikost modrého proužku tak, aby byla stejná jako na stránkách, kde podmenu je (Služby). Zatím jsem to přibližně řešil pomocí min-height, ale to není přesné.

Je možné vložit něco, jako neviditelný text, který by proužek roztáhl na požadovanou výšku, ale který by se v případě, že se stránka zobrazí bez stylů nezobrazil?
Str4wberry
Profil
Tak to nastavte, aby to bylo přesné, ne? :–) Pokud to nechcete střílet od oka, tak textu lze nastavit line-height a podle toho i min-height.
Mati
Profil
No právě, na to jsem nepřišel jak. Když nastavím výšku pomocí height a v prohlížeči bude nastavená velikost písma větší než mám nastavenou já, tak se mi tam text nevejde.
Str4wberry
Profil
Použijte třeba em jednotky, ty se přizpůsobí dle velikosti nastaveného písma.
Mati
Profil
Děkuji za všechny rady. Snad už to mám vyřešeno. Stačilo si uvědomit, že min-height se musí rovnat součtu line-height , padding-top a padding-bottom a už to začalo vycházet.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: