80 % bodů zdarma na online výuku díky naší Letní akci!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP

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.

Patička

Začněme stylováním patičky. Zde není moc co vymýšlet. Nastavíme výšku, barvu textu a levý a horní okraj:

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

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

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

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

Patička v HTML a CSS

Pole s obsahem článku (section) je na article velmi namačkané, nastavme article svislý padding na 30px:

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

Lepší, ne?

Podpora různých rozlišení

Již jsme web navrhli tak, aby byl použitelný v rozlišení s šířkou 960 pixelů a větším. Podporujeme tedy rozlišení 1024x768 a vyšší. Typické rozlišení pro dnešní dobu je 1280x800 na noteboocích (tam náš web vypadá stále dobře) a full-hd (1920x1080) na desktopech. Podívejme se, jak náš web vypadá ve full-hd:

Web ve full-hd

Není to úplně ideální. Rozlišení by mohlo být ještě vyšší, měli bychom web navrhnout tak, aby vypadal solidně i v takovém případě. Zde je vidět, proč jsme nastavili šedé pozadí celému body a ne jen patičce. Je to z toho důvodu, aby se ve vysokém rozlišení patička takto protáhla a nevzniklo dole bílé místo. Většina stránek na webu má však delší obsah, takže tento úvodní článek je spíše extrémní případ, nicméně je dobré počítat i s ním.

Šířka pole s článkem

Někteří (hlavně učitelé a teoretikové) tvrdí, že by se mělo pole s obsahem webu přizpůsobovat velikosti okna prohlížeče. Je však nemožné ten samý článek naformátovat tak, aby vypadal dobře v rozlišení 1024x768 i ve full-hd. Ve full-hd se obvykle z odstavců textu stanou jen dlouhé nudle. Viděli jste někdy knihu napsanou vodorovně na roli papíru? Já tedy ne. Všimněte si, že drtivá většina webů (hlavně ty, co za něco stojí) mají pevně určenou velikost pole s článkem. Jako výjimku znám asi jen Wikipedii. Section tedy roztahovat nebudeme.

Co však můžeme zlepšit je stránku vycentrovat, aby si uživatel s širokým monitorem nevykloubil krk, až bude náš web číst.

Jelikož potřebujeme vycentrovat 2 elementy uvnitř article (header a section), obalíme je oba do elementu div s nějakým ID:

<article>
    <div id="centrovac">
        <header>
        ...
        </section>
        <div class="cistic"></div>
    </div>
</article>
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Samotný blokový element uvnitř blokového jsme ještě necentrovali. Zatím jsme centrovali pouze obrázek (element řádkový), což šlo pomocí nastavení text-align elementu, ve kterém je obrázek vložený. Tato vlastnost však nemá na blokové elementy žádný vliv. Centrovač vystředíme tak, že mu nastavíme vodorovný vnější okraj (margin) na hodnotu auto. Aby to fungovalo, musíme elementu samozřejmě nastavit i šířku (jinak by se roztáhl přes celý article):

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

Výsledek:

Web ve full-hd

Tímto jsme náš layout v podstatě dokončili. Pokud máte chuť, přidáme si do něj ještě takovou vychytávku - fixní menu.

Fixní menu

Hlavička s navigačním menu je poměrně nízká, můžeme na ni aplikovat zajímavou vlastnost, kterou je fixní pozice. O pozicích jsme se ještě nezmiňovali, napravme to.

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, up a down. 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, 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á.

Zkusme si hlavičce nastavit různé pozice, abychom pochopili, jak fungují. Jak vypadá s fixní pozicí víme, zkusme ji nyní nastavit pozici relativní a horní souřadnici na 50px:

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

Aby se změny neprojevily i u headeru článku, nastavíme mu position na static:

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

Výsledek:

Relativní pozice v CSS

Vidíme, že celý element se i se svým obsahem posunul o 50 pixelů dolů a překrývá ostatní elementy. Ostatní elementy se nijak neposunuly, web se chová tak, jako by element byl stále na původní pozici, jen se vykresluje kousek vedle.

Nyní změňme pozici na absolutní:

position: absolute;

Výsledek:

Absolutní pozice v CSS

Vidíme, že element ze stránky úplně zmizel a objevil se nad ostatním obsahem na pozici, kterou jsme mu dali. Na jaké pozici byl původně vůbec nahraje roli.

Zkusme si naposledy fixní pozici, u které zůstaneme. Zkuste si nyní stránkou rolovat (musíte zmenšit okno prohlížeče), hlavička zůstává na svém místě. Nyní nastavme pozici na fixní a top na 0px:

position: fixed;
top: 0px;

Hlavička vypadá stejně, jako u pozice absolutní. Když však stránkou rolujeme, zůstává 0px od horní hrany okna:

