Diskuze: Machr na webdesign - responzivní menu

HTML a CSS HTML a CSS Machr na webdesign - responzivní menu American English version English version

Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Zdravím. Po delší době vyhlašuji Machra na webdesign. Doufám tedy, že se přihlásí (a hlavně dokončí) úlohu hodně lidí! :)

V tomto Machrovi se zaměříme na tvorbu responzivního menu, kam se může zapojit úplně každý, jelikož jsem základní ideu sepsal a můžete se tedy inspirovat.

Pracovat můžete s jazyky HTML a CSS a kdo chce, může zapojit i JS (či Dart), a naším cílem bude vytvořit co možná nejvíce fantastické responzivní menu. Menu může mít libovolné rozložení - záleží na vaší fantazii.

Jedinou podmínkou je použití minimálně jednoho media query.

Co se hodnotí:

  • kód & funkčnost - 6b
  • validita kódu - 2b
  • vzhled menu - 2b
  • Extra bod můžete získat za použití objektových stylů (OOCSS, nejlépe se syntaxí BEM) a CSS preprocesoru.

BEM syntaxe jsou takové ty podtržítka a pomlčky -> .clovek__ruka a .clovek__ruka--prava, kde __ značí potomka a -- značí modifikátor.

Pokud máte jakékoli dotazy, nebojte se napsat do komentářů.

Čas máte do čtvrtka 30. 4. 2015 do 15:00. Vyhodnocení proběhne (ideálně) téhož dne odpoledne.

Kompletní pravidla soutěží: http://www.itnetwork.cz/…outezi-machr

Řešení odevzdávejte buď sem do komentářů, nebo Honza Bittner do PM.

Odpovědět  +9 22.4.2015 19:59
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Vakos
Redaktor
Avatar
Odpovídá na Honza Bittner
Vakos:

Máš prosím nějaký článek ohledně BEM syntaxe?

Nahoru Odpovědět 22.4.2015 20:45
"Jediný způsob, jak dělat skvělou práci, je milovat to, co děláte. Pokud jste to ještě nenašli, hledejte dál. Ne...
Avatar
Marek Z.
Redaktor
Avatar
Nahoru Odpovědět  +3 22.4.2015 20:47
Chybami se člověk učí, běžte se učit jinam!
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Vakos
Honza Bittner:

Dost se mi líbí článek http://csswizardry.com/…d-bem-syntax, kde je to hezky popsáno.

Koukni tedy tam a případně pogoogli dále. :)

Nahoru Odpovědět  +3 22.4.2015 20:48
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Honza Bittner
Tomáš123:

Môže byť menu aj súčasťou webstránky?

Nahoru Odpovědět 22.4.2015 21:41
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Tomáš123
Honza Bittner:

Ne, čistá stránka a menu.

Chci hodnotit jen menu, né stránku - a prodírat se tam pak dalším balastem... :)

Nahoru Odpovědět  +1 22.4.2015 21:53
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
IT Man
Redaktor
Avatar
IT Man:

Já už málem dostal infarkt, že to bude končit a ono to je až do čtvrtka. Uf. :)

Nahoru Odpovědět  +2 24.4.2015 20:42
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Patrik Smělý (SogoCZE):

Takže moje menu je hotovo :)

Online verze: http://menu.sogocze.cz/
Stažení: http://menu.sogocze.cz/SogoCZE.zip (nebo http://leteckaposta.cz/312633935)

Všem přeji hodně štěstí a doufám že jsem na nic nezapomněl :D.

Editováno 26.4.2015 2:40
Nahoru Odpovědět  +5 26.4.2015 2:39
PHP můj oblíbený jazyk......
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Patrik Smělý (SogoCZE)
Honza Bittner:

Doplň tam, prosím, odkazy jako #něco - ať to mohu pak lépe testovat.

Nahoru Odpovědět 26.4.2015 9:12
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na softman23
Honza Bittner:

