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

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře

Anna Ove Bahulíková

Člen

Anna Ove Bahulíková:13.9.2019 18:52

Ahoj, mám takový problém. Myslím, že s tím tutoriál úplně nepočítá. Když mám fixí pozoci navigace a okno fakt jako hodně zúžím, tak se mi hodí navigace na dva řádky, ale už bohužel v tom případě za sebou nemá to tmavé pozadí a zasahuje do article section, tudíž bílé na bílém není vidět. Pokud okno prohlížeče zúžím jen trochu, všechno zůstává hezky na místě a v barvě. Mám obavu, aby to nedělalo problémy. Je to nějak jednoduše řešitelné?

Odpovědět

13.9.2019 18:52

Jakub Podskalský

Člen

Jakub Podskalský:13.9.2019 19:38

Ahoj, jde o to, že jednotlivé elementy v headeru jsou nastaveny staticky, tudíž když se jejich nastavené délky nevejdou danou šířkou do šířky okna, tak se zalomí. Nějakou délku zabírá samozřejmě i padding a margin.
Dalo by se tomu zabránit např. tím, že použiješ relativní jednotky. Procenta, em, rem...

Odpovědět

13.9.2019 19:38

Jaroslav Smrž

Tvůrce

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 */

Jaroslav Smrž

Tvůrce

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 */

Mirek Matějka

Člen

Mirek Matějka:6.2.2020 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.2.2020 11:41

DoZby

Člen

DoZby:8.3.2020 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.3.2020 11:02

Ztrácej svůj čas a čekej na zázrak

Jakub Podskalský

Člen

Jakub Podskalský:8.3.2020 14:34

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

Odpovědět

8.3.2020 14:34

Jan Hraško

Člen

Jan Hraško:1.5.2020 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.5.2020 21:09

Adam Tyrpak

Člen

Adam Tyrpak:29.5.2020 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.5.2020 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...

Adam Tyrpak

Člen

Adam Tyrpak:29.5.2020 13:06

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

Odpovědět

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

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

Nejčastěji vyhledáváné

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