Rozmiestnenie elementov na stránke (display)

V predchádzajúcich kapitolách sme si predstavili základné vlastnosti jazyka CSS, ktoré nám určujú vhľad jednotlivých elementov. Pomocou týchto vlastností sme schopní zabezpečiť, aby jednotlivé časti stránky vyzerali takmer rovnako, ako si to želáme. Napísal som takmer, pretože nám samozrejme ešte chýba prebrať niekoľko vlastností, ktoré sa dajú aplikovať na niektoré elementy pre dosiahnutie žiadaného vzľadu. K tým sa však dostaneme neskôr, od začiatku sa učíme postupne od najdôležitejších informácií, aby sme sa postupne do toho dostali a nadobúdali všeobecný prehľad. Keď už vieme základné praktiky, ako nastaviť dizajn jednotlivých elementov, je na čase, aby sme si povedali, ako jednotlivé elementy usporiadať (rozmiestniť) medzi sebou na stránke a zabezpečiť, aby bolo všetko na správnom mieste a s rozmermi, akými si želáme.

Už dlhšie je môj osobný názor to, že táto časť jazyka CSS je tá najťažšia a v praxi sa mi to zatiaľ stále potvrdzuje. Aby sme sa rozumeli, nie je to ani tak ťažké na pochopenie počas učenia, ale je to ťažké aplikovať v praxi a byť schopný zabezpečiť žiadaný vhľad za všetkých okolností. V úvode o jazyku CSS sme spomenuli, že sa niektoré elementy s istým nastavením niekedy správajú odlišne (aj keď majú tie isté pravidlá jazyka CSS). Ich správanie je často ovplyvnené nastaveniami elementov, ktoré sú pri nich (na rovnakej úrovni), ktorú sú ich rodičmi (nadradené elementy) alebo ktoré sú ich child elementy (vnútorné – vnorené). Je zbytočné o tom ďalej rozprávať, jednoducho to tak je a budeme brať túto skutočnosť pri učení a vysvetľovaní na vedomie. Nebojte sa ale, naše ukážky a webstránky nebudú obsahovať veľké množstvo elementov s kadejakými požiadavkami na vzhľad a správanie sa, takže k problémovým situáciám skoro ani nedojde. V týchto začiatkoch si ukážeme správanie základných pravidiel a ich vplyv na ostatné elementy, resp. vplyv ostatných nastavení na tieto pravidlá. V neskorších kapitolách vo vyšších ročníkoch budeme vo väčšine pracovať s praktickými ukážkami zo sveta webstránok, takže práve vtedy budeme viac a viac chápať jednotlivé súvislosti. Práve táto časť jazyka CSS a celkovo dizajnu webstránok, ako v podstate skoro všetko ohľadom programovania, nie je o tom, koľkokrát si to človek prečíta, či vie naspamäť 200 vlastností a hodnôt a vie ich správanie a rozdiely, ale koľko má praktických skúseností. Praktickými skúsenosťami sa v tomto prípade myslí, koľko má za sebou nadizajnovaných rôznych webstránok s rôznymi požiadavkami. Čím viac sa programovanie trénuje, tým je človek zručnejší, práve pri tomto to treba iba skúšať a hrať sa s tým.

Čo teda rozmiestnenie elementov znamená v praxi? Cieľ dizajnéra je zabezpečiť, aby na stránke bolo všetko usporiadané tak, ako to je na predlohe (grafickom náčrte). Najdôležitejšie je dodržať rozmery elementov, vzdialenosti medzi nimi a ich obsahmi a celkovo ich pozícia (umiestnenie) na stránke vo väčšine prípadov a okolností. Schválne formulka na konci vety – vo väčšine prípadov a okolností. Prečo som to uviedol? Význam toho je, že tu musíme brať dôležitú skutočnosť na vedomie. Zobrazovacia plocha zariadení (monitor/displej) má svoje vlastne rozlíšenie – rozmery v pixeloch. Okno prehliadača má tiež svoj vlastný rozmer a navyše je možné tomuto oknu meniť rozmer. Čo to pre nás znamená? Povedzme, že máme peknú grafickú predlohu webstránky navrhnutú napríklad na šírku stránky 1024 pixelov a podarí sa nám ju spraviť. Potom okno prehliadača zmenšíme napríklad na 600 pixelov alebo si pozrieme našu webstránku na tablete alebo smratfóne s oveľa nižším rozlíšením a zistíme, že naše elementy sú rozhádzané a niektoré ani nevidno. Druhá dôležitá skutočnosť je, že zložitejšie webstránky majú dynamický obsah. To znamená, že programátor niekedy dopredu nevie, aký veľký bude obsah jednotlivých častí stránok. Závisí to od používateľa. Praktický príklad je blog alebo galéria obrázkov (zmenšenín – náhľadov). Programátor nevie, aký dlhý bude článok, ani či používateľ bude mať v galérií fotiek štyri alebo dvadsať fotiek a koľko miesta to bude zaberať. Ak chceme našu prácu odviesť zodpovedne, musíme zabezpečiť, aby naša stránka vyzeralo dobre a plnila svoj účel za všetkých okolností.

