Pou╛itφ CSS pozicovßnφ

P°φklad se sloupcovou ·pravou

ProΦ ne tabulky

Naprostß v∞t╣ina dne╣nφch webov²ch strßnek je upravovßna pomocφ tabulek. Obzvlß╣t∞ dob°e se jimi d∞lß sloupcovß ·prava, kterß usnad≥uje Φtenφ. Tabulky majφ ale jednu zßkladnφ nev²hodu -- zobrazujφ se a╛ potΘ, co se celΘ naΦtou. ╚tenß° pak koukß v∞Φnost na prßzdnou strßnku. Nebylo by lep╣φ naΦφst text, zobrazit ho a teprve potom naΦφtat odkazy v okolnφch sloupeΦcφch? To umo╛≥uje CSS pozicovßnφ.

B∞╛nß ·prava

NejΦast∞j╣φ pojetφ tabulkovΘ ·pravy je toto:

N∞kdy strßnka nemß prav² sloupec nebo patiΦku, ΦastΘ variace se t²kajφ roh∙ strßnek, to m∞ ale nynφ nezajφmß. Tabulkov∞ to popisuji jinde. V dal╣φm textu ukß╛u, jak tΘto ·pravy strßnky dosßhnout pomocφ CSS pozicovßnφ.

Rozvr╛enφ rozm∞r∙

Ka╛d² nßvrh strßnkovΘ ·pravy by m∞l zaΦφnat nßkresem s rozm∞ry. Dejme tomu, ╛e strßnku chci ladit pro ╣φ°ku obrazovky 800 pixel∙, tak╛e bych nem∞l p°ekroΦit 760 pixel∙ ╣φ°ky (n∞co se╛erou okraje a li╣ty). Vymyslφm si i dal╣φ rozm∞ry pro r∙znΘ Φßsti strßnky:

Divy

Tag <div> se n∞kdy naz²vß oddφl. V pozicovßnφ se pou╛φvß ke uzav°enφ obsahu, kter² mß b²t absolutn∞ pozicovßn. Je to jist∞j╣φ ne╛ jinΘ tagy, proto╛e to pak sprßvn∞ zobrazφ i Internet Explorer 4 a NN 4.

Nap°φklad tento HTML k≤d:

<div style="position: absolute; top: 120px, left: 150px>Obsah</div>

se zobrazφ jako slovo "Obsah", kterΘ bude zaΦφnat 120 pixel∙ pod a 150 pixel∙ vlevo od hornφho levΘho rohu strßnky. Top je sou°adnice y (v obrßcenΘm sm∞ru), left je x. Podrobnosti v popisu pozicovßnφ.

P°evedenφ tabulky do <div>∙

Ka╛dß Φßst strßnky (tj. hlaviΦka, obsah, sloupce, patiΦka) se zapφ╣ou jako jeden <div>, kterΘmu se p°edepφ╣e absolutnφ poloha, ╣φ°ka a n∞kdy v²╣ka.

V²sledn² k≤d

<div style="position: absolute; width: 500px; top: 120px; left: 150px">Obsah s jakkoli divok²m k≤dem a s patiΦkou</div>

<div style="position: absolute; width: 760px; top: 0px; height: 120px; left: 0px">HlaviΦka</div>

<div style="position: absolute; width: 150px; top: 120px; left: 0px">Lev² sloupec</div>

<div style="position: absolute; width: 110; top: 120px ; left: 650px">Prav² sloupec</div>

Hlavn∞ si, prosφm, v╣imn∞te, ╛e m∙╛u oddφly do k≤du umφstit v libovolnΘm po°adφ. NaΦφtajφ se od prvnφho, nejlΘpe je tedy umφstit dop°edu obsah.

Identifikßtory

HezΦφ ne╛ zßpis absolutnφ polohy do k≤du je vytvo°it si ve hlaviΦce souboru stylopis:

<style>

#obsah {position: absolute; width: 500px; top: 120px; left: 150px}

#hlavicka {position: absolute; width: 760px; height: 120px; top: 0px; left: 0px}

#levy {position: absolute; width: 150px; top: 120px; left: 0px}

#pravy{position: absolute; width: 110px; top: 120px; left: 650px}

</style>

a jednotliv²m oddφl∙m textu p°i°adit identifikßtory:

<div id="obsah">Obsah s jakkoli divok²m k≤dem a s patiΦkou</div>

<div id="hlavicka">HlaviΦka</div>

<div id="levy">Lev² sloupec</div>

<div id="pravy">Prav² sloupec</div>

M∙╛ete si zobrazit p°φklad, kter² zhruba odpovφdß popisovan²m k≤d∙m.

P°ekr²vßnφ

Je pot°eba peΦliv∞ kontrolovat, aby obsah oddφl∙ nebyl p°φli╣ ╣irok² (lev² sloupec) nebo vysok² (hlaviΦka), proto╛e by pak do╣lo k p°ekryvu. V∞t╣inou takovΘ problΘmy ale nejsou, proto╛e lev² sloupec se zalamuje a hlaviΦka b²vß peΦliv∞ odlad∞nß. P°inejhor╣φm lze zm∞nit rozm∞rovΘ °e╣enφ oddφl∙. P°ekr²vßnφ se dß kdy╛tak °e╣it CSS vlastnostmi z-index, clip a rect.

