Layout stránky 2

V tejto kapitole si ukážeme ešte nejaké nastavenia jazyka CSS, ktoré sa často využívajú pri rozvrhovaní elementov na stránke a náš layout si troška upravíme tak, aby sme už v nasledujúcej kapitole mohli umiestňovať jednotlivé prvky. Poďme sa zamerať najprv na hlavičku našej stránky. Povedali sme si, že do nej umiestnime nejaké logo a nejaký slogan. Povedzme, že logo budeme chcieť na ľavej strane a slogan na pravej strane stránky. Nebudeme ich chcieť však zarovnávať k ľavému a pravému okraju, ale budeme chcieť, aby išli od stredu hlavičky do strán. Čiže aby logo bolo od stredu naľavo a aby slogan bol od stredu napravo. Teraz by ste to už vedeli spraviť napríklad tým, že by ste umiestnili div do stredu hlavičky a tam vložili obidva objekty. Vyskúšame si to ale troška iným spôsobom, aby sme sa naučili ďalšie veľmi užitočné pravidlo jazyka CSS.

Spravíme to tak, že si hlavičku rozdelíme dvomi divmi na polovicu. Následne v obidvoch divoch umiestnime objekty k ich kraju, ktorý je v strede hlavičky. Ako však rozdelíme nejaký div dvomi presne na polovicu? Keďže vieme natvrdo rozmer – šírku hlavičky, vedeli by sme to jednoduchým umiestnením divov vedľa seba s tým, že by sme obidvom zadali polovičnú šírku hlavičky. Táto metóda by nateraz fungovala, nie je však veľmi vhodná. Pri pracovaní s rozmermi a umiestnením objektov je vždy dobré pravidlo vyhýbať sa (ak to má význma a je to možné) zadávaním údajov natvrdo, rozumejme tým zadaním vlastností height a width s konkrétnymi číselnými hodnotami v pixeloch. Prakticky to nie je zlé, ale najmä pri vnútorných elementoch – vnorenejších v stránke – konkrétne malé divy, ktoré tvoria v celku stránku, to nie je vhodné. Predstavte si, že si navrhnete stránku ako my teraz, že bude mať šírku 900 pixelov a celú ju naprogramujete. Podľa toho, že má šírka hlavného divu, si nadefinujete veľkosti všetkého vo vnútri, hlavičku by ste si rozdelili teraz na 450 a 450 pixelov, v contente by ste si dali nejaké menu naľavo o šírke 200 pixelov a zvyšok by mal 700 a podobne. Takto by ste mali všetko pekne spravené a naštýlované a po čase by vám zákazník/šéf povedal, že vieš čo, chcem to zväčšiť na 1200.

Čo by sa stalo? Zväčšili by ste si rozmer hlavného divu a následne by vám vo vnútri všade vznikli prázdne miesta. Dodatočne by ste museli upravovať všetky hodnoty rozmerov, aby to v súčte sedelo. Druhý príklad je, že si danú stránku pozeráme na zariadení s menším rozlíšením, ako je mobil alebo tablet. Ak má niečo takto pevne zadané rozmery vo vnútri a rozlíšenie koncového zariadenia je spravidla menšie, všetko bude odskakovať akonáhle sa šírka okna bude menšia čo i len o jeden pixel ako 900 pixelov, pretože preto nebude miesto. Napríklad tieto dva divy by automaticky odskočili pod seba, lebo vedľa seba by nemali priestor. Aj keď v ich vnútri by bolo mimo loga a sloganu dosť miesta, odskočili by, pretože divy majú pevne zadanú šírku.

Tento problém sa dá vyriešiť veľmi šikovným zadávaním hodnôt vlastností width a height a to nie konkrétnym číslom (počtom pixelov), ale zadaním percentuálnej čiastky. Východisková hodnota – rozmer, z ktorej sa ráta zadaný percentuálny podiel, sa berie z nadradeného prvku (rodiča – predchodcu – to, v čom sa nachádza náš prvok). Čo to pre nás znamená? Že ak by sme chceli rozdeliť pomocou dvoch divov hlavičku na polovicu, jednoducho by sme obidvom zadali width: 50%. Hodnota 50% predstavuje polovicu a bralo by sa to z nadradeného elementu, takže by mali skutočne veľkosť 450 pixelov. Výhoda ale spočíva v tom, že ak by sme následne hodnotu nadradeného elementu zmenili, stále by vnútorne divy zaberali polovicu a nemuseli by sme nič dodatočne meniť vo vnútri. Presne takto by sme mohli zadávať rozmery, ak je to možné. Samozrejme, ak sú požiadavky, aby niečo malo presne taký a taký rozmer, tak to nie je chyba. Pokiaľ sa ale dá, toto je vždy lepšia možnosť. Poďme si to teda ukázať, zadávanie štýlov sa vám možno bude zdať na prvý pohľad zložité, ale nebojte sa, vysvetlíme si to nižšie. V ukážke je iba kód, ktorý sa od predchádzajúceho zmenil, tak si ho iba doplňte/prepíšte jednotlivé časti:

index.php:

<body>
<div class="main">
    <div class="header">
        <div class="header-inner1 full-height half-width left"></div>
        <div class="header-inner2 full-height half-width left"></div>

    </div>

global.css:

.header{
    background-color: #00FF00;
    height: 150px;
}

.header-inner1{
    background-color: #0000FF;
}

.header-inner2{
    background-color: #FFA500;
}

.half-width{
    width: 50%;
}

.full-height{
    height: 100%;
}

.left{
    float: left;
}

Ako je vidieť, v hlavičke sa nachádzajú dva divy, ktorým sme chceli zadať rôznu farbu, aby sme videli, že skutočne zaberajú polku. Okrem toho sme im chceli zadať polovičnú šírku. Keďže je to blokový element a my vieme, ako sa také prvky správajú (či? :-D ), keby sme zadali len tieto dve veci, neuvideli by sme nič. Keďže nič neobsahujú, majú nulový výšku, takže nič nevidno. Aby ich bolo vidno, musíme im zadať nejaký výšku a aj na toto sme použili percentuálne zadanie, aby zaberali plnú výšku hlavičky. Okrem tohto sme museli zadať ale ešte jednu vec. Keby sme to mali iba takto, tak by tie divy boli pod sebou, aj keď majú miesto byť vedľa seba. Prečo? Pretože ako vieme, blokové elementy pred sebou zalomia riadok, takže každý nový prvok ide na nový riadok.

Preto sme im pridali ešte jedno pravidlo a to, aby išli vedľa seba pomocou vlastnosti float. Všimnite si, že všetky tieto vlastnosti sme nezadali do jednej triedy, ktorú by sme následne priradili prvkom, ale takmer na každú vlastnosť sme si zadali novú triedu (class). Teraz sa vám to zdá ako zbytočne neprehľadné a neefektívne. Ale predstavte si, že aj v pätičke použijeme na nejaké elementy polovičnú šírku. Znova by sme zadávali width: 50% spolu s ostatnými pravidlami pre daný element. Ak si ale takto spravíme pomocné triedy, ktoré môžeme použiť na viacerých miestach, nemusíme to zadávať viackrát v CSS, ale iba priradíme túto triedu k nejakej inej, ktorá je určená práve pre tento prvok. Samozrejme, ak to dáte do jednej, nie je to chyba, ale takto je to niekedy šikovné použiť. Netreba pre úplne všetko mať vlastnú triedu ako pre background, marginy, paddingy a podobne, ale pre niečo, čo vieme, že použijeme aj na inom mieste, je výhodné mať vlastnú triedu. Podobne sme to spravili aj pre float a výšku 100%. Ak by sme teraz chceli zadávať ďalšie elementy, ktoré by sme chceli floatovať, rovno by sme im zadali túto triedu a zvyšok dali do triedy pre nich určenej. Možností ako kombinovať triedy a pravidlá CSS je nekonečne veľa, je jedno, ako si to spravíte, dôležité je, aby to vyzeralo tak ako má:)

