Hledáš dárek, který neskončí v koši? Nyní 90 % extra kreditů ZDARMA s promo kódem PREKVAPENI90. Zjisti více:
NOVINKA: Staň se datovým analytikem od 0 Kč a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:

Diskuze – Lekce 4 - Dokončení responzivního menu

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
Nejnovější komentáře jsou na konci poslední stránky.
Avatar
Lukáš Hypša
Člen
Avatar
Lukáš Hypša:18.6.2018 20:55

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

Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Lukáš Hypša
Honza Bittner:18.6.2018 21:01

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

Odpovědět
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Pavel Svarc
Člen
Avatar
Pavel Svarc:21.5.2019 14:18

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

Avatar
Aleš Novotný
Člen
Avatar
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?

Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Aleš Novotný
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. ;)

Odpovědět
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Aleš Novotný
Člen
Avatar
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.

Avatar
Robert Vyskup
Člen
Avatar
Robert Vyskup:20.9.2021 21:43

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

Avatar
Alesh
Tvůrce
Avatar
Odpovídá na Robert Vyskup
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
Avatar
Robert Vyskup
Člen
Avatar
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í.

Avatar
Robert Vyskup
Člen
Avatar
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.

Nejnovější komentáře jsou na konci poslední stránky.
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 33.