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

V předešlém cvičení, Řešené úlohy k 16.-18. 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.

Pozadí `<html>`

Pokud bude mít někdo velký monitor nebo si otevře nějakou podstránku, kde je málo obsahu, bude okno prohlížeče vyšší, než je naše stránka. Pod stránkou se pak vykreslí prázdné bílé místo. Toho se zbavíme buď tak, že stránku roztáhneme (což by vyžadovalo další použití flexboxu) nebo jen jednoduše nastavíme celé stránce šedé pozadí. Tak konec stránky splyne s patičkou, kterou vytváříme. Na obrázku níže je znázorněno bílé místo pod stránkou, které se obarvilo na barvu patičky a vypadá to, jako by tam patička pokračovala:

Prodloužení patičky webu v HTML a CSS - Webové stránky krok za krokem

Elementu <html> tedy nastavíme stejně tmavé pozadí, jako má patička. Do styl.css tedy přidáme:

html {
    background: #414042;
}

Jinak zde kolem patičky není moc co vymýšlet. Nastavíme výšku na 100px, padding, barvu textu, pozadí a ve vlastnosti box-sizing zvolíme hodnotu border-box, aby byla výška patičky opravdu oněch 100px 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% 105%, 0 105%);
}

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.

Hodnota 105 % (místo očekávatelných 100 %) u clip-path je zde proto, že Chrome při zoomování stránky občas vykreslí clip-path o 1px menší a patička pak přesně nedoléhá k pozadí.

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

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, když jsme elementu <article> v CSS nastavili toto:

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

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-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;
    box-sizing: border-box;
    margin: 0;
    padding: 100px 0px 0px 0px;
    min-width: 960px;
}

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 5609x (2.28 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

Článek pro vás napsal David Hartinger

Uživatelské hodnocení:

1718 hlasů

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.

Aktivity

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

Kontaktní a referenční tlačítko

Patička

Pozadí <html>

Fixní menu

Statická pozice (static)

Relativní pozice (relative)

Absolutní pozice (absolute)

Fixní pozice (fixed)

Podpora různých rozlišení

Stáhnout

Pozadí `<html>`

Statická pozice (`static`)

Relativní pozice (`relative`)

Absolutní pozice (`absolute`)

Fixní pozice (`fixed`)