Diskusia – 4. diel - Dokončenie responzívneho menu

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre

Posledné komentáre sú na spodnej časti poslednej stránky.

Lukáš Hypša

Člen

Lukáš Hypša:18.6.2018 20:55

Pořád tam chybí poznámka, že "nav.menu a" se styluje relativně

Odpovedať

Honza Bittner

Tvůrce

Honza Bittner:18.6.2018 21:01

Díky, dopsal jsem to a poslal ke schválení. :-)

Odpovedať

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Pavel Svarc

Člen

Pavel Svarc:21.5.2019 14:18

Děkuji... skvělý námět.

Odpovedať

Aleš Novotný

Člen

Aleš Novotný:1.1.2020 22:59

Prosimtě, jak máš ty tlačítka vedle sebe a červeně, tak se mi to zaboha nedaří, mám je pořád jako názvy pod sebou a modře.
Tak sem si stáhl ten hotový vzor od tebe pod článkem. Tak tam taky jsou jen názvy pod sebou a modrá plocha.
Jak to?

Odpovedať

Honza Bittner

Tvůrce

Honza Bittner:2.1.2020 0:51

V ukázce pro stažení je samozřejmě finální verze, kde červeně zvýrazněné bloky nejsou. Kód je popsán dle mého v souladu s tím, co to má dělat, takže zřejmě děláš někde chybu. Zkus se ujistit, že splňuješ danou podmínku pro @media, případně celý kód otestuj bez @media pravidla.

Odpovedať

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Aleš Novotný

Člen

Aleš Novotný:2.1.2020 8:16

závadu jsem našel, ale neodstranil.
Učím se to na mobilu. Kody mám napsané dobře, ale mobil mi to nezobrazí - po zadání kódu @media mi to mobil nezobrazuje. Nezobrazí mi ani váš hotový vzor. PC ano.

Odpovedať

Robert Vyskup

Člen

Robert Vyskup:20.9.2021 21:43

Může mi někdo více vysvětlit funkci elementů <ul> <li> ?

Odpovedať

Alesh

Tvůrce

Alesh:20.9.2021 23:20

S webem jsem dělal naposledy asi před 15 lety, ale furt si pamatuju, že <ul> vytváří nečíslovaný seznam (unordered list) a <li> pak položku seznamu (z angl. list item). Pak máš samozřejmě ještě číslovaný seznam (ordered list), tag <ol>, kde položky tvoříš stejným tagem jako u nečíslovaného seznamu.

<ul>
    <li>jabko</li>
    <li>pomrdanč</li>
    <li>mrdalinka</li>
</ul>

jabko
pomrdanč
mrdalinka

Odpovedať

Robert Vyskup

Člen

Robert Vyskup:21.9.2021 0:38

Jo díky, já teď řeším opačný problém, než je tady v úloze. Jsem si udělal stránky klasicky ve verzi pro tablet/desktop, a teď se to snažím udělat mobile first. Moc si s tím nevím rady. Asi tu hodím ten kód jestli mi s tím někdo poradí.

Odpovedať

Robert Vyskup

Člen

Robert Vyskup:21.9.2021 1:22

Tak tady je ten kód

nav {
        text-align: center;
        padding: 20px;
        background: #A5CEF8;
}
nav a {
        padding: 8px 15px;
        background: #3B94E0;
        text-decoration: none;
        color: white;
        font-family: Verdana;
        text-shadow: 0px 0px 5px black;
        border-radius: 5px;
        border: 1px solid #2E80C7;
}
nav a:hover
{
        background: #58ADF8;
        border: 1px solid #3B94E0;
}
h1 {text-align: center;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        padding: 20px;}
section p {text-align: left;
                        font-family: Verdana, Geneva, Tahoma, sans-serif;
                        padding: 20px;}
        .horoskop {float: right;
                                text-align: center;
                                padding: 20px;
                                background: #A5CEF8;}
        .horoskop a {
                padding: 8px 15px;
                background: #3B94E0;
                text-decoration: none;
                color: white;
                font-family: Verdana;
                text-shadow: 0px 0px 5px black;
                border-radius: 5px;
                border: 1px solid #2E80C7;}
        .horoskop a:hover{
                background: #58ADF8;
                border: 1px solid #3B94E0;}

Chápu, že před toto dám @media (min-width: 600px) a výše uvedený kód umístím do složených závorek. Takto budu mít desktop verzi. Nad ní bude ten kód pro mobil. Ale jak mám ten kód upravit aby byl mobile friendly? Chtěl bych aby se napřed zobrazily h1 a pak section p s třídou horoskop (tu mám v html zakomponovanou v odstavcích jsou to tři navigační panely, vždy jeden po odstavci), a až pak by šla hlavní navigační lišta, která by byla každý panel pod sebou. Hodím sem pak ještě ten html kód.

Odpovedať

Posledné komentáre sú na spodnej časti poslednej stránky.

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 10 správy z 33.

Najčastejšie vyhľadávané

Diskusia – 4. diel - Dokončenie responzívneho menu