19. diel - Fixné menu a pozíciovanie v CSS

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

Dnešný HTML/CSS tutoriál venujeme štylovaniu a dokončíme layout (rozloženie) webu.

Kontaktné a referenčné tlačidlo

Začneme tým, že si ostylujeme kontaktné a referenčné tlačidlo, ktoré sme si už v HTML kóde predpripravili. Prečo zvýrazniť v navigačnom menu podstránku s kontaktmi? Jednoducho preto, že užívateľovi (napríklad zákazníkovi, zamestnávateľovi...) chceme čo najviac uľahčiť možnosť kontaktovať nás. Navrhujem teda použiť oranžovú farbu, ktorá je príjemne výrazná a neprehliadnuteľná:

.contact-button {
    background: #EF6534;
    padding: 10px 20px;
    border-radius: 20px;
}

Štylizácia tohto tlačidla je veľmi podobná nášmu referenčnému tlačidlu, len je o niečo menšia. Obe tlačidlá teraz upravíme, ak na ne užívateľ nabehne myšou (použijeme opäť pseudoselektor :hover):

.contact-button:hover,
.references-button:hover {
    filter: brightness(115%) contrast(85%);
    border: 0;
}

Pomocou vlastnosti filter za použitia funkcií brightness() (svetlosť) a contrast() (kontrast) zosvetľujeme oblasť tlačidla po nabehnutí myšou. Nastavením vlastnosti border na hodnotu 0 zabraňujeme podčiarknutiu textu "Kontakt" v hornom menu.

Naša stránka vyzerá teraz takto:

My First Webstite

index.html

Pätička

Teraz sa vrhneme na štylovanie pätičky.

Pozadie `<html>`

Pokiaľ bude mať niekto veľký monitor alebo si otvorí nejakú podstránku, kde je málo obsahu, bude okno prehliadača vyššia, než je naša stránka. Pod stránkou sa potom vykreslí prázdne biele miesto. Toho sa zbavíme buď tak, že stránku roztiahneme (čo by vyžadovalo ďalšie použitie flexboxu) alebo len jednoducho nastavíme celej stránke sivé pozadie. Tak koniec stránky splynie s pätičkou, ktorú vytvárame. Na obrázku nižšie je znázornené biele miesto pod stránkou, ktoré sa zafarbilo na farbu pätičky a vyzerá to, ako by tam pätička pokračovala:

Predĺženie pätičky webu v HTML a CSS - Webové stránky krok za krokom

Elementu <html> teda nastavíme rovnako tmavé pozadie, ako má pätička. Do styl.css teda pridáme:

html {
    background: #414042;
}

Inak tu okolo pätičky nie je veľmi čo vymýšľať. Nastavíme výšku na 100px, padding, farbu textu, pozadia a vo vlastnosti box-sizing zvolíme hodnotu border-box, aby bola výška pätičky naozaj oných 100px aj po pridaní padding:

footer {
    box-sizing: border-box;
    text-align: center;
    height: 100px;
    color: white;
    background: #414042;
    padding: 50px 0 0 0;
    clip-path: polygon(0 30px, 100% 0, 100% 105%, 0 105%);
}

Najzaujímavejšie je pravdepodobne použitie vlastnosti clip-path s funkciou polygon() (mnohouholník). Táto vlastnosť oreže obsah elementu podľa odovzdaného tvaru. My ako tvar používame mnohouholník vytvorený spomínanou funkciou polygon(), ktorá berie súradnice troch a viacerých bodov mnohouholníka. Tieto súradnice sú relatívne k danému elementu, teda bod 0 0 sa nachádza v ľavom hornom rohu elementu a bod 100% 100% v pravom dolnom rohu. Mohli by sme použiť napríklad aj elipsu ellipse() alebo kruh circle(), to by však k nášmu designu nepasovalo.

Hodnota 105% (namiesto očakávateľných 100%) u clip-path je tu preto, že Chrome pri zoomovaní stránky občas vykreslí clip-path o 1px menšiu a pätička potom presne nedolieha k pozadiu.

Podobne ako odkaz v hlavičke naštylujeme aj odkaz v pätičke:

footer a {
    color: white;
    text-decoration: none;
}

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

My First Webstite

index.html

Hlavička s navigačným menu sa skvele hodí k tomu, aby sme na ňu aplikovali zaujímavú vlastnosť – fixnú pozíciu. Hlavičku pomocou nej zafixujeme na hornej hrane okna stránky, takže keď sa bude rolovať dole, hlavička bude stále vidieť. To je dôležité pre možnosť orientovať sa rýchlo na webe bez nutnosti stále rolovať. Pri dlhých článkoch by to pre užívateľov mohlo byť zbytočne zdĺhavé.

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

