83. Tvorba webových stránek (HTML a CSS) - Grid a základ responsivity

[@OndrejCzadek]

Ahoj Davide, responzivita u obrázků mi nefunguje, i přes max-width nevíš jak to vyřešit, děkuji za případnou odpověď.

[@hacknisvoubudoucnost]

Ahoj, bohužel takto na dálku těžko říci. Jako první bych zkusil dát celý CSS kód do chatu GPT a třeba něco relevantního poradí. Nebo hodit kód na discord.

[@YuMaM]

Uprav si classu .row v css (***** reusable *****) takto: .row { max-width: 1140px; width: 100%; margin: 0px auto; } A malo by to fungovať. Mal som rovnaký problém a mne to pomohlo :)

[@lolfh1]

Ahoj, potřeboval bych prosím pomoct.... :D Vše funguje, super ale nakonci jak jsi mluvil o respozivitě obrázků a dával to do toho "mobilního vzhledu" tak mě to ty obrázky tak hezky neukázalo zbytek stránky ano ale ty obrázky ne. Nevíš co s tím? Děkuji za případnou odpověď

[@hacknisvoubudoucnost]

Ahoj, takhle na dálku těžko říci. Zkus zjistit, v jaké části kódu by mohl být problém. Jestli se obrázky nepřizpůsobují, tak mrkni, jestli je máš např. šířku v %.

[@honzadancinger]

mám stejný problém, šířku mám v % 🤔🤔

[@OndrejCzadek]

@@honzadancinger Já taky

[@vojtadymak442]

Zdravím, nejde mi otevřít web s obrázky, Uložto teď celkově nějak blbne, je nějaká jiná možnost kde fotky stáhnout?

[@hacknisvoubudoucnost]

Ahoj, zkus zde: drive.google.com/drive/folders/1C2WcwbfNM9tOtrniOh6GqTJf8Q_3lUTj?usp=sharing Ulozto už nedává soubory veřejně. Zrovna nedávno to změnili.

[@vojtadymak442]

@@hacknisvoubudoucnost funguje, děkuju moc

[@hacknisvoubudoucnost]

Neni vubec zac

[@ajdanaman]

Ahoj, šířku mám v %, všechno mám stejně, ale obrázky se nezmenšují jako u tebe, píšu ve VS Code. Díky, btw nevíš jak ve vs code nastavím aby se automaticky obnovoval i web, když napíšu nějaký kód? Aby to bylo "živě" ?

[@hacknisvoubudoucnost]

Ahoj, doinstaluj si rozšíření Live server. Ten automaticky načítá stránku. Ještě si nahoře v menu dej File -> Autosave (pokud ho nemáš už zaškrtnutý). Zkus, jestli na začátku kódu nemáš width a přepsat to na max-width.

[@aretho12]

@@hacknisvoubudoucnost zdravím taky mi to nefunguje ve VS code, kde na začátku kodu to přepsat ?, zkoušel sem přepsat width v tom auktualním obrázku a nefunguje pak je width snad jen v row.

[@hacknisvoubudoucnost]

@@aretho12 To záleží, jak máš udělaný kód. Leda zkusit dát kód na Discord, tam je na to více prostoru než v komentářích a dají se tam poslat i celé soubory. discord.gg/WQqHrxjj26

[@Xaonss]

@@hacknisvoubudoucnost paráda měl jsem ten samí problém s obrázky a po přepsání na max-width to funguje 👍

[@MarlonBrando-w2h]

Ahoj Davide, zkousim grid, ale nedokazu se s nim poradne popasovat. chci vytvorit prazdnou mrizku, o rozmerech 3x3, kde by se po stisknuti tlacitka zobrazovaly obrazky z me galerie, ale jen v polich 2 , 4, 6, 8. porad se mi zobrazuji vedle sebe...

[@hacknisvoubudoucnost]

Ahoj, takže tam budeš mít i JavaScript? Mrkni, jestli to přiřazuješ do správných políček. Tím bych začal

[@MarlonBrando-w2h]

javascript tam je, to jsem zbastlil tak vselijak, ze sem rad, ze aspon ty obrazky vyhazuje :) ja myslel, ze to se doladi v CSS...jak by mel JS, po kterym chci, aby hazel obrazky na urcity pozice vypadat ?

[@hacknisvoubudoucnost]

@@MarlonBrando-w2h To už nevyřešíme v komentáři. Tam jde o to, jak máš udělaný HTML kód a kam ty obrázky chceš přesně vložit. Jaké tam máš classy v HTML apod. Můžeš to hodit na discord a lidé určitě poradí. Myslím si, že tam bude problém v JavaScriptu, že se ti obrázky jen dávají na špatné místo. Takže budeš muset upravit JavaScript.

[@MarlonBrando-w2h]

