CSS příklad č.2: Třísloupcový layout s hlavičkou a patičkou

levy sloupec

[ ON / OFF ]

fghdfgh dfgh fdgh fghdfgh dfgh dfgh dfgh dfgh dfghdfgh dfgh dfgh dfgh dfg hdfghdfg hdfgh er5h tfrj fgdj 45 ufg jn fghdfgh 45u ftj i35j fg ndfg n 356ij tr jme tyjm et6ki 356 kj yfn et6 k35 6j rtjn weru 34 jertj35 6iu 356j fg tj 45 ut rj dfgj 45u 5 rjdftj df j5 6ij 56j dfghj er j356 ij ert j fg je r6 ij 56k ef j dtg hjer tuj ej sdfg sdfg sdfg sdfg sdfgsdfg sdfg sdfg 34yh sftj tyk et gkjs nb adfh wet je hgmcvhms tj ertyk gh jmxc gns dtju tyjk fgsh wrtuj fm xc nadrhjw rtjktgyhkm xgn sdfhjwrtj fgdj srt jk fgj sft kjs gkm sfdghj fg jk drtk dfg jrtkj fgj dtryk jxg mn dxfgjk erty kj gm dfy ktd yk gh kdghk dtykt yk dfg jns fgj rt j dfgj fhk tdy k dhm dgh k dty jd dyjk dytk fgh kdftjkdr tk df j ghm vbnk ty i rthn fg jd k dfgh j dftkiet yk dgjtygk dt yj dgfjertj dfgj gfky

pravy sloupec

[ ON / OFF ]

fghdfgh dfgh fdgh fghdfgh dfgh dfgh dfgh dfgh dfghdfgh dfgh dfgh dfgh dfg hdfghdfg hdfgh er5h tfrj fgdj 45 ufg jn fghdfgh 45u ftj i35j fg ndfg n 356ij tr jme tyjm et6ki 356 kj yfn et6 k35 6j rtjn weru 34 jertj35 6iu 356j fg tj 45 ut rj dfgj 45u 5 rjdftj df j5 6ij 56j dfghj er j356 ij ert j fg je r6 ij 56k ef j dtg hjer tuj ej sdfg sdfg sdfg sdfg sdfgsdfg sdfg sdfg 34yh sftj tyk et gkjs nb adfh wet je hgmcvhms tj ertyk gh jmxc gns dtju tyjk fgsh wrtuj fm xc nadrhjw rtjktgyhkm xgn sdfhjwrtj fgdj srt jk fgj sft kjs gkm sfdghj fg jk drtk dfg jrtkj fgj dtryk jxg mn dxfgjk erty kj gm dfy ktd yk gh kdghk dtykt yk dfg jns fgj rt j dfgj fhk tdy k dhm dgh k dty jd dyjk dytk fgh kdftjkdr tk df j ghm vbnk ty i rthn fg jd k dfgh j dftkiet yk dgjtygk dt yj dgfjertj dfgj gfky

Popis

Jedná se o třísloupcový layout v CSS, který navíc obsahuje hlavičku a patičku (viz předchozí příklad).

Podporované prohlížeče

Tento příklad byl testován v těchto prohlížečích:

• Internet Explorer 5.0 na Windows
• Internet Explorer 5.5 na Windows
• Internet Explorer 6.0 na Windows
• Mozilla 1.4 na Linuxu
• Opera 7.20 B1 na Linuxu
• Konqueror 3.1.1 na Linuxu

Legenda

• Červenou barvou jsou označeny prohlížeče vykazující fatální chyby.
• Šedou barvou jsou označeny prohlížeče vykazující drobné chyby, jež však nějak více nebrání použitelnosti webu.
• Zelenou barvou jsou označeny prohlížeče, které se chovají výborně.

Internet Explorer

Všechny verze Internet Exploreru vykazují chybu odsazení prostředního sloupce při zúžení okna prohlížeče. U verzí 5.5 a 6.0 lze částečně řešit specifikací min-width (resp. pomocí její náhrady pro IE, jelikož IE tuto direktivu nepodporuje).

Opera

Opera obsahuje menší chybu při dynamickém zkrácení obsahu dokumentu (např. ze skriptu). Zachová se tak, že je patička korektně pozicována, ale za dokumentem zbyde prázdné místo. Řešení je ve volání funkce reset (viz zdrojový kód tohoto příkladu) vždy po změně obsahu dokumentu.

Konqueror

Konqueror v testované verzi vždy přilepí patičku na konec dokumentu. Navíc obsahuje podobnou chybu jako v případě Opery, řešení je stejné, tj. zavolat funkci reset vždy po změně obsahu dokumentu.

Seznam použitých workaroundů

1. Nahrazení direktivy min-height v Internet Exploreru alternativní verzí. Využití workaroundu "html>body #id".
2. Nahrazení direktivy min-width v Internet Exploreru nastavením šířky elementu #bottom-spacer na minimální šířku. Tento element slouží jako neviditelná odrážka patičky, takže nevadí, že se nastaví pevná šířka.
3. Internet Explorer obsahuje tzv. tří pixelovou chybu při používání direktivy float. Workaround vzpočívá v určení výšky 0 pixelů pro prostřední sloupec pomocí direktivy expression (kterou podporuje jen IE).
4. Internet Explorer má občas problémy s umístěním patičky ke spodnímu okraji. Z nepochopitelných důvodů občas ujede o 1 pixel nahoru. Proto je třeba použít malý workaround využívající opět direktivu expression, takže se změna projeví jen v IE.