NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
Mezinárodní den IT společnosti je tady! Pouze nyní můžeš získat 90 % extra kreditů při nákupu od 1199 kreditů s promo kódem AJTACI90. Tak neváhej!

Diskuze: Zasek jsem se ... :-)

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
Aktivity
Avatar
Jan Hlavatý
Člen
Avatar
Jan Hlavatý:9.5.2019 9:16

Ahoj
Zkusil jsem napsat svou první jednoduchou stránku.
Jednak s pomocí kurzu tady na ITnetwork, kombinováno s knihou HTML/CSS.
V zásadě jsem to dal dohromady tak, jak jsem si představoval, akorát se dvěma problémovými místy:

1/ V okamžiku, kdy jsem ty 4 hlavní dlaždice na stránce obalil do <a>, tak se mi v Chrome rozpadly (při šířce stránky více jak 960px jsou pod sebou, byť mají být v uspořádání 2x2). Přitom v IE 11 se zobrazují tak, jak mají (2x2 dlaždice). Ať dělám s CSS co dělám, tak je v Chrome nedokážu přinutit aby byly tak jak mají (2x2 dlaždice). Přitom než jsem dlaždice obalil do <a>, tak to fungovalo jak má.

2/ Na stránce je nastaveno, že pokud je širší jak 960px a vyšší jak 805px, tak se má zápatí přilepit na spodní okraj stránky. Což v Chrome funguje, ale v IE11 to nefunguje (zápatí pořád plave + v IE11 tím pádem nefunguje ani vertikální centrování obsahu)

Web je www.proelektroprojektanty.cz

Zkusil jsem: Všechno co zatím umím :-)

Chci docílit: 1/ aby při šířce stránky větší jak 960px byly zobrazeny dlaždice 2x2

2/ aby se zápatí a vertikální centrování v IE11 chovalo stejně jako v Chrome

Editováno 9.5.2019 9:16
 
Odpovědět
+1
9.5.2019 9:16
Avatar
Jan Hlavatý
Člen
Avatar
Jan Hlavatý:9.5.2019 10:07

Ej, tak problém č. 1 vyřešen.
Původně jsem měl v HTML nejprve <a> a v něm <section>. Když jsem to prohodil (nejprve <section> a uvnitř <a>), tak se to začalo chovat normálně. Umíte mi někdo aspoň vysvětlit proč?

S problémem č. 2 si rady nevím stále ...

 
Nahoru Odpovědět
9.5.2019 10:07
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:9.5.2019 11:24
  1. tagy maji ruzny vyznam. Obvykle uvnitr odkazu se moc tagu nepouziva. span, b, i, u. Section je nejspis blokovy tag, display:block. Odkaz je radkovy, display:inline. Neni pripustne davat do inline blokovy tag. Je pripustne zmenit display v css.
  2. Nevim, ve ff je paticka vzdy dole, at mam okno jakekoliv. Pro mne rozhodujici je Firefox, protoze obvykle vykresluje vse spravne.
@media (min-height: 805px) {

        footer { /* umĂstĂ zápatĂ natvrdo na spodnĂ okraj stránky */
                position: absolute;
                bottom: 0px;
        }

Jestli to spravne chapu, pokud vyska prekroci 805px, tak se paticka utrhne a bude plavat na spodu. Tys to chtel asi jinak, mozna max-height?

  1. Zkus pouzit validator html kodu, treba

https://validator.w3.org/#…
Tady ti treba schazi /a a podobne bude chyb i jinde. To pak muze mit kod nepredvidatelne chovani. Kazdy prohlizec si to opravuje trochu jinak.

<div>
    <ul>
        <li role="login"><a href rel="internal" title="Přihlášení do uživatelského účtu">Přihlásit</A></li>
        <li role="register"><a href rel="internal" title="Založení uživatelského účtu">Registrovat</A></li>
    </ul>
</div>

A pak treba do A tagu tlacis h2 a p, to jsou take blokove tagy. Nejspis se to vykresli spravne, ale neni to dobry postup. Odkaz by mel mit co nejkratsi text nebo obrazek. Zapni si ve Win Usnadneni Predcitani hlasem a zkus na strance pouzit klavesu tabelator pro presun mezi odkazy na strance. No, takovy nevidomi asi nebude nadseny, kdyz mu to bude cist spoustu textu.

 
Nahoru Odpovědět
9.5.2019 11:24
Avatar
Jan Hlavatý
Člen
Avatar
Jan Hlavatý:9.5.2019 11:45

Ad 1: Celá ta konstrukce s <a> má udělat to, aby každá dlaždice byla "klikatelná" a někam odkazovala (zatím na externí weby, v budoucnu na interní stránky). Proto mě napadlo celou dlaždici obalit do <a>. Nebo se to má řešit nějak jinak?

Ad 2: Ano, má to dělat to, že jakmile je výška stránky větší jak 805px, tak se zápatí "přilepí" ke spodnímu okraji, a současně se ty dlaždice 2x2 začnou vertikálně centrovat na stránce. Což v Chrome funguje (ve FF tobě asi taky, jak jsem pochopil), ale nefunguje to v IE11. V IE11 se to zápatí ke spodnímu okraji nechce "přilepit".

Ad 3: Validátor vyzkoušen, chyby pokud možno opraveny.

 
Nahoru Odpovědět
9.5.2019 11:45
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:9.5.2019 12:34

Mno, mne to nedela nic, nemam takove rozliseni, aby vyska prekrozila 850 (1400x900 a mam zaplou spodni listu win pres 2 radky, takze na samotne vnitrni okno zbyde tak max 800px).. Takze se to asi chova tak, jako by tam mic nebylo :)

 
Nahoru Odpovědět
9.5.2019 12:34
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Jan Hlavatý
Jaroslav Smrž:9.5.2019 13:48