Dosť ale bolo teórie, poďme sa do toho pustiť. Stručne...cieľom tejto kapitoly je teda zabezpečiť správne (žiadané) rozmiestnenie a rozmery elementov na stránke za všetkých okolností. V sekcii jazyka HTML sme mali kapitolu o blokových a vnútroriadkových elementov. Len pre zopakovanie, blokové elementy sa vyznačujú tým, že začínajú vždy na novom riadku (zalomia pred sebou riadok) a roztiahnu sa na plnú dostupnú šírku (od ľavého kraja po pravý okraj), takýmito elementami sú napríklad div, h1-h6, p a form. Vnútroriadkové elementy nezačínajú na novom riadku, nachádzajú sa na aktuálnom riadku a zaberajú len takú šírku, akú sami potrebujú, čiže aký široký je ich obsah. Medzi takéto elementy patrí span, a a img. Spôsob zobrazenia v jazyku CSS určuje vlastnosť display (display – zobrazenie), ktorej hodnoty môžu byť block (blok), inline (vnútroriadkové) alebo none (none-nič). Ako sme už viackrát povedali, elementy majú túto vlastnosť defaulnte nastavenú na nejakú hodnotu, takže napríklad tagu div nie je nutné zadať display: block, pretože v sebe toto pravidlo obsahuje defaultne. Ak by sme mu túto vlastnosť chceli zmeniť, tak len zadáme nové pravidlo a to prebije pôvodné. Posledná vlastnosť none zapríčiní, že sa daný element nezobrazí. Možno sa pýtate, načo je to dobré, načo mať v kóde niečo, čo nevidno. Praktické využitie tohto pravidla uvidíme neskôr, ale aby ste vedeli, využíva sa to na ten prípad, kedy niekedy klikáte na tlačidlo, ktoré vám niečo zobrazuje/schováva. Presne to sa vo väčšine robí pomocou tejto vlastnosti, kde klikanie mení hodnotu vlastnosti display a element je buď zobrazený (block alebo inline) alebo skrytý (none). Vlastnosť display má oveľa viacej rôznych hodnôt, ktoré zapríčiňujú rôzne správanie sa elementov, na začiatok nám ale stačia tieto tri základné a k zvyšným sa postupne dostaneme. V nasledujúcej ukážke si vyskúšame viacero rôznych nastavení tejto vlastnosti pre rôzne elementy a potom si podrobne rozoberieme jednotlivé správanie:

<!DOCTYPE html>
<html>
    <body>

        <h2>Div - blokovy element - Display: block;</h2>
        <div style="border: 1px solid black; margin-bottom: 20px;">Ahoj svet!</div>
        <div style="border: 1px solid black; margin-bottom: 20px;"></div>
        <div style="border: 1px solid black; margin-bottom: 20px; height: 50px;"></div>
        <div style="border: 1px solid black; margin-bottom: 20px; width: 30px; height: 50px;">Ahojky</div>
        <div style="border: 1px solid black; display:block; margin-bottom: 20px; width: 30px; height: 30px;">Ahojky</div>

        <h2>Span - vnutroriadkovy element - Display: inline;</h2>
        <span style="border: 1px solid black; margin: 0px 20px 20px 0px; ">Ahoj</span>
        <span style="border: 1px solid black; margin: 0px 20px 20px 0px; font-size: 24px;">svet!</span>
        <span style="border: 1px solid black; margin: 0px 20px 20px 0px;"></span>
        <span style="border: 1px solid black; margin: 0px 20px 20px 0px; width: 300px; height: 100px;">Ahoj</span>

        <h2>Div - Display: none;</h2>
        <div style="border: 1px solid black; margin-bottom: 20px; display: none;">Ahoj svet!</div>

        <h2>Blokovy element ako inline a opacne</h2>
        <div style="border: 1px solid black; margin-bottom: 50px; display: inline; width: 300px; height: 100px;">Ahoj svet!</div>
        <span style="border: 1px solid black; margin: 0px 20px 20px 0px; display: block;">Ahoj</span>
        <span style="border: 1px solid black; margin: 30px 20px 20px 0px; display: block;">Ahoj</span>

    </body>