Fixní pozice v CSS

Jelikož element ze svého místa zmizel, dáme místo něj u body margin:

margin: 73px 0px 0px 0px;

Určitě jste si také všimli, že si element nezachoval svou původní šířku a také je třeba nastavit pozadí. Dodejme headeru vlastnost width s hodnotou 100% a obrázek na pozadí:

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

Pozadí se nám nyní aplikuje i na header článku, tam ho tedy zrušíme:

background: none;

Výsledek:

Fixní navigační menu v HTML a CSS

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.

Menu zůstává na svém místě i když stránkou rolujeme. Gratuluji vám, pokud jste se dostali sami až sem, máte jednak hotový layout a jednat 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, Tvorba podstránek a kontaktní formulář, dokončíme jednotlivé podstránky našeho webu, abychom ho mohli nahrát na internet.


 

Stáhnout

Staženo 3720x (85.9 kB)
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
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
54 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (3)

 

 

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

Avatar
Jaroslav Smrž
Super redaktor
Avatar
Jaroslav Smrž:14.9.2019 6:54

Ahoj, pokud chceš použít fixní navbar, je jasné, že mu musíš přizpůsobit i obsah stránky pod ním, tzn aby navbar měl stále stejnou výšku a nevytékal ti do obsahu kvůli zalamování položek menu. Opět doporučím použití Bootstrap responsivního navbaru.
Nejprve přidej responsivní meta tag a bootstrap CSS mezi tagy <head></head>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Samotný kód fixního menu bude vypadat následovně:

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Logo</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">Dashboard</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" asp-area="" asp-controller="Employees" asp-action="Index">Zaměstnanci</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

Navbar a položky menu si pak můžeš nastylovat ve vlastním CSS souboru s použitím !important za definicí. Např:

.navbar {
    border-bottom: 1px solid #cccccc !important;
}

Fixní navbar má nastavenou výšku 50px, proto musíš ještě v CSS nastavit body padding-top na 50px.
Výsledek uvidíš na přiloženém obrázku.

Odpovědět
14.9.2019 6:54
/* Life runs on code */
Avatar
Jaroslav Smrž
Super redaktor
Avatar
Jaroslav Smrž:14.9.2019 6:58

Značky začínající asp vymaž, kopíroval jsem to z .net core projektu. Místo nich použiješ href="soubor.html"

Odpovědět
14.9.2019 6:58
/* Life runs on code */
Avatar
Mirek Matějka:6. února 11:41

Ahoj, sice je o této asi chybě již zmínka v předchozí diskusi, ale bez reakce, tak to zkusím přidat také: Ve výkladu o "statické pozici" se objevuje věta: "Všechny naše elementy mají nyní fixní pozici". Asi by tam správně mělo být napsáno: "... mají nyní statickou pozici." Nebo tomu špatně rozumím?

 
Odpovědět
6. února 11:41
Avatar
Freezy
Člen
Avatar
Freezy:8. března 11:02

Ahoj, nejspíš jsem našel překlep: *Relativní pozice (relative)
Pokud nastavíme elementu relativní pozici, můžeme mu v CSS definovat vlastnosti left, right, up a **down.

Vlastnost down má být nahrazena vlastností bottom.
Aspoň teď mi to tak funguje. Nevím, jestli to bylo dřív třeba jinak.
Pokud se pletu, klidně mě opravte. ;-)

Odpovědět
8. března 11:02
Ztrácej svůj čas a čekej na zázrak
Avatar
Odpovídá na Freezy
Jakub Podskalský:8. března 14:34

Ano, překlep. Stejně jako up by mělo být top. Snad bude opraveno. :)

 
Odpovědět
8. března 14:34
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jan Hraško
Člen
Avatar
Jan Hraško:1. května 21:09

Pekne krok za krokom ide tento seriál. Najlepšie ak niečo nefunguje... vtedy treba skúmať a premýšľať, vtedy je to najproduktívnejšie učenie. Strávil som 2 hodiny, kým som zisltil, že mi chýba < pre ukončenie <p>.
;-)
Ja používam editor Blaufish. Pekne zvýrazňuje, má predpirpavené funkcie...... tak je efektívny pri hľadaní chýb.

 
Odpovědět
1. května 21:09
Avatar
Adam Tyrpak
Člen
Avatar
Adam Tyrpak:29. května 13:05

Výše v komentářích se viděl, že měl někdo problém s navigací a jejím "smrsknutím" na dva řádky, pokud je stránka příliš "úzká"

Já jsem jednoduše nastavil navigaci fixní šířku, tudíž stejně jako článek se pouze vytvoří scroll a nebude se smrskávat na dva řádky a přizbůsobovat se velikosti stránky

CSS:

.fix {
        min-width: 960px;
}