diky, jeste se zkusim v tom Javascriptu povrtat a pak to kdyz tak hodim na Discord, nerad bych prisel o laptop, kdybych ho ze zurivosti a frustrace sezral :D

[@hacknisvoubudoucnost]

@@MarlonBrando-w2hJo, to se může klidně stát. To znám 😃

[@tomasnovotny4609]

prosím Tě od kdy můžiu souběžně přidat Javu nebo počkat až dokonce? a jestli jsem dobře pochopil mělo by to být "Moderní JavaScript " ? tam yb dvě Javy jsou starší verze (každý na to má + posuň se v javě na vyšší úroveň)

[@hacknisvoubudoucnost]

JavaScript můžeš přidat ve chvíli, kdy znáš základy HTML a CSS. Jestli jsi už 83. videa, tak už je znáš. Ale za mě je lepší dojet jeden kurz a pak jít na JavaScript, ale klidně to můžeš kombinovat 🙂 Je dobré jít na "zelený" kurz než na "žlutý". Někdo si projde oba dva, ale zelený je modernější pojetí a je tam toho více

[@tomasnovotny4609]

@@hacknisvoubudoucnost díky

[@itzhenziq1116]

zdravím, chtěl bych se zeptat, já mám ten hlavní nadpis a odkazy ve stejné výšce a, když si to rozlišení udělám jako má mobilní verze, tak ti odkazy se mi do té h1 nacpou a nejde pak na ně kliknout, nevíš jak to opravit?

[@hacknisvoubudoucnost]

Ahoj, bohužel to nedokáži na dálku říci. Zkus znovu zkontrolovat kód a popř. nějaké části zakomentovat, abys viděl, jestli to způsobuje zrovna tento zakomentovaný kód (když chyba zmizí)

[@itzhenziq1116]

@@hacknisvoubudoucnost už vím, protože jsem to měl v procentech daný a jak to mám v procentech, tak se to tam pak nacpe, ale nevím, čím je teď nahradit, nebo jak to s nimi udělat, aby se to tam nenacpalo

[@hacknisvoubudoucnost]

@@itzhenziq1116 Zkuste to dát na pixely - třeba 50px a uvidíte, jestli se něco změní

[@itzhenziq1116]

@@hacknisvoubudoucnost dobra, zkusím to děkuji

[@itzhenziq1116]

@@hacknisvoubudoucnost bohužel ani tak to nejde, asi to bude spíš tím position absolute, já ho odstranil a nedělalo to tohle, takže asi nějak spíš ten position absolute nastavit, nebo nahradit. aby to nedělal. Každopádně moc děkuju, že se mi snažíte pomoc.

[@JurinoH]

Ahoj Davide, nevieš prečo mi nefunguje responzivita . Keď zakomentujem row { width=1140px, margin 0 auto}, tak mi to funguje ale zase section class="about-us nemá danú šírku, teda je na celú šírku obrazovky. Nebude problém s tým, že class row je aj v grid.css aj v styly.css? Skúšal som prestaviť v styly.css row { width=1140px, margin 0 auto} na --> row { width=80%, margin 0 auto} a vtedy mi responzivita fungovala. A ja som si nevšimol do časti 83, že by si zmenil šírku row na percentá. Teraz neviem prečo je to u teba responzívne keď máš šírku row v pixeloch a ja keď to má tak mi to nefunguje. Chcel som si z učebnice prejsť každý riadok a možno nájsť chybu, ale nie je tam celý kód html aj css do videa 83, ale máš to po častiach. Vďaka za odpoveď

[@hacknisvoubudoucnost]

Ahoj, zkus si width: 1140px přepsat na: max-width: 1140px; Jestli to pomůže.

[@JurinoH]

@@hacknisvoubudoucnost joooo, funguje to. Diky

[@hacknisvoubudoucnost]

@@JurinoH Super. To jsem rád 🙂

[@ondrej1879]

Dobrý den, chtěl bych se zeptat jestli by šlo dát tomu gridu background ,aby přes obrázků byla nějaká barva. Zkoušel jsem to přes section a nešlo mi to.

[@hacknisvoubudoucnost]

Dobrý den, nezkoušel jsem, ale přes CSS přidáte jednoduše vrstvu jen přes obrázek, který je daný také přes CSS (to je v dalších videích). Ale takhle by to možná šlo udělat nějakým divem, který by měl průhlednou barvu a dal by se přes daný obrázek (zapozicoval by se tam). Takto v rychlosti mě nic jiného nenapadá

[@Wakky982]

Ahoj :) chcel som skúsiť vložiť vlastné obrázky, ale majú rôznu veľkosť. width 100% ich zmenšil, ale jeden je oproti druhému väčší, resp. druhý rozmer je väčší oproti druhému rozmeru prvého obrázka ... dá sa to nejako upraviť prosím ? Lebo mi nič nenapadá čím by som to mohol zmeniť. Ďakujem pekne :)

[@hacknisvoubudoucnost]

Ahoj, tady je to těžké. Nejlepší upravit obrázky ještě před nahráním do stránek. Také to často u různých webů dělám. Jinak se obrázky deformují a nevypadají dobře. Občas nějaké musím i ořezat třeba do fotogalerie, protože při úpravě výšky i šířky zároveň nevypadají v požadovaném rozměru dobře :-(

[@sarrii2912]

Ahoj, díky za videa.. moc mi pomáhají. Chtěl bych se zeptat, narazil jsem na "grid-area" ,která mi příjde mnohem lehčí.. má nějaké nevýhody ?

[@hacknisvoubudoucnost]

Ahoj, grid-area se dá také použít. Řekl bych, že je to takové modernější použití gridu

[@sarrii2912]

@@hacknisvoubudoucnost Děkuji za rychlou odpověď !

[@hacknisvoubudoucnost]

@@sarrii2912 Není vůbec zač

[@smaska8221]

Dobrý den, z nějakého důvodu mi nefunguje ta responsivita. Mám to zapsané v procentech, grid funguje a dokonce jsem zkoušel i kopírovat kod z učebnice, ale bohužel to furt nefunguje. Nevíte prosím, co s tím ? Děkuji.

[@hacknisvoubudoucnost]

Dobrý den, nemáte tam někde nějakou pevnou šířku v pixelech? Ona to může být jen jedna věc v pixelech a způsobí to takové problémy

[@smaska8221]

​@@hacknisvoubudoucnost Už jsem chybu našel, samozřejmě byla mezi klávesnicí a židlí :) Nedopatřením jsem měl v css v .row width: 1140px, namísto max-width: 1140px. Každopádně děkuji moc za radu a také bych se chtěl zeptat, jestli neplánujete natáčet návod například na GitHub. Ve škole jsme na to pár přednášek měli, ale od pana profesora jsem některé věci moc nepochopil.

[@hacknisvoubudoucnost]

@@smaska8221 Jsem rád, že jste chybu objevil :-) Z toho se člověk nejvíce naučí. Teď je v plánu JavaScript a pak PHP. Pak bych se mohl pustit i do GitHubu nebo podobného tématu. Ale to ještě chvíli potrvá.

[@Elsaven1]

@@hacknisvoubudoucnost Dobrý den, začínám s HTML a CSS právě Vaším kurzem. Možná to bude hloupá otázka, ale také mi ta responsivita nefungovala a pomohlo mi, když jsem v .row zapsal místo width: 1140px ,max-width:1140px. Mohu se tedy zeptat, jaký je v tom rozdíl, že ta responsivita najednou funguje? Stačilo by jen opravdu krátké vysvětlení pro lepší pochopení, než půjdu dál :) Díky moc za Vaši snahu, kurz je perfektní, až neuvěřitelné, že všechny tyto informace jsou zdarma :)

[@hacknisvoubudoucnost]

@@Elsaven1 Dobrý den, max-width znamená, že šířka může dosahovat maximálně 1140px. To znamená 1140px a méně. Když zmenšujete prohlížeč, tak se ta šířka začne přizpůsobovat - když má prohlížeč 1200px, tak šířka bude 1140px. Když bude mít prohlížeč 1150px, tak šířka elementu s max-width bude mít stále 1140px. Pokud ale spadne prohlížeč např. na 1000px, tak element bude mít 1000px (protože může mít méně než 1140px). A pak se krásně přizpůsobuje prohlížeči, jakmile je prohlížeč pod 1140px. Doufám, že je tomu rozumět. Díky, jsem moc rád, že se videa líbí :-)

[@ulianak4027]

děkuji :)

[@hacknisvoubudoucnost]

Není vůbec zač 🙂

[@JanKral-ni2lo]

Možná hloupá otázka, teď, po shlédnutí 83 dílu. Jen by mě zajímalo, pro lepší pochopení, jestli a v čem se liší "section" a "div". Je to pro lepší orientaci ve struktuře projektu, jde o úzus, nebo to má, bude mít ještě jiný význam? A používá se pouze v "main"? Namísto "section" jsem napsal "div" a nic se v projektu nezměnilo. Díky, Davide.

[@hacknisvoubudoucnost]

Ahoj, dříve se používaly jen divy, když ještě nebyl section, main, footer a header. Takže můžeš klidně používat dál divy, ale dnes je moderní používat tyto tagy s významem. Je to spíše pro prohlížeče a vyhledávače, které pochopí, že toto je sekce. Z divu nic nepochopí, protože nemá žádný význam co do struktury. Ale na stránce se vizuálně nic nezmění, ať použiješ div nebo section. Nevím, jak je to přesně ve specifikaci HTML 5, ale myslím, že tam není, že se section používá jen v main. Ale to si teď nejsem jistý. Já osobně jsem ho asi nikdy nepoužil jinde než v main

