Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
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í.
BF extended 2022

Lekce 14 - Fixní menu a pozicování v CSS

V předešlém cvičení, Řešené úlohy k 12.-13. lekci HTML a CSS, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

Dnešní HTML/CSS tutoriál věnujeme stylování a dokončíme layout (rozložení) webu.

Kontaktní a referenční tlačítko

Začneme tím, že si ostylujeme kontaktní a referenční tlačítko, která jsme si už v HTML kódu předpřipravili. Proč zvýraznit v navigačním menu podstránku s kontakty? Jednoduše proto, že uživateli (například zákazníkovi, zaměstnavateli...) chceme co nejvíc usnadnit možnost kontaktovat nás. Navrhuji tedy použít oranžovou barvu, která je příjemně výrazná a nepřehlédnutelná:

.kontakt-tlacitko {
    background: #EF6534;
    padding: 10px 20px;
    border-radius: 20px;
}

Stylizace tohoto tlačítka je velice podobná našemu referenčnímu tlačítku, jen je o něco menší. Obě tlačítka nyní upravíme, pokud na ně uživatel najede myší (použijeme opět pseudoselektor :hover):

.kontakt-tlacitko:hover,
.reference-tlacitko:hover {
    filter: brightness(115%) contrast(85%);
    border: 0;
}

Pomocí vlastnosti filter za použití funkcí brightness() (světlost) a contrast() (kontrast) zesvětlujeme oblast tlačítka po najetí myší. Nastavením vlastnosti border na hodnotu 0 zabraňujeme podtrhávání textu "Kontakt" v horním menu.

Naše stránka vypadá nyní takto:

Moje první webová stránka
index.html

Patička

Nyní se vrhneme na stylování patičky. Zde není moc co vymýšlet. Nastavíme výšku na 100 pixelů, padding, barvu textu, pozadí a ve vlastnosti box-sizing zvolíme hodnotu border-box, aby byla výška patičky opravdu oněch 100 pixelů i po přidání 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% 100%, 0 100%);
}

Nejzajímavější je pravděpodobně použití vlastnosti clip-path s funkcí polygon() (mnohoúhelník). Tato vlastnost ořízne obsah elementu podle předaného tvaru. My jako tvar používáme mnohoúhelník vytvořený zmiňovanou funkcí polygon(), která bere souřadnice tří a více bodů mnohoúhelníku. Tyto souřadnice jsou relativní k danému elementu, tedy bod 0 0 se nachází v levém horním rohu elementu a bod 100% 100% v pravém dolním rohu. Mohli bychom použít třeba i elipsu ellipse() nebo kruh circle(), to by však k našemu designu nepasovalo.

Podobně jako odkaz v hlavičce nastylujeme i odkaz v patičce:

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

To bylo jednoduché, že? Výsledek:

Moje první webová stránka
index.html

Fixní menu

Hlavička s navigačním menu se skvěle hodí k tomu, abychom na ni aplikovali zajímavou vlastnost - fixní pozici. Hlavičku pomocí ní zafixujeme na horní hraně okna stránky, takže když se bude rolovat dolů, hlavička bude stále vidět. To je důležité pro možnost orientovat se rychle na webu bez nutnosti pořád rolovat. U dlouhých článků by to pro uživatele mohlo být zbytečně zdlouhavé.

Pozici určitému elementu nastavujeme pomocí CSS vlastnosti position. V HTML máme 4 typy pozic:

Statická pozice (static)

Všechny elementy v HTML mají jako výchozí statickou pozici. Element je jednoduše zobrazen na té pozici, na které je definován a to s ohledem na ostatní elementy na stránce. Všechny naše elementy mají nyní fixní pozici, jednoduše řečeno zobrazují se tam, kde mají :)

Relativní pozice (relative)

Pokud nastavíme elementu relativní pozici, můžeme mu v CSS definovat vlastnosti left, right, top a bottom. Zde můžeme pomocí pixelů nebo procent nastavit, o kolik má být element posunutý oproti své originální pozici. Pokud elementu např. nastavíme levou pozici na 20px, zobrazí se 20px napravo od svého původního místa.

