NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

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

 
Odpovědět
18.6.2018 20:55
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
18.6.2018 21:01
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.

 
Odpovědět
21.5.2019 14:18
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?

 
Odpovědět
1.1.2020 22:59
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
2.1.2020 0:51
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.

 
Odpovědět
2.1.2020 8:16
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> ?

 
Odpovědět
20.9.2021 21:43
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
 
Odpovědět
20.9.2021 23:20
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í.

 
Odpovědět
21.9.2021 0:38
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.

 
Odpovědět
21.9.2021 1:22
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.