Barvy oddφl∙

Sloupce se dajφ r∙zn∞ formßtovat; nejzajφmav∞j╣φ je asi jejich barvenφ. Jde p°itom o barvu pozadφ, textu a o barvy odkaz∙. Samoz°ejm∞ pou╛iji CSS styly. Proberu na p°φkladu levΘho sloupce.

<style>

#levy {background-color: green; color: white}

#levy H3 {color: black}

#levy a:link {color: yellow}

#levy a:visited {color: silver}

#levy a:hover {color: red}

</style>

V p°φkladu jsem nadefinoval barvu celΘho oddφlu "levy", barvu nadpisu H3 a barvy odkaz∙ uvnit° tohoto oddφlu. KonkrΘtn∞ se barvy samoz°ejm∞ musejφ odladit tak, aby design sed∞l.

Podrobn∞ji popisuji barvenφ oddφl∙ u p°φkladu s li╣tou.

Kßmen ·razu

Nejv∞t╣φm problΘmem je ud∞lat boΦnφ sloupce podbarvenΘ (background-color) nejen pod jejich obsahem, ale po celΘ v²╣ce strßnky. To se jednodu╣e ud∞lat nedß, proto╛e zpravidla nenφ znßmo, jak vysok² bude prost°ednφ oddφl s textem.

Jsou jen n∞kterß ΦßsteΦnß °e╣enφ:

• Vyka╣lat se na to, tak to d∞lßm jß
• Nastavit sloupc∙m n∞jakou v²╣ku. Pokud obsah strßnky bude v∞t╣φ, bude tam stejn∞ bezbarvo, pokud bude men╣φ, budou tam dlouhΘ kusy prßzdna.
• O╣et°it v²╣ku n∞jak²m skriptem a dopsat do strßnky p°esn∞ velkΘ kusy barvy.
• Do patiΦky umφstit slo╛it∞ relativn∞ pozicovanΘ objekty s velkou v²╣kou posunutΘ hodn∞ nahoru se zßporn²m z-indexem.
• Jako pozadφ strßnky zadat ╣irok² obrßzek, kter² u╛ bude mφt plochy obarvenΘ napevno.
• Hlavnφ text d∞lat ve skuteΦnosti tabulkou s prßzdn²mi boky, pouze boΦnφ sloupce dopisovat pozd∞ji pozicovan∞. Je to nejjist∞j╣φ °e╣enφ, kterΘ bych doporuΦil autor∙m PHP, ASP a SHTML strßnek. P°itom bych se tu tabulku sna╛il rozd∞lit do n∞kolika tabulek nad sebou.

Star╣φ prohlφ╛eΦe

CSS pozicovßnφ nefunguje v trojkov²ch verzφch prohlφ╛eΦ∙, kterΘ dnes ale pou╛φvajφ (podle m²ch v²zkum∙) necelß dv∞ procenta Φtenß°∙ (a to si je╣t∞ myslφm, ╛e jsou to experimentujφcφ webmaste°i). Pokud chcete, aby se i jim strßnka zobrazila ve sloupcφch, musφte ud∞lat alternativnφ tabulkovou verzi a skriptem na ni navigovat. Lep╣φ je ale vyka╣lat se na n∞. Ono je to toti╛ pro n∞ takΘ ΦitelnΘ, t°eba╛e ne tak hezky.

Tipy na vylep╣enφ

• M∙╛ete zkusit nedßvat objekt∙m na strßnkßch pevnou ╣φ°ku, tak╛e se to pak nemusφ Φφst z celΘ obrazovky. Pokud o╛elφte prav² sloupec, je to velmi snadnΘ. Hlavnφ text se dokonce nemusφ dßvat do <div>u, staΦφ, kdy╛ se mu nastavφ margin-left v ╣φ°ce levΘho sloupce.
• Fraktßlovß obrßzkovß pozadφ pod boky a hlaviΦku p∙sobφ perfektn∞ (background-image). Nebo zkuste rßmovat pomocφ border.
• Oddφl∙m se vyplatφ p°idat padding (obdoba atributu cellpadding u tabulek).
• Pomocφ pozicovßnφ se dajφ perfektn∞ ud∞lat r∙znΘ p°ekr²vacφ kouzla a animace.
• Pouva╛ujte nad pou╛itφm jin²ch dΘlkov²ch jednotek, ne╛ jsou pixely. Obzvlß╣t∞ doporuΦuji promyslet procenta a velikost pφsmovΘho ΦtverΦφku (EM), kterß je zaruΦuje soudr╛nost designu, kdy╛ si u╛ivatel p°epne velikost pφsma.

Vizte tΘ╛: popis CSS pozicovßnφ, p°φklad CSS sloupc∙, hlavnφ strßnka CSS, Jak ud∞lat levΘ menu

Taky si, prosφm, v╣imn∞te, jak jsou d∞lanΘ tyto strßnky.

O tvorb∞, ·dr╛b∞ a zlep╣ovßnφ internetov²ch strßnek. Zßklady HTML CSS FrontPage Hledßnφ