Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

14. diel - Fixné menu a pozicovanie v CSS

V predchádzajúcom cvičení, Riešené úlohy k 12.-13. lekciu HTML a CSS, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V minulej lekcii, Riešené úlohy k 12.-13. lekciu HTML a CSS , sme ostylovali hlavičku s navigáciou. V dnešnom HTML / CSS tutoriálu u štýlovanie zostaneme a dokončíme layout (rozloženie) webu.

Pätička

Začnime stylovaním pätičky. Tu nie je veľmi čo vymýšľať. Nastavíme výšku, farbu textu a ľavý a horný okraj:

footer {
    height: 40px;
    color: white;
    margin: 20px 0 0 30px;
}

Podobne ako odkaz v hlavičke nastylujeme aj odkaz v pätičke:

footer a {
    color:  #ffbb00;
    text-decoration: none;
}

To bolo jednoduché, že? výsledok:

Päta v HTML a CSS - Webové stránky krok za krokom

Pole s obsahom článku (section) je na article veľmi natlačené, nastavme article zvislý padding na 30px:

article {
    background: url('obrazky/pozadi.png') #009aca;
    padding: 30px 0px;
}

Lepšie, nie?

Podpora rôznych rozlíšenie

Už sme web navrhli tak, aby bol použiteľný v rozlíšení s šírkou 960 pixlov a väčším. Podporujeme teda rozlíšenie 1024x768 a vyššie. Typické rozlíšenie pre dnešnú dobu je 1280x800 na notebookoch (tam náš web vyzerá stále dobre) a full-hd (1920x1080) na desktopoch. Pozrime sa, ako náš web vyzerá vo full-hd:

Web vo full-hd - Webové stránky krok za krokom

Nie je to úplne ideálne. Rozlíšenie by mohlo byť ešte vyššia, mali by sme web navrhnúť tak, aby vyzeral solídne aj v takomto prípade. Tu je vidieť, prečo sme nastavili sivé pozadie celému body a nie len pätičke. Je to z toho dôvodu, aby sa vo vysokom rozlíšení pätička takto pretiahla a nevzniklo dole biele miesto. Väčšina stránok na webe má však dlhšiu obsah, takže tento úvodný článok je skôr extrémny prípad, avšak je dobré počítať aj s ním.

Šírka polia s článkom

Niektorí (hlavne učitelia a teoretici) tvrdia, že by sa malo pole s obsahom webu prispôsobovať veľkosti okna prehliadača. Je však nemožné ten istý článok naformátovať tak, aby vyzeral dobre v rozlíšení 1024x768 i vo full-hd. Vo full-HD sa obvykle z odsekov textu stanú len dlhé rezance. Videli ste niekedy knihu napísanú vodorovne na rolku papiera? Ja teda nie. Všimnite si, že drvivá väčšina webov (hlavne tie, čo za niečo stojí) majú pevne určenú veľkosť poľa s článkom. Ako výnimku poznám asi len Wikipédii. Section teda rozťahovať nebudeme.

Čo však môžeme zlepšiť je stránku vycentrovať, aby si užívateľ s širokým monitorom nevyklobil krk, až bude náš web čítať.

Keďže potrebujeme vycentrovať 2 elementy vnútri article (header a section), obalíme ich oboch do divu s nejakým id:

<article>
    <div id="centrovac">
        <header>
        ...
        </section>
        <div class="cistic"></div>
    </div>
</article>

Samotný blokový element vnútri blokového sme ešte necentrovali. Zatiaľ sme Centroval iba obrázok (element riadkový), čo išlo pomocou nastavenia text-align elementu, v ktorom je obrázok vložený. Táto vlastnosť však nemá na blokové elementy žiadny vplyv. Centrovací vycentrujeme tak, že mu nastavíme vodorovný vonkajší okraj (margin) na hodnotu auto. Aby to fungovalo, musíme elementu samozrejme nastaviť aj šírku (inak by sa roztiahol cez celý article):

#centrovac {
    margin: 0px auto;
    width: 960px;
}

výsledok:

Web vo full-hd - Webové stránky krok za krokom

Týmto sme náš layout v podstate dokončili. Ak máte chuť, pridáme si do neho ešte takú vychytávku - fixné menu.

Fixné menu

Hlavička s navigačným menu je pomerne nízka, môžeme na ňu aplikovať zaujímavú vlastnosť, ktorou je fixná pozícia. O pozíciách sme sa ešte nezmienili, napravte to.

Pozíciu určitému elementu nastavujeme pomocou CSS vlastnosti position. V HTML máme 4 typy pozícií:

Statická pozície (static)

Všetky elementy v HTML majú ako východiskovú statickú pozíciu. Element je jednoducho zobrazený na tej pozícii, na ktorej je definovaný a to s ohľadom na ostatné elementy na stránke. Všetky naše elementy majú teraz fixné pozíciu, jednoducho povedané zobrazujú sa tam, kde majú :)

