Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu. Zároveň využij narozeninovou akci až 80 % zdarma při nákupu e-learningu - 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í.
12. birthday

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

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

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>
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

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

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

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

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

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

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é 4354x (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 Čápka
Avatar
Užívateľské hodnotenie:
1 hlasov
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi 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

 

 

Komentáre

Avatar
Michal Stisek:1.10.2020 12:19

S rozpadávajícím se menu na dva řádky jsem si poradil, ale rád bych věděl jakým způsobem se dostat k dalším položkám menu, když máte malou, nebo zazoomovaný okno. Poslední položky menu se totiž schovají mimo obrazovku a scroll lišta se objeví až v momentě zajíždění section. Jenže menu je fixed, takže takže se neroluje. Nějaké doporučení a nápady?

Odpovedať
1.10.2020 12:19
Jít pořád dál má smysl
Avatar
Lukáš Ptáček:13.1.2021 11:55

To pozicování je celkem záhada. Jako fixní menu budiž (to jde využít na stránkách docela hezky), ale vůbec mě nenapadá, proč by se na stránce mělo používat např. relativní pozicování. Chápu, že je to doložení do výkladu lekce, ale použití za mě nulové.
Jinak děkuji za přehlednou lekci, pokračujeme dále :)

Odpovedať
13.1.2021 11:55
Nic není nemožné
Avatar
Tomáš Hanečka:7.6.2021 22:43

Ahoj, potřebuji pomoct programuju si podle návodu a nefunguje mi to, tak jsem si web stáhnul a otevřel jsem si ho v opeře a ukázalo se mi toto nevíte proč ?

 
Odpovedať
7.6.2021 22:43
Avatar
Robert Vyskup:27.9.2021 19:23

Já nechápu proč jsme museli použít vytvořený selektor centrovac (tedz pokud účelem nebylo se naučit takové selektory vytvářet), přece jsme snad mohli použít normální třídní selektor article.
Nebo se snad mýlím.

 
Odpovedať
27.9.2021 19:23
Avatar
Martin Němec:22.10.2021 17:47

To pozicování je teda masakr... dalo mi to zabrat.

 
Odpovedať
22.10.2021 17:47
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Zdeněk Plicka:1. januára 3:00

&nbsp; místo mezery v "O mně" je ok, nebo je lepší lámání ošetřit jinak?

Odpovedať
1. januára 3:00
Nejprve je třeba naučit se plazit
Avatar
Miroslav Stojčenko:12. marca 14:19

Ahoj. měl bych dotaz. Patička mi nedrží fixní pozici ve spodku stránky, ale leze nahoru v závislosti na obsahu. Co s tím? Díky"

 
Odpovedať
12. marca 14:19
Avatar
Lubor Pešek
Člen
Avatar
Lubor Pešek:8. júna 11:30

Jen bych doporučil v položce menu "O mně" nahradit mezeru elementem  
Zkoušel jsem, jestli i vzorové řešení to má také tak a bohužel dochází ke stejné deformaci při menším rozlišení.
Tento tutoriál píšu ve webstormu a jen díky tomu, že je tam krásná možnost okamžitého náhledu přímo v IDE (který má poloviční okno), tak jsem si všiml, že položka menu O mně se díky mezeře rozdělí na dvě půlky a to rozhodně není žádoucí. Tak by bylo možná dobré nejen pro posluchače tohoto tutoriálu, ale i přímo do zadání přidat toto řešení (kór, když pár lekcí zpátky se o tom dokonce přímo mluvilo).
Zkuste si to, jestli se vám také při deformaci okna tato položka rozdělí ve dví.
Je to minimálně dobrá zkušenost. Do tlačítek nedávat mezery, ale přímo  

Odpovedať
8. júna 11:30
Existují dva způsoby, jak vyřešit problém. Za prvé vyhoďte počítač z okna. Za druhé vyhoďte okna z počítače.
Avatar
Stanislav Krajči:16. júna 13:55

Moc vám přeji ať máte nadbytek dělat videa, protože v 5 minutách demonstrace jsou 3 stránky textu, které tady zase chybí..pro začátečníky dost neuchopitelné a já věřím tomu, že rozepsat to všechno jako lze a le zase to může být matoucí..Je to prostě learning by doing a na začátku to bolí :))...video!!

 
Odpovedať
16. júna 13:55
Avatar
Ondřej Raška:23. júna 12:00

Zlepšení oproti několika předchozím lekcím.

Líbí se mi návrat k přístupu: "Málo věcí vysvětleno na velkém prostoru", místo předchozího: "Hodně věcí vysvětleno na mlém prostoru."

Problém je, že abych tuto lekci pochopil napoprvé a za pár minut, tak jsem některé předchozí lekce musel procházet hodiny a hodiny furt dokola + hledat externí pomoc.

Lekce jako taková solidní nadprůměr.

 
Odpovedať
23. júna 12:00
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!