Statická pozícia (`static`)

Všetky elementy v HTML majú ako predvolenú 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ívna pozícia (`relative`)

Pokiaľ nastavíme elementu relatívnu pozíciu, môžeme mu v CSS definovať vlastnosti left, right, top a bottom. Tu môžeme pomocou pixelov alebo percent nastaviť, o koľko má byť element posunutý oproti svojej originálnej pozícii. Pokiaľ elementu napr. nastavíme ľavú pozíciu na 20px, zobrazí sa 20px napravo od svojho pôvodného miesta.

Pokiaľ je 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 (napríklad z-index: 20;), elementy nižšie nižšie.

Absolútna pozícia (`absolute`)

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

Fixná pozícia (`fixed`)

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

Práve túto pozíciu použijeme pre našu hlavičku. Presunieme sa k nášmu selektoru body > header, v ktorom pridáme vlastnosť position s hodnotou fixed:

body > header {
    height: 100px;
    width: 100%;
    background: #00386B;
    color: white;
    display: flex;
    justify-content: space-evenly;
    position: fixed;
    z-index: 1;
    top: 0;
}

Hlavičke sme taktiež nastavili z-index na hodnotu 1, vďaka čomu sa hlavička bude zobrazovať nad všetkými ostatnými elementmi. Pokiaľ by sme z-index nestanovili, prekrýval by nám v tomto prípade hlavičku náš obrázok. Ďalej sme potom pridali aj vlastnosť top s hodnotou 0, aby sa hlavička zobrazovala vždy na hornej hrane okna stránky.

Menu zostáva na svojom mieste, aj keď stránkou rolujeme.

Pozicovanie 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.

Týmto sme náš web v podstate dokončili. Poďme si však ešte prebrať a osvetliť niektoré aspekty štylovania, ktoré sme v predchádzajúcich lekciách iba zahryzli.

Podpora rôznych rozlíšení

Je samozrejme dosť nereálne, aby sme vytvorili riešenie na mieru pre všetky typy zariadení, a teda pre všetky možné rozlíšenia, ktoré dnes existujú. Náš prvý web však vyvíjame primárne na desktop. Klasické rozlíšenie monitora je dnes 1024x768 a vyššie.

Tvorbe responzívnych stránok, teda tých, ktoré sa dokážu prispôsobovať rôznym veľkostiam displejov, sa venuje kurz Responzívny webdesign.

Ak by sme však nechali obsah článku, aby sa roztiahol cez celú šírku monitora, používateľ by nám najskôr nepoďakoval - a ani by to nevyzeralo pekne. Väčšinou sa preto odporúča nastaviť maximálnu šírku na 960px a obsah vycentrovať. My sme tak už urobili, keď sme elementu <article> v CSS nastavili toto:

article {
    margin: 0 auto;
    max-width: 960px;
    padding: 50px 50px 10px 50px;
}

Upravíme si ešte selektor body, v ktorom telu stránky <body> nastavíme:

padding na 100 pixelov zhora, aby nám hlavička neprekrývala jeho obsah,
min-width na 960 pixelov, aby sa nám stránka nedeformovala pri prílišnom zmenšení.

body {
    font: 14px "Poppins";
    background: #f9f9f9;
    color: #414042;
    box-sizing: border-box;
    margin: 0;
    padding: 100px 0px 0px 0px;
    min-width: 960px;
}

Takto vyzerá po dnešných úpravách náš web:

My First Webstite

index.html

Gratulujem vám, ak ste sa dostali sami až sem, máte jednak hotový layout a jednak viete slušne HTML a CSS. Dnešný kód je ako vždy na stiahnutie v prílohe.

V budúcej lekcii, Meta tagy, tvorba podstránok a kontaktný formulár, si predstavíme meta tagy a dokončíme jednotlivé podstránky nášho webu, aby sme ho mohli nahrať na internet.

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é 0x (2.28 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

Článok pre vás napísal David Hartinger

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í.

David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.

Aktivity

19. diel - Fixné menu a pozíciovanie v CSS

Kontaktné a referenčné tlačidlo

Pätička

Pozadie <html>

Fixné menu

Statická pozícia (static)

Relatívna pozícia (relative)

Absolútna pozícia (absolute)

Fixná pozícia (fixed)

Podpora rôznych rozlíšení

Stiahnuť

Pozadie `<html>`

Statická pozícia (`static`)

Relatívna pozícia (`relative`)

Absolútna pozícia (`absolute`)

Fixná pozícia (`fixed`)