Ahoj, na tvém místě bych se netrápil a použil bootstrap grid systém. Stejně dělat dnes web, který není responsivní nemá ani moc smysl, neboť cca 80% přístupů je z mobilního zařízení. Na stránkách www.getbootstrap.com použij, co by se ti hodilo. Většinu potřebného nalezneš v záložce "components". Jsou tam snadno použitelné karty, navbar, ale hlavně grid. Příklad pro tebe by mohl vypadat nějak takto

<!doctype html>
<html lang="cs-cz">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <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">

    <!-- Vlastni css styl -->
    <link rel="stylesheet" href="App/Content/style.css" type="text/css" />

    <title>Portál pro elektroprojektanty</title>
  </head>

  <body>
    <!-- Navbar -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container">
                <a class="navbar-brand" href="index.php">Portál pro elektroprojektanty</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" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Kontakt</a>
                        </li>
                    </ul>
                    <span class="navbar-text">
                        <i class="fa fa-user"></i>&nbsp;<a href="#">Registrovat</a>
                    </span>
                </div>
            </div>
        </nav>

        <section>
          <div class="container text-center">
            <div class="row justify-content-center">
              <div class="col-md-6">
                <a class="card text-white bg-info mb-3" href="#">
                  <div class="card-body">
                    <h5 class="card-title">Titulek</h5>
                    <p class="card-text">1. řádek, 1.karta</p>
                  </div>
                </a>
              </div>
              <div class="col-md-6">
                <a class="card text-white bg-info mb-3" href="#">
                  <div class="card-body">
                    <h5 class="card-title">Titulek</h5>
                    <p class="card-text">1. řádek, 2.karta</p>
                  </div>
                </a>
              </div>
            </div>

            <div class="row justify-content-center">
              <div class="col-md-6">
                <a class="card text-white bg-info mb-3" href="#">
                  <div class="card-body">
                    <h5 class="card-title">Titulek</h5>
                    <p class="card-text">2. řádek, 1.karta</p>
                  </div>
                </a>
              </div>
              <div class="col-md-6">
                <a class="card text-white bg-info mb-3" href="#">
                  <div class="card-body">
                    <h5 class="card-title">Titulek</h5>
                    <p class="card-text">2. řádek, 2.karta</p>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </section>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Na výsledek se můžeš podívat na http://jarda.czweb.org/Test/index.html

Nahoru Odpovědět
9.5.2019 13:48
/* Life runs on code */
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Jaroslav Smrž:9.5.2019 13:58

Kartám pak můžeš doplnit maximální šířku v rem jednotkách nebo procentech. Třída justify-content-center ti je zarovná na střed.

Nahoru Odpovědět
9.5.2019 13:58
/* Life runs on code */
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:9.5.2019 14:10

Z te casti js asi nic nepotrebuje.

 
Nahoru Odpovědět
9.5.2019 14:10
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Peter Mlich
Jaroslav Smrž:9.5.2019 14:24

Teď ne, ale třeba do budoucna bude chtít použít nějakou komponentu, která JS už vyžaduje, tak jsem to tam nechal :)

Nahoru Odpovědět
9.5.2019 14:24
/* Life runs on code */
Avatar
Jan Hlavatý
Člen
Avatar
Jan Hlavatý:9.5.2019 14:47

No jo, jenže já se zatím prokousávám základním HTML/CSS kurzem.
Nějaká Java a PHP jsou pro mě věci z jiného světa ... :-)

 
Nahoru Odpovědět
9.5.2019 14:47
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na Jan Hlavatý
Peter Mlich:9.5.2019 14:54

Co ma css a javascript spolecne s javou a php?

Bootstrap je jakasi knihovna, ktera ma vzhled vyreseny. Pouzitim jejiho css a classu si muzes usetrit spoustu prace.
zakladni html kod
https://getbootstrap.com/…ntroduction/
html kod pro karticky
https://getbootstrap.com/…onents/card/
atd...
No, a barvy si poresis dodatecne.
Samozrejme, nikdo ti nebrani udelat si vlastni css. Jen by ti to mozna usetrilo spoustu prace :)

Ja ted v praci delam projekty tak, ze primo z te dokumentace kopiruji html kod a jen prizpusobuji.
https://restartesf.slu.cz/evid2_app.php?… - prihlasovaci form (bez loginu bohuzel vic nemuzu ukazat)
https://restartesf.slu.cz/evid2_app.php?… - ukazka vystupu

Editováno 9.5.2019 14:56
 
Nahoru Odpovědět
9.5.2019 14:54
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Jan Hlavatý
Jaroslav Smrž:9.5.2019 15:21

Přesně tak, HTML je pouze značkovací jazyk, ve kterém obaluješ elementy a přiřazuješ jim styl pomocí CSS. JavaScript je programovací jazyk běžící na straně klienta (v prohlížeči) a dělají se v něm třeba různá vyskakovací informační okna atd. PHP je zase jazyk, který běží na serveru a vrací požadované hodnoty. Pomocí PHP se připojuješ třeba k databázi a získáváš z ní data, která vkládáš do HTML šablony. Bootstrap ti rozhodně ušetří spousty času. Základní web se s ním dá zvládnou doslova za pár minut. U každé komponenty máš i vysvětleno, jak co změnit a nebo můžeš kouknout na místní Bootstrap seriál

Nahoru Odpovědět
9.5.2019 15:21
/* Life runs on code */
Avatar
Jan Hlavatý
Člen
Avatar
Jan Hlavatý:10.5.2019 16:15

Tak jsem si na tom webu náhodou všimnul ještě jednoho problému.
Pokud je stránka širší jako 960px, mají se zobrazovat dlaždice 2x2.
Což se zobrazují, avšak jen do okamžiku, než se stránka hodně roztáhne.
Pak jsou najednou v horní řadě 3 dalždice, a pod nimi čtvrtá zbývající.
Přitom ale šířku article mám nastavenou na 960px.
Nějak tomu nerozumím, proč to dělá ...

 
Nahoru Odpovědět
10.5.2019 16:15
Avatar
Jan Hlavatý
Člen
Avatar
Jan Hlavatý:10.5.2019 16:37

To jsem jelen ...

Když je article {width: 960px;}, tak to funguje blbě.
Když je article nav {width: 960px;}, tak to funguje správně.

Přitom i article přeci obaluje ty dlaždice.
Anebo se musí v HTML/CSS pracovat vždy jen s "nejbližší" značkou (zde tedy article nav)?

 
Nahoru Odpovědět
10.5.2019 16:37
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Jan Hlavatý
Jaroslav Smrž:10.5.2019 19:22

Nerozumím, proč nepoužiješ bootstrap. Nemusíš se vůbec trápit s breakpointy. Neřeknu, pokud by stránka vyžadovala nějaké přesné pozicování grafiky, ale takhle? Co jsem ti posílal příklad výše, tak je zcela funkční a funguje jak na karty, tak na menu. Například jak máš vyřešené zalamování toho dlouhého nadpisu v menu na malém zařízení? To ti bude přetýkat, takže breakpointy musíš zbytečně řešit i u toho nadpisu. To mi přijde velice neefektivní.

Nahoru Odpovědět
10.5.2019 19:22
/* Life runs on code */
Avatar
Jan Hlavatý
Člen
Avatar
Jan Hlavatý:10.5.2019 21:13

Ale ano, nerikam ze nema smysl pouzit Bootstrap. Jen jdu kurz HTML od zacatku a snazim se pochopit a poznat zakladni HTML/CSS

 
Nahoru Odpovědět
10.5.2019 21:13
Avatar
David Želízko
Člen
Avatar
David Želízko :10.6.2019 18:22

Zdravím,
Mám nemalý problém jako jeden z mnoha udělal sem si v pspadu pages na začátečníka super vypadalo to bombove ale pak to vše záhadne zmizelo vše nejvíc mě rozčiluje už oramovani které se dle mého názoru na úrovni 0_1 povedlo a pozadí . A teď nevím jak z toho ven přidal jsem par příkazu a najednou vše pryč dokázal by to někdo z vás rozluštit ... díky moc za pomoc

 
Nahoru Odpovědět
-1
10.6.2019 18:22
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na David Želízko
Jaroslav Smrž:10.6.2019 20:39

Bez kódu ti zde asi nikdo nepomůžeme. Hoď sem zdroják + styly nebo třeba odkaz na codepen. Pak budeme moudřejší.

Nahoru Odpovědět
10.6.2019 20:39
/* Life runs on code */
Avatar
Peter Mlich
Člen
Avatar
Odpovídá na Jaroslav Smrž
Peter Mlich:11.6.2019 11:17

Google preklad spamove hlasky, mi to tak prijde.

 
Nahoru Odpovědět
+2
11.6.2019 11:17
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 19 zpráv z 19.