Poďme sa teraz zamerať na časť content, ktorá by mala predstavovať z väčšej časti hlavnú časť stránky s dynamickým obsahom. Spravíme to tak, že v ľavej časti tohto bloku budeme mať menu, ktoré bude slúžiť na navigáciu medzi podstránkami. Toto menu bude statické, to znamená, že sa nebude meniť jeho rozmer. Povedzme si, že bude mať 200 pixelov, to by mohlo na nadpisy podstránok stačiť. Vedľa neho napravo až po okraj našej webstránky bude časť, v ktorej budeme zobrazovať samotný obsah našej webovej stránky. Tento obsah šírku meniť nebude, bude však dynamický čo sa týka výšky. Parameter min-height preto presunieme na tento blok, jeho rodič – div content, bude mať takú výšku, ako jeho obsah, takže nie je nutné zadávať výšku.

Zamyslime sa ale nad jeho šírkou. Keďže vieme napevno šírku celej stránky a vieme aj šírku bloku pre menu, ľahko vieme odpočítaním vypočítať jeho šírku a zadať ju natvrdo. Zrejme tušíte, že to ale takto robiť nejdeme a že si opäť ukážeme nejakú šikovnú cestu, ako to spraviť inak. Pri hlavičke sme použili ako hodnotu pre vlastnosť height percentuálne vyjadrenie rodičovskej šírky. Mohli sme to kľudne nakombinovať ako 30 a 70, 35 a 65 alebo hocijako inak. V tomto prípade ale pre menu nemáme zadanú šírku percentami, chceme, aby mal za každých okolností 200 pixelov do šírky. Ako ale povieme, aby zvyšok zaberal pravý blok? Dá sa to pomocou jednej veľmi čikovnej funkcie jazyka CSS s názvom calc (kalkuluj, počítaj). Táto funkcia slúži na aritmetické operácie, kde môžeme zadať rôzne hodnoty (px, %) a vzťah medzi nimi (+, -). V našom prípade by sme chceli, aby mal náš blok šírku svojho rodiča, ale o 200 pixelov menšiu. To dosiahneme operáciou calc (100% - 200px). Takto zabezpečíme, že ak sa ja dodatočne zmení šírka celej webstránky, či už zadaním alebo zmenšovaním okna ak by bola neskôr vyjadrená percentuálne k šírke prehliadača, bude vždy vypĺňať zvyšok stredného bloku, pretože si zoberie 100% šírky rodiča – bloku content a zmenší o 200, ktoré zaberá samotné menu. Šikovné však? Poďme si to ukázať v praxi:

index.php:

<div class="content">
    <div class="sidebar left"></div>
    <div class="main-content right">
        
    </div>

    <div class="clear"></div>
</div>

global.css:

.content{
}
.right{
    float: right;
}

.clear{
    clear: both;
}

.sidebar{
    width: 200px;
    height: 400px;
    border-right: 1px solid #000000;
}

.main-content{
    width: calc(100% - 201px);
    background-color: #FFFF00;
    min-height: 700px;
}

Pozrite sa na kód a všimnite si zmeny. Pre triedu content už nedefinujeme výšku, preniesli sme toto pravidla na child elementy tohto bloku. Bloku sidebar (bočný rámec/lišta - pre menu) sme zadefinovali orámovanie na pravej strane, aby ste videli, akú plochu zaberá. Všimnite si, že nemá nastavené pozadie a teda zobrazuje sa farbou, akú má zadanú jeho najbližší rodič s definovaným pozadím a tým je main blok. Šírku pre blok main-content (hlavný obsah) sme zadali tak, ako sme si popísali. Všimnite si ale, že sme odpočítali 201 pixelov a nie 200. Viete prečo? Skúste si zadať iba 200, že čo to spraví:) Možno ste uhádali, že ten jeden pixel je kvôli border-right prvku sidebar. Keby mal border aj na ľavej strane, musíme odpočítať 202, pretože border ide rozmermi smerom do vonka a všetko je presne vyrátané na jeden pixel. Okrem toho si ešte skúste do bloku main-content zadať veľakrát tag <br>, aby ste presiahli 700 pixelov a aby ste videli, že sa jeho výška skutočne dynamicky (min-height) roztiahne a štruktúra (layout) stránky sa nezmení. Pätička sa skutočne umiestni na spodok tak, ako si to želáme. Šikovné nie? Keďže už máme základnú kostru našej webstránky, v nasledujúcich kapitolách môžeme ísť ďalej a naplniť ju reálnym obsahom.