Povšimněte si, že pozadí této stránky je tvořeno rastrem po dvaceti pixelech a navic jsou v něm barevně vyznačeny nejdůležitější bezpečné oblasti . Uživatelé NN a starších verzí IE mohou mít ovšem se správným zobrazením této stránky problémy.
Budete-li si chtít tuto mřížku vyzkoušet pro návrh vlastních stránek, zkopírujte si obrázek na pozadí této stránky.
|
Tento text se nachází v tabulce o šířce 100%. Bude se tedy přizpůsobovat aktuální šířce okna prohlížeče - vždy ji zabere celou (s výjimkou okrajů definovaných pro <body>, v případě této stránky to je 10px). Stejně se bude chovat i běžný text vložený přímo do <body> (tj. ne do tabulky). Při malé šířce okna prohlížeče je to dobré, protože uživatel nemusí obraz horizontálně rolovat. Výhodné je to i pro tisk, neboť takto navržená stránka se vejde na každou šířku papíru. Nepřijemné je to ale pro ty, kteří mají okno prohlížeče hodně široké. Řádky delší než cca. 70 znaků se totiž špatně čtou. |
|
Tento text se nachází v tabulce o pevné šířce 600px. Vejde se tedy na prakticky libovolný monitor (včetně 10px okrajů z každé strany) a nebude problém ho vytisknout. Řádky navíc nejsou při běžné velikosti písma příliš dlouhé, takže jsou dobře čitelné. V širokých oknech prohlížeče však zůstane veliká, prázdná plocha vpravo od textu a bude působit rušivě. |
|
Ošklivě široký prázdný prostor vpravo u předešlého příkladu lze alespoň trochu eliminovat umístěním tabulky horizontálně do středu stránky. Prázdný prostor se tak rovnoměrně rozdělí na oba okraje. Tento trik využívá např. Yahoo, nebo Seznam. |
|
Další oblíbená technika spočívá v rozdělení stránky na víc sloupců. V tomto případě je první sloupec široký 600px a obshuje ty informace, které by čtenáři v žádném případě neměly uniknout. |
Druhý sloupec o šířce 170px pak může obsahovat něco méně důležitého, např. reklamu, či z pohledu navigace nepodstatné odkazy. |