HTML:

<header>
    <div id="logo"><h1>pabienko</h1></div>
    <nav class="fix">
        <ul>
            <li class="aktivni"><a href="#">Domů</a></li>
            <li><a href="#">O mně</a></li>
            <li><a href="#">Dovednosti</a></li>
            <li><a href="#">Reference</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
</header>
Odpovědět
29. května 13:05
Selhání není propast nebo překážka. Jsou to dveře k novým možnostem, které bychom bez ponaučení z chyb neměli šanci o...
Avatar
Adam Tyrpak
Člen
Avatar
Adam Tyrpak:29. května 13:06

Tedy alespoň doufám, že je to správně :D

Odpovědět
29. května 13:06
Selhání není propast nebo překážka. Jsou to dveře k novým možnostem, které bychom bez ponaučení z chyb neměli šanci o...
Avatar
Onderjepán
Člen
Avatar
Onderjepán:4. června 20:52

Ja se priznam, ze jsem to taky trochu obešel jako Adam. Znasobil jsem procentní hodnotu u headeru (u me na 300%) a to fungovalo to, kdyz jsem zuzil okno.
Taky bych se chtel zeptat jestli je to chyba nebo ne?

Dekuju

 
Odpovědět
4. června 20:52
Avatar
Dominik Marášek:12. června 16:57

Ahoj, borci a borkyně, mám otázku nad kterou dumám už pár dní a nejsem schopnej si odpovědět. Po vložení id=centrovac do kodu mi jakoby přestane fungovat float u article header a section, zkrátka se mu nadpis článku zobrazuje nad článkem samotným. Prosím dokáže mě někdo navést proč tomu tak je ?
HTML:

<!DOCTYPE html>
<html lang="cs-cz">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="styl.css" type="text/css" />
        <title>Stránka</title>
    </head>
    <body>
        <header>
            <div id="logo"><h1>Nášweb</h1></div>
            <nav>
                <ul>
                    <li><a href="rozlozeni.html">Domů</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="kontakt.html">Kontakt</a></li>
                </ul>
            </nav>
        </header>
        <article>
            <div id="centrovac">
            <header>
                <h1>O nás</h1>
            </header>
            <section>
                <p>Úvod co bude na těchto stránkách</p>
                <p>Proč jsme si stránky vlastně založili hmm</p>
                <p>Nvm další bláboly, ELi co tu chceš?!</p>
                <p>Textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</p>
                <p>Textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</p>
                <p>Textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</p>
                <p>Textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</p>
                <p>Textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</p>
                <p>Textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</p>
                <p>Textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</p>
                <p>Textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</p>
                <p>Textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</p>
            </section>
            </div>
            <div class="cistka"></div>
        </article>
        <footer>
            <p>Tohle sem si napsal sám</p>
        </footer>
    </body>
</html>

CSS:

article{
background: #6495ED;
padding: 30px 30px;
}
.centr{
    text-align: center;
}
body article h1, h2, h3{
    text-align: center;
    color:      #800080;
    font-size: 2.5em;
    text-shadow: 2px 2px 1px #000000;
    color: white;
}
body{
    background: url('pics/cerna.png') #000000;
    font-size: 1.3em;
    margin: 50px 0px 0px 0px;
    min-width: 960px;
}
article header{
    margin: 0px;
    float: left;
}
article section{
    float: right;
    background: white;
    border-radius: 10px;
    box-shadow: 2px 2px 7px #1c2228;
    padding: 20px;
}
.cistka{
    clear: both;
}
.cistkal{
    clear: right;
}
body > header{
    position: fixed;
    top: 0px;
}
#logo{
    background: url('pics/pisk.png') no-repeat;
    background-size: 100%;
    float: left;
    width: 50px;
    height: 64px;
    margin: 0px 0px 0px 10px;
}
#logo h1{
    margin: 0px 0px 0px 55px;
    color: white;
    float: left;
}
nav{
    float: left;
}
nav ul{
    list-style-type: none;
    max-width: 500px;
    margin: 0px 0px 0px 100px;
}
nav ul li{
    float: left;
    padding: 20px 25px 27px 25px;
    margin: 0px 20px;
    line-height: 160%;
}
nav ul li a {
    color: white;
    text-decoration: none;
}
nav ul li:hover, .aktivni{
    background: #DAA520;
}
footer{
    color: white;
    font-size: 0.5em;
}
#centrovac{
    margin: 0px auto;
    width: 960px;
}

Vim že tady s tim budu zbytečně někoho otravovat, ale budu moc vděčnej za radu.
Omluvte prosím jestli jsem něco napsal nesrozumitelně nebo špatně přidal kod či cokoliv.

 
Odpovědět
12. června 16:57
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 122. Zobrazit vše