Relatívnej pozície (relative)

Ak nastavíme elementu relatívnu pozíciu, môžeme mu v CSS definovať vlastnosti left, right, up a down. Tu môžeme pomocou pixelov alebo percent nastaviť o koľko má byť element posunutý oproti svojej originálnej pozícii. Ak elementu napr. Nastavíme ľavú pozíciu na 20px, zobrazí sa 20px napravo od svojho pôvodného miesta. Ak vpravo od tohto elementu iný element, tak sa tento iný element neposunie, ale bude elementom zľava prekrytý. Ktorý element bude na popredí môžeme nastaviť pomocou vlastnosti z-index. Elementy vyššie majú vyššie číselné hodnoty, elementy nižšie nižšia.

Absolútnej pozície (absolute)

Absolútna pozícia zobrazí element na daných súradniciach bez ohľadu na jeho originálny pozíciu v HTML obsahu. Ak teda nastavíme elementu left na 20px, zobrazí sa element 20px od ľavého okraja okna. Ak sú pod ním iné elementy, prekryje ich.

Fixné pozície (fixed)

Fixné pozície funguje podobne, ako pozícia absolútna, ale súradnice sa počítajú v oblasti, ktorá je vidieť. Rolovanie scrollbar teda nemá na také prvky vplyv, zostávajú na svojom mieste, aj keď sa ostatní obsah posúva.

Skúsme si hlavičke nastaviť rôzne pozície, aby sme pochopili, ako fungujú. Ako vyzerá s fixnou pozíciou vieme, skúsme ju teraz nastaviť pozíciu relatívnej a horné súradnicu na 50px:

header {
    height: 73px;
    position: relative;
    top: 50px;
}

Aby sa zmeny neprejavili aj u header článku, nastavíme mu position na static:

article header {
    width: 250px;
    float: left;
    position: static;
}

výsledok:

Relatívna pozícia v CSS - Webové stránky krok za krokom

Vidíme, že celý element sa aj so svojím obsahom posunul o 50 pixelov dole a prekrýva ostatné elementy. Ostatné elementy sa nijako neposunuli, web sa správa tak, ako by element bol stále na pôvodnú pozíciu, len sa vykresľuje kúsok vedľa.

Teraz zmeňme pozíciu na absolútnu:

position: absolute;

výsledok:

Absolútna pozície v CSS - Webové stránky krok za krokom

Vidíme, že element zo stránky úplne zmizol a objavil sa nad ostatným obsahom na pozíciu, ktorú sme mu dali. Na akej pozícii bol pôvodne vôbec nahrá rolu.

Skúsme si naposledy fixné pozíciu, u ktorej zostaneme. Skúste si teraz stránkou rolovať (musíte zmenšiť okno prehliadača), hlavička zostáva na svojom mieste. Teraz nastavme pozíciu na fixné a top na 0px:

position: fixed;
top: 0px;

Hlavička vyzerá rovnako, ako u pozície absolútna. Keď však stránkou rolujeme, zostáva 0px od hornej hrany okna:

Fixné pozície v CSS - Webové stránky krok za krokom

Keďže element zo svojho miesta zmizol, dáme namiesto neho u body margin:

margin: 73px 0px 0px 0px;

Určite ste si tiež všimli, že si element nezachoval svoju pôvodnú šírku a tiež je potrebné nastaviť pozadie. Dodajme header vlastnosť width s hodnotou 100% a obrázok na pozadí:

background: url('obrazky/pozadi_sede.png') #1c2228;
width: 100%;

Pozadie sa nám teraz aplikuje aj na header článku, tam ho teda zrušíme:

background: none;

výsledok:

Fixné navigačné menu v HTML a CSS - Webové stránky krok za krokom

Pozíciovanie používajte len v prípade, že viete, čo robíte. Spravidla sa používa len veľmi zriedka a je veľkou chybou zostavovať web zadávaním desiatok absolútnych súradníc.

Menu zostáva na svojom mieste aj keď stránkou rolujeme. Gratulujem vám, ak ste sa dostali sami až sem, máte jednak hotový layout a jednať viete slušne HTML a CSS. V budúcej lekcii, Tvorba podstránok a kontaktný formulár , dokončíme jednotlivé podstránky nášho webu, aby sme ho mohli nahrať na internet. Dnešné kód je ako vždy k stiahnutiu v prílohe.


 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 5580x (2.28 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

 

Predchádzajúci článok
Riešené úlohy k 12.-13. lekciu HTML a CSS
Všetky články v sekcii
Webové stránky krok za krokom
Preskočiť článok
(neodporúčame)
Tvorba podstránok a kontaktný formulár
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
2 hlasov
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity