55. Tvorba webových stránek (HTML a CSS) - Druhé stránky: tvorba navigace
Vložit
- čas přidán 10. 01. 2020
- HTML a CSS jsou jazyky, které vám pomohou vytvořit vlastní webovou stránku od základu. Napíšete si web přesně tak, jak budete chtít. Uvidíte, že HTML a CSS jsou jednoduché a zábavné. V kurzu se vše naučíte od úplných základů. Nejsou zapotřebí žádné předchozí znalosti. Budeme postupně web budovat a seznamovat se s tím, co k tomu potřebujeme. Až toho budeme znát dost, tak si pomocí HTML a CSS vytvoříme první stránky, které budou vypadat k světu.
super tutoriál pro rozšíření znalostí z předchozích lekcí o nové tagy. Znovu; velké díky autorovi!!! 💪🏻✨
Super. To jsem moc rád :-)
Ďakujem za pomoc.
Není vůbec zač
Zdravím, tu navigaci jsem jel od začátku přes inline-block, protože si vzpomínám, že jste ve vašem předchozím videu zmiňoval to, že se dá využít např. pro tvorbu navigation menu a ukazoval jste to přímo na stránkách Applu. Jinak díky za videa!
Ahoj moc pěkná videa . Měl bych ale jednu otázečku, někde jsem videl že se to menu dalo dat display:flex a pak se někde našlo jak to dát vedle sebe děkuji za odpověď. Jinak se těším na další videa doufám že budou ještě nějaké frameworky na js .
PS: A změnit práci ve 28
Ahoj, díky. Přes display flex by to šlo. Já jsem s tím nikdy moc nepracoval. Používal jsem to jen párkrát kdysi dávno. Ale je možné takto obalit různé prvky a pak je dát pomocí např. row atd. do nějakého uspořádání
Skvělý tutoriál na navigaci a dost jsem se tu naučil. Mám ale dotaz k tomu zarovnání navigace na střed. Když se na to člověk pořádně podívá, tak ve skutečnosti to úplně uprostřed není. Vlevo je po Mac větší mezera než vpravo u Podpora. Takže by to chtělo jakože trošičku ještě doleva aby to bylo v ose monitoru. Nebo to se takto nebere?
Nepamatuji si přesně, jak už jsem to ve videu dělal, ale udělal bych to přes margin: 0 auto; To by mělo dát v pohodě na střed. Bylo by zapotřebí všem dát stejnou šířku (myslím li), aby text byl uprostřed daného li (pomocí text-align: center;) Pak by to mělo být v pohodě
Ahoj, super tutorial! Mám jeden problém, když dám floatování v "nav ul li", tak se mi vypne background color. Aby to vypadalo stejně jako ve videu, používám display: inline-block. Je to problém?
Ahoj, to problém není. Pokud se ti vše správně zobrazuje a vypadá to OK, tak je to v pohodě. Vždy existuje více přístupů, jak vyřešit jednu věc. Fajn, že sis poradil.
Díky, jsem rád, že se ti videa líbí :-)
Ahoj, asi po hodině jsem zjistil, že mám na clearfix nastavené ID a ne class. po opravě vše funguje jak má.
Dobrý den, chtěl bych se zeptat, jestli je problém, když jsem celej header udělal podle sebe nebo spíš podle zápisek, co si celou dobu dělám, vypadá stejně jako ten Váš, akorát jsem ho udělal úplně jinak, je velkej problém, když jsem při dělání headeru nepoužil ?
Dobrý den, problém to není. Je dobře, když zkoušíte udělat věci vlastním způsobem. by se měl používat pro navigaci. Když nepoužijete, tak se nic zásadního nestane. Ale je to jeden z novějších tagů a je fajn ho do budoucna používat
@@hacknisvoubudoucnost děkuji mockrát, já jsem si právě řekl, že to zkusím sám a pak se podívám jak jste to dělal vy, naše postupy se neshodovaly, ale došli jsme ke stejnému výsledku...proto mě zajímalo, jestli nějak moc vadí, když nepojedu přes tu navigaci...
Zdravím, z nějakého důvodu mi prostě nejde ten background, tak jsem to udělal tak, že přímo do toho "nav" jsem dal vlastní height a už to funguje, bude v budoucnu s tím nějaký problém? Děkuji za odpověď
1.) Ještě je zvláštní, že Font-size funguje příkazem: (nav ul li) i v (nav ul li a), ale Color funguje jen v (nav ul li a), čili barvu písma musím měnit přímo v odkazu "a", ale velikost můžu měnit jak v "li" tak v "a".
2.) Dotaz na nepárové tagy, četl jsem, že nepárové tagy mají končit s lomítkem např.: nikoli pouze . Je to jedno, nebo je s lomítkem správně? Může to dělat někde problémy?
1) odkaz definuje barvu textu. Když žádnou nedáte, tak bude text fialový. To dělá právě odkaz. Takže i barvu textu musíte měnit u odkazu
2) Dříve se br psalo s lomítkem. Dnes už se nemusí. Ale ani s lomítkem by to nemělo dělat problém
Thanks
Zdravím Davide tvé tutoriály nemají chybu, všechna čest za tvůj čas a super práci.
Mám stejný problém s backgroundem. Použil jsem také inline-block a projistotu to nejde nastred děkuji za pomoc
Ahoj Pavle, díky, jsem rád, že se ti videa líbí. Mohl bys mi poslat tvůj kód, že bych se na to podíval přímo na něm? Třeba přes ulozto.cz nebo uschovna.cz nebo cokoli jiného? Podle mě to bude ve výšce elementu, který se ztratí, když se floatuje obsah. Ale zkusil bych se raději podívat
@@hacknisvoubudoucnost ahoj Davide už jsem to vyřešil děkuji. Chybělo nastavení height u toho ul. Moc děkuji a držím palce v další činnosti a těším se na další tvou práci
@@pavelburic826 Super. Díky moc, Pavle :-)
Ahoj proc targetujes element '- a -' 'nav ul li a' ? a ne treba jen ' nav a '? kdyz mas takhle napsano v css tak menis atributy ve vsech. nebo ne?
Ahoj, neměníš, ale je pravda, že se dělají kratší zápisy. Takže já také běžně píši třeba nav a. Je to cesta - jdi do nav a tam najdi všechna "a". Takže se to týká jen toho konečného
Zdravím, měl bych jeden dotaz, který bude znít hloupě. Možná jste to již uváděl v předchozích videí, ale jelikož jsem Vás objevil nedávno tak jsem stihl projet pár videí a projíždím si věci co zrovna potřebuji nebo mě zajímají. Proto bych se chtěl zeptat v minutě 10:00 proč zde píšete nav ul li a {...} a nepoužijete jen a {}? Jakou to má výhodu ten první zápis popřípadě jaký je mezi tím rozdíl. Děkuji.
Dobrý den, to je spíše ze zvyku. Když píši stránky, tak se snažím, aby bylo jasné, které CSS co upravuje. Proto, kdyby se mi na stránce vyskytl další odkaz, tak by to a {} upravilo i tento odkaz. Ale když to specifikuji, tak ul li a {} upraví jen odkaz uvnitř li, takže vím, že to nejspíše bude navigace. Ale také záleží, jestli se nejedná o kód, který bude stejný pro všechny odkazy. To by pak dávalo smysl dát rovnou do a {}. Jde jen o to psát CSS kód tak, aby se minimalizovalo, že něco upraví nechtěně něco jiného
Aha, děkuji Vám moc.
@@sonnyfivem Není vůbec zač
Dobrý den mohl bych se zeptat.
Ať dělám cokoliv barva pozadí navigace se mi prostě nezmění a nevím čím to je mám to úplně stejně napsané jako vy ale i tak se ta barva nezmění. Děkuji za případnou odpověď
Dobrý den, to bohužel takto na dálku nedokáži říci. Zkuste u daného pravidla nastavit např. rámeček, ať vidíte, jestli pravidlo funguje. Pokud ano, tak bude problém v řádku pro pozadí. Možná níže se to přepisuje jiným pozadím. Může to být ale hodně věcí
Super video jenom mám malý problém. Dělám si stránku zároveň s videama a tak uz neco mam napsane. Nefunguje mi background.
Pozadí toho nav mi jakoby překrývá pozadí celé stránky. Budu to muset dělat postupně (tím myslím header až po footer) a nebo je to jedno.
Jestli by na to existoval nejaky fix tak by mi to dost pomohlo .
Díky, jsem rád, že se ti video líbí. Takhle na dálku těžko říci, co tam může být za problém. Jestli tam nebudeš mít někde stanovenou výšku toho nav. Na to bych se podíval jako první
Zdravím, v prvom rade ďakujem za video aj celú sériu o html/css🙏 Robím si tieto stránky ako cvičenie, ale keď chcem použiť "float", zmizne mi celý background v navigácii. Myslela som, že píšem nejakú nepatrnú chybu v kóde, tak som skúsila skopírovať tvoj z učebnice. Ale problém ostal rovnaký. Kód píšem vo VS-code. Vedeli by ste mi niekto poradiť kde môže byť problém? Ďakujem🙏
Pozerám, že viac ľudí v kometároch má tento problém, tak skúsim ten inline-block
Ahoj, děkuji mooc za tutoriály. Mohu mít jeden dotaz? Není lepší na tuto navigaci používat třeba display: flex; ? Než float?
Ahoj, můžeš určitě použít display: flex; Flex box je trochu složitější, když ho chce člověk plně ovládnout, ale pokud se ho člověk naučí, tak má řadu výhod a určitě je dobré ho používat
Dobrý den, chtěl jsem se zeptat jak docílit toho, že když v navigaci kliknu např. na tlačítko O nás a otevře se mi podstránka v nové kartě, aby tlačítko O nás zůstalo aktivní(zvýrazněné) a bylo zřejmé, že jsem na podstránce o nás. Moc děkuji
Dobrý den, přidejte na každé podstránce classu dané položce v menu a nastylujte ji. Protože v každé podstránce bude classa přidělena jiné položce menu, tak to bude zvýrazňovat danou stránku, na které se člověk nachází.
@@hacknisvoubudoucnost moc děkuji za rychlou odpověď, už mi to maká 👏👍 A zároveň děkuji za skvělá videa, s nimi to vše leze do hlavy tak nějak lépe. Doporučuji Váš kanál kudy chodím.😁 Ať se daří
@@filippribyl9742 To jsem rád. Díky za doporučení 👍
Ahoj, když dám barvičku na pozadí do nav, tak mi to nejde kvůli flotování, nevíš jak to vyřešit? :/
Ahoj, zkus to obalit divem a tomu dát barvu pozadí
Chtěl bych se zeptat. Jak udělat to aby když zmenším obrazovku se mi ta navigace zmenšila do jedné rozklikaci navigace
Na to budete potřebovat už další jazyky. To v CSS neuděláte. Většinou se to dělá přes knihovny. Postupně k tomu určitě také ve videích dojdu
@@hacknisvoubudoucnost Ahoj, je možné udělat skrze css media query. Lze pak přizpůsobit pro tablety i telefony aj. rozlišení.
Btw. náhodně jsem narazil na tvůj YT. Prohlížení seznamu je kvůli názvům dost nepraktické. Musím najet kurzorem, abych zjistil, co se ve videu probírá. Doporučuju název videa začínat konkrétním tématem - 55. Druhé stránky: tvorba navigace | Tvorba webových stránek (HTML a CSS). Díky za videa:-)
@@jaroslavvalko5656 Ahoj, ano, o media query bude určitě řeč, až budu točit responzivní design. Je to velice šikovná věc. Já jsem viděl rozklikávací menu udělat přes další jazyky. Mrknu, jestli to opravdu půjde i přes media query.
Díky za postřeh. Promyslím to :-)
omlouvam se ze pisu bez diakritiky ale mam na macbooku nastavenou anglictinu a nevim jak to rychle prepnou, kazdopadne bych rad real ze mi to nefungovalo stejne jako par lidem tady(barva na pozadi proste nenabehla) nakonec jsem zjistil ze byl problem v tom ze live server ve vs code prestal fungovat, takze jsem ho restartoval a vse bezelo jak ma. jinak super videa
Díky za doplnění. Fajn. Jsme jinak rád, že už vám vše funguje.
Zdravím, mám problém u nav {background-color: white;}
pžíkaz nefunguje, background se zbarví v menu pouze, pokud použiju background color v nav ul li{...}
a nevím jak to opravit, nezabral div a ani jednotlivý class, také bych chtěl u hoveru na navigaci nastavit změnu barvy backgroundu, aby se změnil na liště z modré na červenou atp, předem děkuju, používám HTML5, NetBeans IDE 12 a mám nastavený background image na celé straně
Ahoj, tak to bohužel nedokáži říci, aniž bych viděl kód. Jestli postupuješ přesně podle videí, tak mrkni do učebnice na kód a porovnej ho. Bude tam jen nějaká drobnost. Takhle to vypadá, že ti nějaký jiný styl přebíjí ten tvůj a musíš ho více specifikovat pomocí nav ul li.
@@hacknisvoubudoucnost HTML část:
O nás
Cenník
Kontakt
vše je v body a CSS jsou správně napojené, CSS část:
nav ul {
margin: 0 auto;
}
nav{
background-color: white;
border-radius: 20px;
}
nav ul li{
font-family: "Verdana", sans-serif;
font-size: 40px;
width: 400px;
text-align: center;
list-style-type: none;
float: left;
line-height: 60px;
/*background-color: white;*/
display: inline-block;
}
nav ul li a {
color: dimgray;
text-decoration: none;
}
ještě mám container s width a background image, ale to pro celou stranu.
@@ondrejdudak4425 Když floatuješ, tak elementy ztrácí výšku. Zkus u nav dát nějakou height a pozadí by se mělo objevit
@@hacknisvoubudoucnost dobré vědět, děkuju moc za čas, vyzkouším a uvidím😃
@@ondrejdudak4425 Není zač :-)
ja som narazil na taky problem urobil som si nejake menu ale nejde mi tam dat farba dam nav{background: farba } ale nic sa nezobrazi stale to je biele nechapem preco
Zkus to obalit ještě divem a tu barvu dát tomuto divu. Pokud by to nešlo, tak zkus dát divu rozměry width a height
@@hacknisvoubudoucnost ano potom som na to prišiel že tomu musím dať rozmery keďže vychozi hodnota bola na 0 teda nemalo sa čo zobraziť. Chybami sa hold učím. Veľmi dakujem za tento kurz. Síce ho nemám dopozerany celý ale pomaličky idem dopredu
@@miroslavkostros252 Chyby jsou ten nejlepší učitel :-) Jsem rád, že se ti kurz líbí
zdravím řeším jeden problém, já si dělám tenhle navigační panel pro mé stránky a potřebuju ho fixed a když to tak udělám tak mi přestane fungovat margin auto a je to jako předtím
Ahoj, obecně, pokud něco dáš fixed, tak to přestane být blokový element a zmenší se to. Dává se tomu width: 100%; aby se to opět natáhlo přes celou šířku prohlížeče. A dává se tomu top: 0px; Ale nevím, jestli to přesně řeší tvůj problém
@@hacknisvoubudoucnost zkusím to děkuju za pomoc
@@_thetomuna_ Není vůbec zač
Dobrý den, nejde mi zbarvit pozadí a nevím proč clear fix mam ukončený a nic
Dobrý den, mrkněte do učebnice, jestli máte všechno stejně a zkuste kódy porovnat.
Ahoj, prosím tě potřeboval bych pomoct. Jak docílit, aby se menu "srolovalo", když na něm zrovna nejsem najetý myší. Vypadá to vcelku efektivně a rád bych to aplikoval na svůj web. Předem děkuji.
Ahoj, myslíš něco na způsob mobilního menu? Když máš ikonku, klikneš na ní, tak se menu rozjede? To se dělá přes jQuery. Není to tak složité, ale chce to vysvětlení toho, jak to funguje. Jestli je to ono, tak v pokračování HTML a CSS toto budu řešit ve videích.
@@hacknisvoubudoucnost Spíš něco na styl windows lišty, když na ni najedeš myší, tak se objeví, když myší uhneš na plochu, tak zmizí.
@@davidenge5546 To by se asi dalo udělat. Když bude myš v horní části stránky, tak aby se objevila lišta. Připíši si to do materiálů a mrknu na to.
@@hacknisvoubudoucnost Každopádně děkuji.
Ahoj, když dám text-align nebo cokoli co to dá na střed, tak to neraguje a furt je to na stejném místě
Ahoj, a dáváš to na text nebo na něco, na co text-align funguje? Nefunguje to úplně na všechno
@@hacknisvoubudoucnost na odkazy
@@itzhenziq1116 Na odkazy ti to fungovat nebude, protože to jsou řádkové elementy. Zkus dát odkazům rámeček
border: 2px solid red;
a uvidíš, kam přesně zasahují. A v rámci tohoto prostoru se zarovnají na střed, takže se skoro ani nepohnou, protože mají moc málo místa. Je potřeba je přepnout na blokové elementy a pak se dají pod sebe, ale budeš je moci dát na střed pomocí text-align
Zdravím, mě to nastavení barvy pozadí absolutně nefunguje. :
/* CSS Document */
body, html {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
background: rgba(255, 0, 0, 0.2);
}
nav ul li {
width: 150px;
list-style-type: none;
float: left;
text-align: center;
line-height: 50px;
}
.clearfix:after {
ccontent: "";
display: table;
clear: both;
}
program Pspad... neudělá to vůbec nic.
Zkus mrknout do učebnice a srovnat tvůj kód s ní. Použité prostředí, kam píšeš kód, by nemělo hrát roli. Koukám, že u posledního zápisu je ccontent - je tam navíc "c". To možná způsobí, že celý clearfix nefunguje. Zkus to odstranit, jestli to něco udělá.
Ahoj. Je problém když jsem tu navigaci udělal z formuláře? 😃 Funguje mi to stejně jako tobě, akorát jsem nemusel nic floatovat. 😃
Mac
iPad
iPhone
Watch
TV
Music
Podpora
Ahoj, není úplně typické, že do formu obalíš zrovna odkazy. Tam by se ale šlo vyhnout tomu form, ne? Jiným HTML tagem. Nebo to tam u tebe má nějakou speciální funkci?
@@hacknisvoubudoucnost Mě v tu chvíli nic jiného nenapadlo 😅 Teď už vím že to jde i jinak 😃 Jinak moc díky, že tohle všechno děláš a úplně zdarma👍 Fakt moc díky 😃
@@Xaonss Jsem rád, že se ti kurz líbí 🙂
díky za tutorialy mam problem nejde mi nastavit backroun u nav pomoc prosim
Díky, jsem rád, že se videa líbí. Zkuste dát nav šířku a výšku (width a height). Jestli to není tím, že v nav nic nemáte nebo to máte pozicováno pomocí position: absolute;
Jenom jsem chtěl říct, že vždy když píšeš na klávesnici tak tvůj mikrofon asi snímá to cvakání a slyším brnění v pravém sluchátku, nevím jestli jsi už to v dalších videích vyřešil každopádně to neber jako hate jen do příště :)
Díky za upozornění. Mrknu na to. Určitě potřebuji tišší klávesnici :-)
jak zarovnám tu navigaci na pravou stranu?
Nevzpomínám si, jak je tam přesně kód, ale nejjednodušší cesta by asi byla, kdybys na něco, co navigaci obaluje dal text-align: right. Mělo by to stačit dát na UL
@@hacknisvoubudoucnost děkuji
čau chcem sa opýtať ako sa robí rozbaľovacie menu
Ahoj, tak toto ještě ve videích nemám. Zkusím na to někdy něco natočit
2:20 Nevím jestli je to mým počítačem, nebo VScodem, ale zkratka mi nefunguje, což je škoda vzhledem k tomu jak moc je užitečná... :D Nevíte čím to je?
Ve VS code je to myslím Ctrl + Shift + šipka dolů
@@hacknisvoubudoucnost Děkuji, rozhodně zkusím!
Věcná :) : Ke kopírování řádků stačí ctrl + D, bez Shift
Ahoj, potřebuji nutně odpověď! :D
Nezvládnu se dívat na to, že naše položky (list items) nejsou opravdu zarovnány na střed. I ve videu jde vidět, že jsou více vpravo, než vlevo.
Zkoušel jsem dát i stejný text (kdyby ta mezera byla způsobena délkou názvu položky) a stále je to špatně.
Navíc se celý pohybují směrem vlevo čím širší je ul.
Otázka tedy zní: Jak zarovnat položky na střed, ne je pouze "vložit" (a tedy zarovnat vlevo) do celého neseřazeného listu? (Nejsem si jist, zda psát česky, anglicky.. Tak píšu česky! :D)
Asi svou odpověď najdu v budoucích videích, ale něco tak, minimálně momentálně, zásadního potřebuji vědět :D
Díky!
(Četl jsem odpověď SecretGamersArea a nepomohlo to, odpověděl jsi tak, že to dopadlo stejně)
Ahoj, už si nepamatuji kód, ale zkus se mrknout, jak pracovat s flex-boxem. Tím by se ti to dostalo přesně na střed.
Ako by som mohol urobiť ak chcem urobiť tlačidlo domov ako obrázok pretože ten list item robí riadok sám pre seba
Jestli to chápu správně, tak může nastavit obrázek jako odkaz. Tedy klasický odkaz Vlastně jen obrázek obalíš odkazem
@@hacknisvoubudoucnost áno tak to mám len správa sa to ako block element a keď to prenastavím na inline alebo inline-block nič sa nezmení
@@roland6778 Je mi divné, že obrázek máte jako blokový element. Nemáte to upravené pomocí stylů někde výše nebo níže? Obrázek by měl být řádkový element. Odkaz by na tom neměl nic změnit.
nebolo by lepsie urobit tu navigaciu takto?
header{
padding-bottom: 2rem;
}
nav{
background: rgb(44, 44, 44);
}
nav ul{
width: 33rem;
margin: 0 auto;
}
nav ul li {
color: white;
display: inline-block;
text-align: center;
margin: 0.625rem;
}
nav ul li a{
padding: 0.4rem;
}
nav ul li a:hover{
background: rgb(90, 90, 90);
border-radius:0.6rem ;
}
Určitě můžete zvolit různé přístupy. Pokud Vám ten Váš funguje a dělá to přesně to, co jste potřeboval, tak ho určitě využijte
Je vidět, že se opravdu musí ten float ukončit, protože mně třeba bez ukončení nešlo zabarvit pozadí navigace.
V tom je float zrádný :-)
Zdravím, z nějakého důvodu mi prostě nejde ten background, tak jsem to udělal tak, že přímo do toho "nav" jsem dal vlastní height a už to funguje, bude v budoucnu s tím nějaký problém? Děkuji za odpověď
Ahoj, těžko hodnotit takto na dálku, ale myslím si, že ne. Výška bude stále stejná a to by nemělo dělat žádné problémy