Pokud je vpravo od tohoto elementu jiný element, tak se tento jiný element neposune, ale bude elementem zleva překryt. Který element bude na popředí můžeme nastavit pomocí vlastnosti z-index. Elementy výše mají vyšší číselné hodnoty (např. z-index: 20;), elementy níže nižší.

Absolutní pozice (absolute)

Absolutní pozice zobrazí element na daných souřadnicích bez ohledu na jeho originální pozici v HTML obsahu. Pokud tedy nastavíme elementu left na 20px, zobrazí se element 20px od levého okraje okna. Pokud jsou pod ním jiné elementy, překryje je.

Fixní pozice (fixed)

Fixní pozice funguje podobně, jako pozice absolutní, ale souřadnice se počítají v oblasti, která je vidět. Rolování scrollbarem tedy nemá na takové prvky vliv, zůstávají na svém místě, i když se ostatní obsah posouvá.

Právě tuto pozici použijeme pro naši hlavičku. Přesuneme se k našemu selektoru body > header, ve kterém přidáme vlastnost 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čce jsme taktéž nastavili z-index na hodnotu 1, díky čemuž se hlavička bude zobrazovat nad všemi ostatními elementy. Pokud bychom z-index nestanovili, překrýval by nám v tomto případě hlavičku náš obrázek. Dále jsme pak přidali i vlastnost top s hodnotou 0, aby se hlavička zobrazovala vždy na horní hraně okna stránky.

Menu zůstává na svém místě, i když stránkou rolujeme.

Pozicování používejte jen v případě, že víte, co děláte. Zpravidla se používá jen velmi zřídka a je velkou chybou sestavovat web zadáváním desítek absolutních souřadnic.

Tímto jsme náš web v podstatě dokončili. Pojďme si však ještě probrat a osvětlit některé aspekty stylování, které jsme v předchozích lekcích pouze nakousli.

Podpora různých rozlišení

Je samozřejmě dost nereálné, abychom vytvořili řešení na míru pro všechny typy zařízení, a tedy pro všechna možná rozlišení, která dnes existují. Náš první web však vyvíjíme primárně pro desktop. Klasické rozlišení monitoru je dnes 1024x768 a vyšší.

Tvorbě responzivních stránek, tedy těch, které se dokáží přizpůsobovat různým velikostem displejů, se věnuje kurz Responzivní webdesign.

Pokud bychom však nechali obsah článku, aby se roztáhnul přes celou šíři monitoru, uživatel by nám nejspíš nepoděkoval - a ani by to nevypadalo hezky. Většinou se proto doporučuje nastavit maximální šířku na 960px a obsah vycentrovat. My jsme tak již učinili. Obsah elementu <article> jsme zabalili do elementu <div> s id="centrovac" a v CSS napsali selektor #centrovac:

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

Upravíme si ještě selektor body, ve kterém tělu stránky <body> nastavíme:

  • padding na 100 pixelů seshora, aby nám hlavička nepřekrývala jeho obsah
  • min-height na 100vh, čímž zajistíme, že tělo bude vždy minimálně tak vysoké, jako je vysoké okno stránky. Jestli si vzpomínáte, tak elementu <article> jsme nastavovali vlastnost flex: 1, díky které článek vždy zabírá největší možné dostupné místo. Tímto docílíme, že patička bude pokaždé na úplném konci stránky.
  • min-width na 960 pixelů, aby se nám stránka nedeformovala při přílišném zmenšení.
body {
    font: 14px "Poppins";
    background: #f9f9f9;
    color: #414042;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 0;
    padding: 100px 0px 0px 0px;
    min-height: 100vh;
    min-width: 960px;
}

Určitě jste si všimli, že jsme zde použili novou jednotku vh (viewport height). Hodnota 100vh udává velikostně zobrazení na výšku jedné obrazovky. Pro šířku obrazovky existuje hodnota vw (viewport width), kterou zde však nevyužijeme.