[@JanKral-ni2lo]

@@hacknisvoubudoucnost

[@jankula2823]

Zdravím Davide, předem bych rád poděkoval za tyto videa, je to vážně skvělý. Nicméně by mě zajímalo, jak je v gridu řešené floatování. Vidím, že class "col" má floatování doleva, ale v předchozích videií jste říkal, že se floatování musí vypnout. To se v tomto případě nemusí vypínat, nebo je to již obsažené v class "row"? (vidím, že v CSS u class "row" je něco ve smyslu vypnutí floatování).

[@hacknisvoubudoucnost]

Dobrý den, jsem rád, že se videa líbí. Já jsem teď začal používat svůj vlastní grid, který jsem si podle návodů na internetu vytvořil zcela od začátku a tam se clearfixuje (zastavuje floutování) na úrovni class row. A myslím, že je to tak i zde v tomto staženém z internetu.

[@JanKral-ni2lo]

Děkuji, ahoj.

[@hacknisvoubudoucnost]

Není zač 🙂

[@robertvitek2530]

Ahoj máš super videa, doufám, že pracuješ na dráze beatboxera (nejlepší zvuky :) - bzzzzuuuum, ttt, pchhhhh)

[@hacknisvoubudoucnost]

Díky. Zajímavá myšlenka :-)

[@dlouhavideacz]

Pracuji ve VS code a tam když u box shadow nedám barvu vůbec, tak se tam černá (#000) udělá automaticky.

[@hacknisvoubudoucnost]

Taky dělám ve VS code. Nevím, jak to funguje jinde, ale černá by měla být výchozí barva. Takže když se nezadá, tak se dá vždy černá

[@samfibyofficial4985]

Dobrý den, mám šířku zapsanou v procentech a stále mi to nedělá to, co vám. Mohl by jste mi nějak poradit? Jinak děkuji za skvělý návod do HTML a CSS, chtěl bych se tím jednou živit.

[@hacknisvoubudoucnost]

Dobrý den, jestli vám nefunguje grid, tak zkuste mrknout, jestli ho máte správně napojený do index.html (v hlavičce). Pokud ano a kód máte správně, tak by to mělo fungovat. Pokud by ne, tak napište a musel byste mi soubory poslat nebo udělat screeny. V tomhle je na nic, že aby se dalo pořádně poradit, tak člověk musí vidět kód. Ale i to se zvládne :-) To je super, že se tím chcete v budoucnu živit. Je to fajn práce a stále je dost poptávaná.

[@f0xiar339]

Ahoj. Zkus media query.. Je to vlastně normální cssko, ale pravidlo platí pouze, pokud je šířka zařízení která je určená v @media

[@twodonkeys8011]

@@hacknisvoubudoucnost Dobrý den, mám úplně stejný problém a chtěl bych se zeptat, zda bych Vám to mohl také poslat ke kontrole? Jinak děláte to skvěle, za týden jsem pochopil tolik, kolik mě nenaučili za 4 roky studia na IT. Předem děkuji za odpověď.

[@twodonkeys8011]

Tak nic, nakonec jsem našel stejnou chybu jako měl někdo v komentářích:)

[@hacknisvoubudoucnost]

@@twodonkeys8011 Ok, super

[@PreBuddy]

skusam viac moznosti a ta resnposivita nejde jedine ak to zmenim ten row width z px na % inac mi to nejde

[@hacknisvoubudoucnost]

Zkus porovnat s učebnicí

[@ledpasek3370]

Dobrý den, máte super videa a vaši tvorbu je vidět, že jsi s tím dáváte práci🙂🙂🙂🙂🙂🙂🙂. Mám otázku, i když dělám vše jako vy tak se mi obrázky sice v půlce rozdělí, ale jsou daleko větší než máte Vy nevíte co by to mohlo být?

[@hacknisvoubudoucnost]

Dobrý den, díky, jsem rád, že se vám videa líbí 🙂 Obrázky se vkládají v originální velikosti. Zkuste jim dát např. width: 100%; Vezmou si tak 100 % svého nadřazeného elementu

[@ledpasek3370]

@@hacknisvoubudoucnost Děkuji moc za radu, už se mi to podařilo zatím nevím jak, ale jdu to zjistit :). Píšu takto později, protože jsem teď chvíli nepsal code. Ještě, jednou moc děkuji :).

[@ledpasek3370]

!! UŽ JSEM TO ZJISTIL :-) !! Problém byl v tom, že jsem ty obrázky neměl v ""(- jako nadpis h2) takže byl problém ve mě a ne ve vaše codu. Hlavní je, že se mi také díky "V"ám problém podařilo vyřešit :-)