A víš, že tady děláme responzivní menu? :`

Nahoru Odpovědět  +2 26.4.2015 10:09
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Patrik Smělý (SogoCZE)
Michal Šmahel (ceskyDJ):

V mobilní verzi se kolem tlačítka na otevření a zavření dělá rámec, odstraň ho, ať to vypadá lépe. Jinak to máš pěkné.

Nahoru Odpovědět 26.4.2015 10:28
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Nahoru Odpovědět 26.4.2015 10:29
PHP můj oblíbený jazyk......
Avatar
Odpovídá na Patrik Smělý (SogoCZE)
Michal Šmahel (ceskyDJ):

Ano, nedávno jsem to řešil a vím, že to lze.

Nahoru Odpovědět 26.4.2015 10:33
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
softman23
Člen
Avatar
Odpovídá na Honza Bittner
softman23:

vim ;) jen jsem chtěl vědet váš názor :D :)

 
Nahoru Odpovědět 26.4.2015 10:43
Avatar
Odpovídá na softman23
Michal Šmahel (ceskyDJ):

Nápad to není tak špatný, ale ještě by to chtělo doladit. Domů bych dal na druhou stranu a čáry k hlavní vedoucí k položce domů vést od všech ostatních položek také to občas nesedí. Položky bych udělal s normálním rámečkem a ze strany od prostřed vedl čáru k hlavní.

Nahoru Odpovědět  ±0 26.4.2015 10:47
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Nahoru Odpovědět  +1 26.4.2015 11:34
PHP můj oblíbený jazyk......
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Patrik Smělý (SogoCZE)
IT Man:

Hezké ... :` :D

Ale né, to je jen menší chyba. Povedlo se jinak. ;)

Nahoru Odpovědět  -2 26.4.2015 11:37
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
softman23
Člen
Avatar
Odpovídá na Michal Šmahel (ceskyDJ)
softman23:

jj dělám na tom, přesně to mám v plánu a více... ale ted jsem se u něčeho zasekl takže to chce čas :)

 
Nahoru Odpovědět 26.4.2015 12:26
Avatar
Davemal
Člen
Avatar
Odpovídá na Patrik Smělý (SogoCZE)
Davemal:

Nádherně zpracované responzivní menu. Odzkoušeno na počítači i na mobilu. Držím ti palce.

 
Nahoru Odpovědět  +2 26.4.2015 13:21
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Nahoru Odpovědět  +2 26.4.2015 13:33
PHP můj oblíbený jazyk......
Avatar
Tomáš123
Člen
Avatar
Nahoru Odpovědět  +2 26.4.2015 19:07
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Matej
Člen
Avatar
Matej:

Tak , prvý krát sa zapojím do súťaže ,
download: http://leteckaposta.cz/658083977

Tento týždeň maturujem takže dúfam že som v tom zhone nezabudol na nič :D

 
Nahoru Odpovědět  ±0 27.4.2015 19:58
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Honza Bittner
Tomáš123:

Až teraz som si našiel čas prečítať pravidlá. Pardón. Môže to takto ostať, alebo musím upraviť formu, zbaliť do zipu a ponúknuť na stiahnutie?

Nahoru Odpovědět 27.4.2015 20:03
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Vakos
Redaktor
Avatar
Odpovídá na Tomáš123
Vakos:

Pravidla jsou tu od toho, aby se dodržovala, takže úkol musíš odevzdat přesně jak je tam psáno

Nahoru Odpovědět  ±0 27.4.2015 20:09
"Jediný způsob, jak dělat skvělou práci, je milovat to, co děláte. Pokud jste to ještě nenašli, hledejte dál. Ne...
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Tomáš123
Honza Bittner:

Samozřejmě že to takto nechat můžeš, ale riskuješ, že pokud budu mít špatnou náladu, tak ti Tvé řešení nepřijmu.

Bude tedy lepší, pokud dodržíš podmínky a pravidla soutěže. :)

Nahoru Odpovědět  +3 27.4.2015 20:12
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Honza Bittner
Tomáš123:

Tak dodatočne pridávam odkaz: http://leteckaposta.cz/266656107
Tu je ešte raz živá ukážka: http://kod.djpw.cz/ptmb-
A ešte kód: http://kod.djpw.cz/ptmb

Nahoru Odpovědět 28.4.2015 11:22
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Matej
Člen
Avatar
Matej:

Jasne , zabudol som na landscape , diky za upozornenie (alex) :D , snad budem mat nejaky cas a stihnem to doupravit do terminu.

Editováno 28.4.2015 13:06
 
Nahoru Odpovědět 28.4.2015 13:06
Avatar
Matej
Člen
Avatar
Matej:

download: http://leteckaposta.cz/746450624 tak snad opravena finalna verzia :)

 
Nahoru Odpovědět 28.4.2015 14:30
Avatar
Tomáš123
Člen
Avatar
Nahoru Odpovědět 28.4.2015 21:39
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Připomínám - dneska v 15:00 !! :)

Nahoru Odpovědět  +1 30.4.2015 9:35
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Filip Stryk
Redaktor
Avatar
Filip Stryk:

tak já se taky přidám :D
http://leteckaposta.cz/328762986

Nahoru Odpovědět 30.4.2015 10:00
„Neděláš dobře, když chválíš to, čemu nerozumíš, ale ještě horší je, když to haníš.“ Leonardo DaVinci
Avatar
TomasGlawaty
Člen
Avatar
TomasGlawaty:

Tak na poslední chvíli, ale přece :D
Tady je můj první machr.
http://leteckaposta.cz/692747003
moc jsem nestíhal, takže to bude mít nejspíše nějaké mouchy :`

Nahoru Odpovědět 30.4.2015 14:55
Člověk může dosáhnout čeho si zamane. Jen musí chtít, případně něco obětovat ...
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Mám tu tedy řešení od

Leaf, Matej, softman23, SogoCZE, TomasGlawaty a Tomáš123...

Pokud jsem někoho řešení přehlídnul, pište. :)

Nahoru Odpovědět  +1 30.4.2015 16:19
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Nahoru Odpovědět  +1 30.4.2015 16:24
PHP můj oblíbený jazyk......
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Nahoru Odpovědět  +5 30.4.2015 22:09
PHP můj oblíbený jazyk......
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Takže, vyhodnotil jsem soutěž.

Docela mě mrzí, a také udivuje, že se přihlásilo tak málo lidí - přes to, že mnoho lidí chce Machra na webdesign a dokonce jsem udělal i články s základním principem...

V hodnoceních odkazuji na nějaké nástroje, nebo je využívám, a proto se koukněte na:

Umístili jste se tedy v tomto pořadí:

  1. Patrik Smělý (SogoCZE) (8b)
  2. TomasGlawaty (7b)
  3. Filip Stryk (6,5b)
  4. Matej (5b)
  5. Tomáš123 (4,5b)
  6. softman (1,1b)

Placku tedy vyhrává Patrik Smělý (SogoCZE), napiš Zdeněk Pavlátka a publikuj své menu. :)


### Tomáš123

Kód & funkčnost: (2,5)
Styly : Pokud posíláš někam, a kor do soutěže, nějaký kód, snaž se ho také čitelně upravit a rozdělit na samostatné soubory.
HTML : Tvůj div.center je v podstatě k ničemu, jelikož stejný efekt můžeš udělat použitím na seznam. Využíváš ID - které mají opravdu velkou specifičnost a obecně se doporučuje je nepoužívat. Nikde nemáš nastavené kódování, což by jsi určitě měl.
Univerzálnost : Menu se sice tak nějak přizpůsobí více položkám, ale nemáš to moc doladěné.

Validita: (1,5) HTML je validní, styly jsou opravdu hooodně specifické - což není nikdy moc dobré.

Vzhled: (0,5) Menu se mi nelíbí - používáš poměrně divné barvy, vykreslují se mi divné znaky (nemáš to kódování), první položka má bůh ví proč jiný levý rámeček.

### TomasGlawaty

Kód & funkčnost: (3)
Styly : Trochu mě zaráží (ne)přehlednost tvého kódu - žádné mezery (resp. odsazení), nic... Piš svůj kód přehledně! Proměnné stylem "nav__list--height--before--760" asi také nebudou nijak extra dobrá volba. BEM (resp. OOCSS) je pro třídy v HTML, né pro Sass proměnné. Ale jinak se zdá, že jsi Sass používal poměrně dobře. Jen bych místo prefixování Sassem použil nástroj Autoprefixer - což je vážně bomba.
JS : Používáš logiku v JS, která by se dala ale podle mě ještě pořád vylepšovat. Líbí se mi, že se nezobrazí tlačítko pro minimalizaci menu, a menu je otevřené, když JS nefunguje - to je správně. Vadou na kráse je pak neošetření "zběsilého klikání", kdy se ti ukazatel postupně přemisťuje položku po položce - udržuje si frontu, což by neměl a měl by přejet hned na poslední kliknutou položku.
HTML : OOCSS se zdá být použito dobrou cestou. Otázkou pak je, jestli opravdu přidávat modifikátory pro každou položku, jelikož forma menu bez JS stejně nemá moc smysl, a proto by menu mělo být IMHO upraveno do formy kruku s ukazovátkem až s JS.
Univerzálnost : Menu je není univerzální, což jeho funkčnost trochu více omezuje.

Validita: (2) Validita a specifičnost kódu super. :)

Vzhled: (1) Vzhled není IMHO nic extra a šlo by si s ním vyhrát daleko více. Efekty u skrývání menu jsou poměrně divné. Ale využíváš docela použitelné barvy a máš to nějakým způsobem sjednocené.

### SogoCZE

Kód & funkčnost: (3)
Styly : Nikdy nepoužívej "0px" - v CSS je to nula bez jednotky. Psaní toho OOCSS bez frameworku vypadá docela divně - hehe. Doporučuji vymyslet si - nebo někde najít ověřenou metodu - v jakém pořadí zapisovat vlastnosti. Dobrým zvykem je selektory odsazovat jednou mezerou ze shora, což je o mnoho přehlednější. Media jsou použity opravdu šíleně - a hlavně zbytečně. Pro tvé účely by totiž stačily pouze 2 - prvky menu totiž můžeš jednoduše zarovnat do stran, a né stále a stále měnit šířku. Své styly importuj vždy jako poslední - aby ti nikdo nic nemohl přepsat.
JS : Doufám, že ten interval má být jenom hloupý vtip? :P Používat interval pro kontrolu je prostě špatné. Lepší by bylo využít události resize na oknu. Výměnu ikonek děláš opravdu špatně - přeci nebudeš pokaždé přepisovat celý element, když stačí přepsat třída? V kódu máš zbytečné středníky a někde ti zase chybí. Rozbalování by se dalo určitě udělat elegantněji... Menu se bez JS na malých obrazovkách neukáže - což je kontraproduktivní.
HTML : Podle mě používáš OOCSS trochu divně. Mít někde 'class="menu__ul menu__Prihlase­niMenu"' je špatný přístup, jelikož např. oko zároveň nemůže být i pusa, že? Lepším řešením použití by tedy bylo např. 'class="menu__ul menu__ul--login"'.
Univerzálnost : Menu se ti při větším počtu položek nezobrazí správně. Na malé obrazovce se zobrazí scroll bar, což je OK.

Validita: (2) Validita a specifičnost kódu v pořádku.

Vzhled: (2) Vzhled by se dal samozřejmě ještě hodně vylepšit, ale máš použité líbivé barvy a všechno hezky sladěno, takže ti dám plný počet.

### softman23

Kód & funkčnost: (1)
Styly : Také - používáš ID, což má za následek velkou specifičnost a nedoporučují se používat pro stylování. Tvé styly jsou ještě okořeněné tím, že máš v selektoru 2 ID, což pak nedává žádný velký smysl. Odsazuješ si asi jak jen se ti zlíbí - nějaký pokus o random? Nepoužívej "0px", nulové hodnoty se píší bez jednotek. Několikrát máš v kódu duplikovanou vlastnost. Chtělo by si to udělat pořadí vlastností - jak je budeš psát za sebou. Hlavní podstatou této soutěže bylo vytvořit menu responzivní, což jsi neudělal.
HTML : Nevím tedy kde jsi se HTML učil, ale evidentně ti to moc nešlo.
Univerzálnost : Raději ani zkoušet přidávat další položky nebudu, jelikož vůbec netuším jak. :`

Validita: (0) Zkoušet snad ani nemusím -> 0 bodů.

Vzhled: (0.1) Menu je naprosto ošklivé a hlavně nefunkční. Za snahu dávám alespoň 0.1 bodů.

### Matej

Kód & funkčnost: (3)
Styly : Klikatelná oblast zasahuje mimo "tlačítka", což je špatné. Tvoje odsazení je nic moc - také si to dělat jak jen chceš. Každá vlastnost by měla být na vlastním řádku.
JS : Bez JS jsi prostě v háji - nic nefunguje. JS docela v pohodě - dal by se však ještě zlepšit -> přenést efekty do CSS atd.
HTML : Používáš zápis pro nějaký staré HTML. Své styly importuj vždy jako poslední. Pokud nemáš v položkách nic napsáno, proč tam dělat mezeru?
Univerzálnost : Pro více položek ti funguje jen malé menu.

Validita: (1) V kódu (CSS) máš několik errorů - chybí ti jednotky, závorka... HTML vypadá v pohodě.

Vzhled: (1) Nápad se mi líbí. Docela hezké efekty a zajímavý způsob, ale ve skutečnosti bys jej asi nikde nevyužil. V malém menu by to chtělo nějaké popisky.

### Leaf

Kód & funkčnost: (4)
Styly : Pokud koukám dobře, tak tu máš +- nějaké pořadí vlastností, využíváš mobile-first a OOCSS s BEM také používáš dobře. Možná bych jen změnil název class="menu__hla­vicka-odkaz", což moc daný element nespecifikuje. U nulových hodnot nepoužívej jednotky, jinak CSS vypadá OK.
JS : Také - intervalem bych určitě menu nekontroloval a také bych neměnil tlačítko jako celý element.
HTML : HTML, až na chyby, vypadá v pohodě. OOCSS využíváš dobře. Importování jQuery bych umístil také na spodek stránky.
Univerzálnost : Menu se ti nezobrazí moc dobře při více položkách - funguje jen +- na malých obrazovkách.

Validita: (1) Tvoje HTML je nevalidní - špatné názvy elementu, což je docela škoda a příště, až budeš něco posílat do soutěže, by jsi si to měl zkontrolovat. :) CSS je OK.

Vzhled: (1) Využíváš né moc hezké barvy a máš vcelku podivné efekty. Při zavírání menu se ti každý položka zmenšuje - její šířka - což vypadá zvláštně. Při aktivní/hover položce se ti invertuje pozadí s rámečkem, což také není nijak cool - minimálně v podání těchto barev.

Editováno 2.5.2015 0:33
Akceptované řešení
+5 Zkušeností
Řešení problému
Nahoru Odpovědět  +5 2.5.2015 0:29
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
IT Man
Redaktor
Avatar
IT Man:

Gratuluji Patrik Smělý (SogoCZE), který s tím machrem otravoval pořád. :D

Tak ses konečně dočkal placky, hochu. ;)

Nahoru Odpovědět  +1 2.5.2015 8:21
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Pavel Mareš
Redaktor
Avatar
Pavel Mareš:

Samozřejmě také gratuluji výherci. (Předchozí text byla blbost.)

Editováno 2.5.2015 8:39
Nahoru Odpovědět  +1 2.5.2015 8:36
Nechci být workoholik. Bohužel někdy musíme být tím, čím nechceme.
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Nahoru Odpovědět 2.5.2015 10:49
PHP můj oblíbený jazyk......
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Nahoru Odpovědět 2.5.2015 10:49
PHP můj oblíbený jazyk......
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Patrik Smělý (SogoCZE)
Honza Bittner:

Btw. u stylů to má být takto

...Psaní toho OOCSS bez preprocesoru...

Jinak ty rady jak na hezký a přehledný kód např. zde http://codeguide.co/ od @mdo.

Nahoru Odpovědět  +1 2.5.2015 11:07
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Nahoru Odpovědět 2.5.2015 11:09
PHP můj oblíbený jazyk......
Avatar
TomasGlawaty
Člen
Avatar
TomasGlawaty:

Patrik Smělý (SogoCZE) , Gratuluji, menu vypadá pěkně :)

Jinak vidím, že placka mi utekla těsně, což mě trochu mrzí, ale co se dá dělat :)
Kód je trochu zprasený, jelikož jsem neměl čas a dělal jsem to na poslední chvíli (na to se nevymlouvám).

Honza Bittner "Trochu mě zaráží (ne)přehlednost tvého kódu - žádné mezery (resp. odsazení), nic... Piš svůj kód přehledně!"
Jestli jsem to pochopil, tak se ti SASS zobrazuje bez odsazení? já ho tam mám (viz. obrázek).

Nahoru Odpovědět  +3 2.5.2015 13:56
Člověk může dosáhnout čeho si zamane. Jen musí chtít, případně něco obětovat ...
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na TomasGlawaty
Honza Bittner:

Myslel jsem spíše vertikální odsazení - všechno máš naplácáno na sebe bez jediného řádku mezi, což je ve větších souborech hodně nepřehledné.

Nahoru Odpovědět  +1 2.5.2015 14:24
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na TomasGlawaty
Michal Žůrek (misaz):

Honza to špatně napsal, tvůj kódy vypadá jako bys ho hodil do nějakého lisovacího stroje. Provzdušni ho trochu. Cíl je takvý, že když nim budeš scrolovat rozeznáš jednotlivé bloky, takhle máš jeden jediný.

Nahoru Odpovědět  +1 2.5.2015 14:35
Nesnáším {}, proto se jim vyhýbám.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Honza Bittner
Tomáš123:

Ďakujem za objektívnu kritiku kódu. Uznávam si chyby. Rád by som ale dodal, že kódovanie som dodatočne nastavil, ale uploadol som zlú verziu... Štýly sú konkrétne kvôli neprerobeniu z existujúcich stránok. Taktiež div.center bol vytvorený pre ľahšiu editáciu šírky všetkých prvkov na stránke. Viď: http://tomas123.mujskript.cz/.

Nemám grafické cítenie, preto asi to nepekné menu (ten rámček mal symbolizovať akúsi hranu vystupujúcej položky v osi z)...

Každopádne ďakujem a pripájam sa ku gratulácii výhercovi :)

Nahoru Odpovědět 2.5.2015 14:37
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
TomasGlawaty
Člen
Avatar
Odpovídá na Honza Bittner
TomasGlawaty:

OK, ale myslím si, že to spíše otázkou preferencí jednotlivce. Mě se dobře čte, když to je hned pod sebou, jelikož vidím co k sobě patří. Když je moc mezer mezi řádky (nedej bože několik prázdných řádků pod sebou) tak se v kódu ztrácím a nevím kde - v jakém bloku jsem.
:)

Nahoru Odpovědět 2.5.2015 14:43
Člověk může dosáhnout čeho si zamane. Jen musí chtít, případně něco obětovat ...
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na TomasGlawaty
Honza Bittner:

Pracuji na projektu, kde mám styly s několika tisíc řádky kódu CSS a opravdu mi věř, že bez volných řádků to nikdy nebude tak přehledné. :)

Nahoru Odpovědět  +5 2.5.2015 14:50
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
TomasGlawaty
Člen
Avatar
Odpovídá na Honza Bittner
TomasGlawaty:

Dobře, díky za odpovědi :)

Nahoru Odpovědět  +2 2.5.2015 16:07
Člověk může dosáhnout čeho si zamane. Jen musí chtít, případně něco obětovat ...
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 50 zpráv z 50.