Takto vypadá po dnešních úpravách náš web:

Moje první webová stránka
index.html

Gratuluji vám, pokud jste se dostali sami až sem, máte jednak hotový layout a jednak umíte slušně HTML a CSS. Dnešní kód je jako vždy ke stažení v příloze.

V příští lekci, Meta tagy, tvorba podstránek a kontaktní formulář, si představíme meta tagy a dokončíme jednotlivé podstránky našeho webu, abychom ho mohli nahrát na internet.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 4551x (2.28 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Řešené úlohy k 12.-13. lekci HTML a CSS
Všechny články v sekci
Webové stránky krok za krokem
Přeskočit článek
(nedoporučujeme)
Meta tagy, tvorba podstránek a kontaktní formulář
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
464 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

Komentáře
Zobrazit starší komentáře (129)

Avatar
Miroslav Stojčenko:12. března 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"

 
Odpovědět
12. března 14:19
Avatar
Lubor Pešek
Člen
Avatar
Lubor Pešek:8. června 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  

Odpovědět
8. června 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. června 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!!

 
Odpovědět
16. června 13:55
Avatar
Ondřej Raška:23. června 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.

 
Odpovědět
23. června 12:00
Avatar
Lukáš Kantor:27. července 8:36

Zdravím
Já jsem primárně programátor PLC, průmyslových robotů a kamerových systémů. Programování v C# (respektive teď se učím HTML/CSS) mám jako koníček ve volném čase (toho moc není, takže toho moc neumím :D). Tutoriály jsou místy zmatené, chybí některé kroky pro laika ale po zapojení vlastního rozumu se dá dojít ke zdárnému výsledku.
Můj dotaz zní zda jsou nějaká pravidla pro řazení jednotlivých selektorů v souboru .css. Předpokládám že k projektu webových stránek se používá pouze jeden soubor a s obsahem webu roste i obsah .css takže aby se v něm dalo dobře orientovat.

 
Odpovědět
27. července 8:36
Avatar
Miroslav Švarc:15. srpna 15:13

Dobrá otázka. Alespoň takto máme rozměry pro ČLÁNEK a pro GRID zvlášť. Rozměry pro grid jsou v třídě .domu-article a rozměry pro oblast s článkem obsahující grid jsou id selektoru #centrovac.

Kdybychom časem chtěli do článku přidávat další věci mimo grid, znovu bychom museli nastavovat vlastnosti, pravděpodobně ty stejné z centrovače.

 
Odpovědět
15. srpna 15:13
Avatar
Odpovídá na Lukáš Kantor
Alena Melicharová:12. září 19:02

Taky mi vrtalo hlavou to třízení selektorů, je to asi jedno, ale snažim se to třídit abych měla aspoň zvlášť třídy a id, pak selekce h, atd, asi si každej musí najít svůj :D

Odpovědět
12. září 19:02
"Svět patří těm, co se nepo*****" (Charles Bukowski)
Avatar
Kateřina Zákostelská:15. září 23:17

konečně dovysvětlené pozicování, škoda, že tahle informace nezazněla už v 11 lekci, určitě bych pak tuto a nasledující lekce trochu lépe pochopila

 
Odpovědět
15. září 23:17
Avatar
Renáta Vyšatová:23. října 21:23

Krátká lekce, to je fajn. Ale jelikož není čas na žádné "opakování" a biflování, tak ve starších věcech mám slušný zmatek. U zmenšení své stránky mi vždy nevzhledně deformovalo položku "o mně" v navigaci, zalomilo se mi to, ale, naštěstí, díky entitě nedělitelné mezery se mi to nelomí. Nevím, jestli to je takhle v pořádku, pak se na to zeptám na prezenční výuce.

 
Odpovědět
23. října 21:23
Avatar
Jan Trnka
Člen
Avatar
Jan Trnka:12. listopadu 22:22

Lekce perfektně vysvětlená.

 
Odpovědět
12. listopadu 22:22
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 139. Zobrazit vše