V∞tÜina prezentacφ na internetu v souΦasnΘ dob∞ vyu₧φvß pro rozmφst∞nφ prvk∙ na strßnce tabulky. TakovΘ °eÜenφ je jednoduchΘ p°i vytvß°enφ; horÜφ u₧ je to s p°ehlednostφ k≤du strßnky a nejmΘn∞ p°φjemnß situace nastane, chcete-li provΘst v layoutu strßnky zm∞nu. Navφc jsou takovΘ strßnky nepou₧itelnΘ pro zdravotn∞ posti₧enΘ u₧ivatele, p°istupujφcφ k internetu pomocφ specißlnφch Φtecφch za°φzenφ, kter²m tabulky Φinφ dost velkΘ potφ₧e. Zkusme te∩ tabulky vyu₧φvat p°edevÜφm k ·Φelu, ke kterΘmu byly vytvo°eny (tj. k p°ehlednΘ prezentaci informacφ), a layout strßnky °eÜit n∞jak jinak.
Abyste mohli zapomenout na tabulky, budete pot°ebovat skupinu vlastnostφ kaskßdov²ch styl∙, kterΘ byly p°idßny do jejich druhΘ verze (CSS2). CelΘ se to naz²vß vizußlnφ formßtovacφ model. Vizußlnφ proto, ₧e strßnka je urΦena p°edevÜφm pro zobrazenφ na monitoru. Pojmenovßnφ vychßzφ tedy z typu mΘdia, kterΘ je urΦeno pro v²stup. Pokud byste pomocφ CSS2 definovali rozmφst∞nφ nap°. pro tiÜt∞nou strßnku, print preview na obrazovce nebo pro hlasov² v²stup, pou₧ili byste jin² typ mΘdia, a tedy i jin² formßtovacφ model.
Z°ejm∞ vßm trochu Φasu zabere "za₧itφ si" principu vizußlnφho formßtovßnφ, brzy ale zjistφte, ₧e tento zp∙sob nabφzφ mo₧nosti, kterΘ s tabulkami prost∞ nesvedete. P°φprava strßnek i jejich zm∞ny zaberou mnohem mΘn∞ Φasu a hlavn∞ strßnky budou lΘpe Φiteln∞jÜφ (zkuste vymazat ze sv²ch strßnek vÜechny tabulkovΘ tagy, kterΘ pou₧φvßte pro layout, a zjistφte, ₧e mßte asi tak o polovinu kratÜφ soubor). Jak si ukß₧eme pozd∞ji, dß se celkem snadno vy°eÜit i problΘm s r∙zn²m rozliÜenφm monitoru Φi se zm∞nou velikosti okna.
Zßkladnφ rozd∞lenφ strßnky - sloupce a hlaviΦka
Na zaΦßtku je pot°eba urΦit zßkladnφ rozd∞lenφ strßnky. Pomocφ p°φkladu k≤du uvedenΘho v podtisku na stran∞ 143 vytvo°φte na strßnce t°i sloupce a hlaviΦku. V²Üka vÜech t°φ sloupc∙ bude automatickß - sloupec bude tak dlouh², aby se do n∞j veÜel jeho obsah. A pozor! Takto navr₧enß strßnka nemß problΘmy p°i zm∞n∞ rozliÜenφ ani p°i zm∞n∞ velikosti okna!
V²sledek pak vypadß tak, jak vidφte na obr. 1.
Pozici prvku v rßmci HTML strßnky urΦujφ vlastnosti position, top, right, bottom, left a float. Hodnotu vlastnostφ top, left, right a bottom lze samoz°ejm∞ zadßvat i v konkrΘtnφ dΘlce (nap°. v pixelech).
VÜimn∞te si, ₧e vlastnost position mß v tomto p°φklad∞ hodnotu absolute. Takov² blok v dokumentu je zcela vytr₧en ze svΘho normßlnφho umφst∞nφ (respektuje pouze zßkladnφ blok, co₧ je v tomto p°φpad∞ body) a je umφst∞n na pozici na strßnce, kterou udßvajφ top, left, right a bottom. Position m∙₧e mφt krom∞ absolute hodnotu relative, fixed nebo static.
Static je p°ednastavenß hodnota. Pokud tedy vlastnost position u n∞kter²ch element∙ neurΦφte, budou mφt tyto prvky prßv∞ hodnotu static a budou se zobrazovat v normßlnφm po°adφ za sebou, tak jak jsou zapsßny ve zdrojovΘm dokumentu.
Fixed je specißlnφ p°φpad absolutnφho urΦenφ pozice bloku, navφc vÜak je prvek jakoby p°ipevn∞n na stßle stejnΘm mφst∞ a nepohybuje se ani p°i rolovßnφ.
Relative - p°i tomto nastavenφ novou pozici bloku prohlφ₧eΦ vypoΦφtß s ohledem na normßlnφ tok, tzn. k normßlnφ pozici p°ipoΦφtß hodnoty top, left, right a bottom, a na tuto pozici blok umφstφ. Nßsledujφcφ elementy nejsou tφmto v∙bec ovlivn∞ny, co₧ v praxi znamenß, ₧e se mohou jednotlivΘ bloky vzßjemn∞ p°ekr²vat.
Vlastnost margin pro element body je p°idßna kv∙li prohlφ₧eΦi IE 5.X, kter² jinak prav² sloupec nezobrazφ sprßvn∞.
Jemn∞jÜφ layout
PotΘ, co si definujete zßkladnφ rozd∞lenφ strßnky, m∙₧ete umφs¥ovat dalÜφ elementy dovnit° zßkladnφch sloupc∙ a urΦovat jejich pozici, co₧ je v²hodnΘ provßd∞t hlavn∞ pomocφ relativnφho umφst∞nφ a vlastnosti float.
Float vyu₧ijete hlavn∞ pro obtΘkßnφ (viz obr. 2).
IMG {float: left}
Takto urΦφte, aby vÜechny obrßzky byly posunuty doleva a ostatnφ obsah je obtΘkal od pravΘho hornφho rohu poΦφnaje. Pokud se vßm zrovna nehodφ, aby obrßzek byl obtΘkßn i nßsledujφcφmi odstavci, zajistφte to vlastnostφ clear. Tak nap°φklad deklarace
P {clear: left}
zajistφ, aby levß strana ₧ßdnΘho odstavce neobtΘkala jinΘ elementy.
Pro dolad∞nφ layoutu strßnky dob°e vyu₧ijete vlastnosti tzv. box modelu: margin, padding a border, tj. vn∞jÜφ a vnit°nφ odsazenφ a rßmeΦek. Tyto vlastnosti jsou souΦßstφ u₧ i prvnφ verze kaskßdov²ch styl∙.
Krom∞ t∞chto zßsadnφch vlastnostφ CSS2 definuje n∞kolik dalÜφch "vylepÜenφ". Jednφm z nich jsou vrstvy. V CSS2 mß ka₧d² blok na strßnce t°i dimenze umφst∞nφ. Krom∞ horizontßlnφ a vertikßlnφ pozice to je jeÜt∞ z-axis, kterß mß opodstatn∞nφ, pokud se bloky navzßjem vizußln∞ p°ekr²vajφ. Elementy s vyÜÜφ hodnotou (zadßvß se v cel²ch Φφslech) p°ekryjφ ty s ni₧Üφ hodnotou z-axis.
Zajφmav²mi vlastnostmi pro urΦenφ Üφ°ky a v²Üky bloku jsou krom∞ klasick²ch widht a height do druhΘ verze kaskßdov²ch styl∙ nov∞ p°idanΘ 'min-width', 'max-width', 'min-height' a 'max-height', kterΘ umo₧≥ujφ autor∙m strßnek omezit Üφ°ku a v²Üku bloku na urΦenou hodnotu.
V normßlnφm p°φpad∞ je obsah bloku "uv∞zn∞n" mezi jeho okraji. Ve specißlnφch p°φpadech vÜak m∙₧e obsah boxu le₧et ΦßsteΦn∞ nebo ·pln∞ mimo svΘ hranice, a to nejΦast∞ji tehdy, kdy₧ Üφ°ka Φi v²Üka bloku jsou urΦeny tak, ₧e se obsah nevejde do urΦenΘho mφsta a p°etΘkß ven za hranice boxu. Pro kontrolu tohoto "p°etΘkßnφ" lze vyu₧φt vlastnost overflow a urΦit tak, jak a jestli v∙bec mß b²t blok o°φznut. Vlastnost clip pak urΦφ velikost a tvar o°φznutφ.
Overflow mß tyto u₧iteΦnΘ hodnoty: hidden - obsah bude o°φznut, ale nebude mo₧nΘ prohlφ₧et jeho zbylou Φßst pomocφ klasickΘho rolovßnφ. Tuto hodnotu zvolφ asi ten, kdo bude chtφt pou₧φt pro rolovßnφ nap°. JavaScript; scroll - obsah bude o°φznut a bude ho mo₧nΘ prohlφ₧et pomocφ klasickΘho rolovßnφ.
Jedin²m tvarem podporovan²m v CSS2 pro vlastnost clip je obdΘlnφk. P°edpoklßdß se dalÜφ rozÜφ°enφ. V nßvrhu CSS3 je zatφm p°idßn tvar inset, co₧ je takΘ obdΘlnφk. Rozdφl je vid∞t na obrßzku 3.
A₧ budete zbavovat svΘ strßnky tabulek, nezapome≥te, ₧e koneΦnß Üφ°ka boxu na strßnce je sumou hodnot lev²ch a prav²ch vn∞jÜφch okraj∙ (margin), Üφ°ky rßmeΦku (border), vnit°nφch okraj∙ (padding) a Üφ°ky obsahu (width). Stejn∞ tak se poΦφtß v²Üka, s tφm rozdφlem, ₧e jde o hornφ a dolnφ hodnoty okraj∙ a rßmeΦku (top, bottom) a v²Üku (height).
Novinky v CSS3
CSS2 je vÜak z°ejm∞ jenom zaΦßtkem v odliÜnΘm pojetφ layoutu strßnek. Zatφm zve°ejn∞nß pracovnφ verze t°etφ generace kaskßdov²ch styl∙ obsahuje krom∞ jinΘho modul, kter² umo₧nφ d∞lit obsah strßnky do vφce sloupc∙. A opravdu se nejednß o nic nezajφmavΘho! V²hody oproti tabulkov²m sloupc∙m jsou obrovskΘ: obsah bude moci p°etΘkat z jednoho sloupce do druhΘho podle dostupnΘho mφsta; bude mo₧nΘ urΦit si bu∩ Üφ°ku sloupc∙ a jejich poΦet vypoΦφtß prohlφ₧eΦ podle pot°eby, nebo naopak urΦit poΦet sloupc∙ a jejich Üφ°ka bude dopoΦφtßna prohlφ₧eΦem. Mo₧nΘ bude samoz°ejm∞ urΦit pevnou hodnotou jak pro Üφ°ku, tak i pro poΦet sloupc∙.
Vlastnostφ span bude mo₧nΘ vytvo°it element, jeho₧ Üφ°ka bude nap°φklad rovna t°em sloupc∙m, Φφm₧ se dß nap°φklad vytvo°it nad vφce sloupci nadpis. NovΘ jsou i n∞kterΘ vizußlnφ vlastnosti tohoto vφcesloupcovΘho modulu: barva, Üφ°ka a styl rozd∞lovacφ Φßry mezi odstavci, mezera mezi jednotliv²mi sloupci atd. SouΦßstφ nßvrhu t°etφ verze je i vlastnost, kterß urΦφ, zda mß b²t obsah umφst∞n uvnit° sloupce, nebo mezi sloupci. Dφky takovΘmu modulu bude snadnΘ vytvo°it z topografickΘho hlediska velmi profesionßlnφ WWW strßnky.
ObrovskΘ rozÜφ°enφ Φekß v CSS3 i tzv. box model, kde jednak p°ibudou hodnoty vlastnostφ, jednak dojde k rozÜφ°enφ skupiny vlastnostφ nynφ existujφcφch.
Otßzkou z∙stßvß, kdy se tato t°etφ generace styl∙ stane standardem a jak si s podporou jejφch nov²ch vlastnostφ pospφÜφ v²robci prohlφ₧eΦ∙.
CSS2 je platn²m standardem od poloviny roku 1998. V²robci prohlφ₧eΦ∙ si vÜak dali naΦas, a proto ₧ßdn² Φty°i roky star² prohlφ₧eΦ podporu vizußlnφho formßtovacφho modelu nemß. Dobrou zprßvou pro vÜechny tv∙rce webov²ch strßnek je, ₧e naopak nov∞jÜφ verze vÜech b∞₧n∞ pou₧φvan²ch prohlφ₧eΦ∙ velmi dobrou podporu CSS2 obsahujφ. Jednß se o:
IE od verze 5.5;
Netscape od verze 6.0;
Mozzilu 1.0;
Operu od verze 5.0.
Proto₧e tyto prohlφ₧eΦe pou₧φvß 99 % nßvÜt∞vnφk∙ internetu, je dnes opravdu mo₧nΘ dodr₧et p°i vytvß°enφ layoutu strßnek doporuΦenφ konsorcia W3C.