</html>

Vo všetkých elementoch v ukážke sme použili pravidlo pre orámovanie a spodný okraj pre lepšiu prehľadnosť. Prvý div obsahuje v sebe krátky text. Jeho šírka je od okraj po okraj, pretože je to blokový element a jeho výška je taká veľká, ako potrebuje jeho obsah. Naopak v druhom dive sme nezadefinovali obsah, takže jeho výška je nulová, rozmer divu na výšku zaberá iba orámovanie. V treťom dive sme zadali pomocou CSS výšku, ktorý je dodržaná, aj keď v ňom nie je žiadny obsah. Vo štvrtom dive sme zadali rozmery a vložili aj do obsahu text. Všimnite si, že aj keď je text na výšku menší, zadaná výška sa dodržala. V poslednom dive sme zadali aj vlastnosť display, správanie je však rovnaké, pretože aj bez zadania tejto vlastnosti má toto pravidlo element div v sebe. Všimnite si, že text v posledných dvoch divoch je väčší ako samotný div a vytŕča z neho, šírku divu to však neovplyvní, pretože je pevne daná. Toto sú rôzne prípady použita blokových elementov, ich správanie je jasne viditeľné.

Ďalej sme použili vnútroriadkový element span. V prvom prípade sme zadefinovali obsah, takže element má takú výšku a takú šírku, akú potrebuje jeho obsah. V druhom prípade sme zväčšili písmo, takže rozmer tohto spanu oproti prvému je väčší. Všimnite si, že na rozdiel od blokového elementu, tieto idú zaradom v riadku a nie sú roztiahnuté na celú šírku. Tretí span neobsahuje nič, takže jeho veľkosť je nulová, zahŕňa iba orámovanie. Všimnite si ale, že má nejakú výšku, aj keď nie je zadefinovaná. Výšku tohto elementu určuje aktuálne nastavená veľkosť písma, takže v tomto prípade defaultne nastavené font-size. Toto je rozdiel oproti blokovému divu, náš druhý div má nulovú výšku, ignoruje nastavenie font-size pri určovaní jeho rozmeru. V štvrtom spane sme zadefinovali jeho rozmery, tie však aj tak nemajú vplyv na jeho finálnu veľkosť, pretože inline element je taký veľký, ako to potrebuje jeho obsah.

Ďalej sme použili pravidlo s hodnotou none, čo nám zapríčinilo, že sa daný div nezobrazuje. V poslednej časti sme použili inline tagy ako blokové elementy (výzorovo) a opačne, aby sme si ukázali predefinovanie defaultných nastavení. Všimnite si, že druhý span v poslednej časti je z vrchu nalepený na prvom dive. Aj keď má ten div nastavený margin-bottom, je to ignorované, pretože sa teraz správa ako inline element a vertikálne marginy (top a bottom) sú ignorované. Tretí span je už z hora odsadený, pretože sa správa ako blokový element a berie sa do úvahy jeho pravidlo margin.

Vlastnosť display je v podstate najdôležitejšia, resp. najzákladnejšia pre rozvrhnutie elementov na stránke a celkovo pre výsledný dizajn. Možno ste už pochopili, že základný princíp zobrazovania elementov na stránke je v ich usporiadaní zaradom, pokiaľ sa zmestia. Okno prehliadača v aktuálnej veľkosti je niečo ako krabica, do ktorej ukladáme kocky lega. Kocky lega sú v našom prípade tagy – elementy, ktoré majú svoj rozmer. Ukladáme ich od ľavého horného rohu smerom doprava a ak v riadku nie je miesto, ideme od hora smerom dole zase z ľavého kraja, za posledným umiestneným elementom. To znamená, že ak umiestnime na stránke jeden malý inline element s krátkym textom, ako tomu bolo v predchádzajúcej ukážke, napravo nám ostane ešte kopec miesta. Ak by sme dali ďalší inline element, išiel by za ním (napravo od neho). Ak za ním umiestnime blokový element, zobrazí sa v novom riadku a zaberie celú šírku. Ak by sme za ním (v kóde) umiestnili ďalší inline element (kocku lega), mal by síce priestor vyššie vedľa prvého inline elementu nad našim posledným blokovým elementom, zobrazil by sa aj tak za posledným blokovým elementom, pretože je dodržané poradie v kóde. Ak by sme chceli, aby sa zobrazil nad blokový vedľa prvého inline elementu, musel by byť v kóde skorej ako blokový element.