Formßtovacφ chyby www strßnek

Zde se pokusφm zmφnit n∞kterΘ chyby, jich╛ se internetovφ auto°i Φasto dopou╣t∞jφ. U n∞kter²ch polo╛ek se se mnou mnozφ budou hßdat, co je a co nenφ ╣patn∞. Tak╛e to berte jako m∙j nßzor.

Nevyzkou╣enΘ v∞ci

Existujφ r∙znΘ verze prohlφ╛eΦ∙, ve kter²ch se stejnΘ strßnky se zobrazjφ r∙zn∞. Mnoho lidφ tento fakt p°ekvapφ. Neuv∞domujφ si, ╛e kdy╛ jejich strßnky vypadajφ p∞kn∞ v jednom prohlφ╛eΦi, v jinΘm mohou vypadat docela jinak. Pravidlem by tedy m∞lo b²t odzkou╣enφ strßnek na v∞t╣in∞ prohlφ╛eΦ∙.

Zv²raz≥ovßnφ

Chcete-li v textu n∞co zv²raznit, mß se na to podle normy pou╛φt kurzφva. (V HTML k≤du se na to mß pou╛φvat tag (emphasis), co╛ je zv²razn∞nφ logickΘ, je zv²razn∞nφ formßtovΘ.) TuΦn∞ se majφ psßt obzvlß╣t∞ d∙le╛itΘ kusy textu ( je logickΘ, formßtovΘ). Tato pravidla si dovolφm dodefinovat specißln∞ pro Internet: kurzφvu pou╛iji k normßlnφmu zv²razn∞nφ, tuΦnost k zv²razn∞nφ, na kterΘ chci upoutat Φtenß°ovu pozornost. Na webu se dajφ na upoutßvßnφ pozornosti pou╛φvat i barvy (ale dejte pozor, a╗ si to Φtenß°i nepletou s odkazem). V tom p°φpad∞ je mφsto p°φmΘho barvenφ kus∙ textu lep╣φ si pomocφ CSS p°edefinovat tag : strong {color: red} Potom si tu barvu m∙╛ete t°eba globßln∞ m∞nit.

Je dobrΘ zv²raz≥ovßnφm ╣et°it, ne plßcat jedno p°es druhΘ. To Φtenß°e akorßt zmate, tak╛e nebude v∞d∞t, co je d∙le╛it∞j╣φ a co ne.

P°φli╣ ╣irokΘ strßnky

╚asto vφdßm strßnky, kterΘ obsahujφ n∞jak² ╣irok² element s nastavenou ╣φ°kou tak velkou, ╛e se to nevejde do okna prohlφ╛eΦe. Potom se ╣φ°ka strßnky p°izp∙sobuje tomuto nej╣ir╣φmu elementu a voln² text nenφ Φiteln² bez posouvßnφ horizontßlnφ li╣tou. Na takov²ch strßnkßch se v∞t╣inou objevuje text "optimalizovßno pro rozli╣enφ monitoru 1024x800", n∞kdy ani to ne. Auto°i takov²ch strßnek bu∩to nestojφ o Φtenß°e s men╣φmi monitory (na kter²ch se takovΘ rozli╣enφ v∙bec nedß nastavit), nebo si neuv∞domujφ, ╛e ve Windows existujφ n∞jakß okna (kterß majφ zpravidla men╣φ ╣φ°ku), nebo ╛e v prohlφ╛eΦi n∞kdo m∙╛e pou╛φvat panel "historie" nebo "oblφbenΘ".

╪e╣enφ tohoto problΘmu je nepou╛φvat objekty s pevnou ╣φ°kou v∞t╣φ ne╛ asi tak 500 bod∙. Je╣t∞ lep╣φ je uvßd∞t ╣φ°ku element∙ v procentech ╣φ°ky okna (ale to n∞kdy nejde). Jin²m Φast²m (ale pracn²m) °e╣enφm je uzav°enφ celΘho t∞la strßnky do tabulky s ╣φ°kou n∞co kolem 700 bod∙. Ta u╛ se ve v∞t╣in∞ dne╣nφch oken zobrazuje celß. Ale zase se zobrazuje pomalu, (vizte design pomocφ tabulek).

Hrßtky s fonty

Kdy╛ autor formßtuje strßnky, chce je o╛ivit pou╛itφm r∙zn²ch font∙. V╣ichni asi vφte, ╛e by se v jednom textu m∞ly vyskytnout maximßln∞ dva fonty, jinak dojde k p°eplßcanosti. Ale na webov²ch strßnkßch nastupuje dal╣φ zßludnost -- nikdy nevφm, jakΘ nainstalovanΘ fonty bude mφt poΦφtaΦ u klienta, kter² bude strßnky Φφst. M∙╛u mφt ╣t∞stφ a trefφm se, ale jistotu zobrazenφ nemßm. ProblΘmy, kterΘ mohou nastat:

╪e╣enφ

Nadpisy z obrßzk∙

Aby nedo╣lo k m²lce, to je takΘ formßtovacφ chyba (alespo≥ podle mΘho nßzoru). Mßm pro to tato vysv∞tlenφ:

╪e╣enφ problΘmu je trojφ: Jednak obrßzkovΘ nadpisy nepou╛φvat (:-), nebo pou╛φt pro IE 4 absolutnφ stylovou polohu, nebo pou╛φt skript. V╛dy se p°itom vlo╛φ normßlnφ nadpis, kter² se b∞hem stahovßnφ obrßzku nahradφ obrßzkem.

Absolutnφ poloha

Funguje spolehliv∞ jenom v IE 4 a vy╣╣φm a je to °e╣enφ nestandardnφ. Ud∞lejte nadpis normßln∞ tagem H1 a rad∞ji jej vlo╛te do tabulky. P°ed n∞j vlo╛te obrßzek (vlastn∞ je lhostejno kam, ale tak, aby to vypadalo i v jin²ch prohlφ╛eΦφch logicky). P°i°a∩te mu absolutnφ styl, t°eba takto:

<img src="nadpis.gif" style="position: absolute;
z-index: 1; top: 4px; left: 10px">

Posunutφ top a left zvolte takovß, aby obrßzek p°ekryl normßlnφ nadpis. Obrßzek ud∞lejte tak velk², aby p°ekryl cel² nadpis (nebo bu≥ku jeho tabulky). Kladn² z-index zp∙sobuje p°ekrytφ.

Filosofie toho skriptu

Jin², lep╣φ zp∙sob, fungujφcφ v prohlφ╛eΦφch MSIE 4 a 5. Text nadpisu dßt normßln∞ do tagu H1 a p°id∞lit ID. Na konec strßnky umφstit obrßzek nadpisu s ╣φ°kou a v²╣kou 1 (tak╛e se skoro nezobrazφ, p°φpadn∞ to je╣t∞ stylem zneviditelnit). Tagu body p°id∞lit udßlost onload, kterß se spustφ po nata╛enφ strßnky, tak╛e i obrßzku. Udßlost bude objektu document.all.ID.InnerHtml p°i°azovat obrßzek v normßlnφ velikosti. To je v╣echno. JasnΘ, ne?