NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: rozložení prvků webu / div

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

Aktivity
Avatar
Petr Galeta
Člen
Avatar
Petr Galeta:17.5.2016 14:57

Ahoj, zkoušim napsat web dle základního návodu tady na itnetwork. Jakýsi základ mám a rozložení jako v obrázku. V hlavičce mám logo a menu, obě float left. Ostatní obsah bych chtěl docílit rozdělit tak, aby byl ten střední panel jako hlavní text a mít dva postranní panely. Ikdyž se jedná o jednoduchý statický web bez nároků, nezabývám se teď responzivitou, líbí se mi jeho elastičnost díky floatu a čitelnost např. na mobilu. Nevím ale jak docílit rozložení těch dvou postranních panelů. Tabulka mi nevyhovuje při elasticitě čitelnosti na malém rozlišení. Zkoušel jsem udělat panely v pořadí, kde první bude levý, druhý prostřední hlavní a pravý bude třetí. Rozpočítal jsem šířky panelů s velkými rezervami tak aby se vešli, float na left a něco marginu na odsazení. To ale také nefunguje dle představy. Našel jsem odkaz na "flex" metodu, ale i s varováním, že je stále málo podporovaná a tak nevim, jak ještě jinak by se dalo řešit jinak, než pozicováním, což by zase ztratilo tu elastičnost.

Jinak se ve fóru řešil "div", a jeho částečné nahrazení v html5 header a section. Zajímalo by mě, když píšu dle návodu v html5 a používám hlavičku a sekci k označování článků a když ještě nemám prošlé php a mám více článků na stránce, je-li proti něčemu header a section zopakovat v kódu několikrát v rámci jedné stránky.

 
Odpovědět
17.5.2016 14:57
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Petr Galeta
Honza Bittner:17.5.2016 15:12

Mohl bys poslat jednoduchý obrázek, např. v malování, jak si výsledný web (rozložení, stačí jednoduše pomocí obdélníků) představuješ? :-)

Nahoru Odpovědět
17.5.2016 15:12
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Petr Galeta
Člen
Avatar
Petr Galeta:17.5.2016 15:27

Představa domalovaná, ten levý by byl na způsob "aktualit" a při smrštění obrazovky by byl na prvním místě od shora, pak hlavní panel s textem stránky a poslední pravý, kde by mohl být nějaký banner.

 
Nahoru Odpovědět
17.5.2016 15:27
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Petr Galeta
Honza Bittner:17.5.2016 16:47

Toto bys mohl udělat např. tak, že si uděláš 2 elementy. 1. bude v sobě mít logo (s pevnou šířkou) a menu (to se bude roztahovat samo). V 2. budeš mít ty 3 věci, přičemž panely vlevo a vpravo budou mít pevnou šířku.

Pokud do toho vhodně zakomponuješ media queries, budeš mít aj responzivní verzi celkem lehce. :-)

Základní rozložení pro PC můžeš udělat např. takto https://jsfiddle.net/1gxborz5. Je to s Flexboxem, který má podporu 95 %, což už je dost fajn http://caniuse.com/#…, takže by to nemělo nikdy dělat problémy, tedy pokud to není x let starý prohlížeč. ;)

Tak jen pro představu, ať máš... :-)

Btw. co se týká HTML5 elementů, používat je můžeš a dá ti to pár bodíků navíc co se sémantiky webu týče. Ale v podstatě to je zbytečné řešit, pokud začínáš. :-)

Nahoru Odpovědět
17.5.2016 16:47
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Petr Galeta
Tomáš123:17.5.2016 18:20

Ja by som to riešil s lepšou podporou:
Kód: http://kod.djpw.cz/nzxb
Ukážka: http://kod.djpw.cz/nzxb- (s pomlčkou na konci adresy)

Nahoru Odpovědět
17.5.2016 18:20
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Honza Bittner
Tomáš123:17.5.2016 18:38

Je to s Flexboxem, který má podporu 95 %, což už je dost fajn

Can I use meria globálny výskyt prehliadačov; nejde s isotou povedať, že práve 95 percentám návštevníkov sa stránka zobrazí správne. Môže to byť 100, 80 aj 40 percent. Treba hľadieť na to, koľkým percentám sa stránka zobrazí zle, ako zle sa zobrazí a ako to ide riešiť... Odstrihnúť, hoci iba percento, kvôli podobnému dôvodu, že 95 je fajn, mi príde neúctivé. Zbytočné.

tedy pokud to není x let starý prohlížeč

Každý prehliadač je x rokov starý.

Btw. co se týká HTML5 elementů, používat je můžeš a dá ti to pár bodíků navíc co se sémantiky webu týče

... ktoré ničomu nepomôžu. Vyhľadávače neuprednostňujú weby so sémantickým kódom. Už teoreticky to nedáva zmysel (http://webylon.info/K.12#M) a prakticky to vyhľadávače nevedia.

Nahoru Odpovědět
17.5.2016 18:38
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Tomáš123
Honza Bittner:17.5.2016 19:19

Flexbox má mnoho výhod, oproti tomu absolute hacku. Každopádně to byla jen ukázka za půl minuty. Je samozřejmě více způsobů jak věci udělat. A jelikož je flexbox podporován ve všech moderních prohlížečích, není důvod jej nepoužívat. A komentovat to např. tím, že to nepůjde babičkám s IE 8 je sice hezké, ale je to ve výsledku jejich problém, že neaktualizují. :-) Takže proč používat různé CSS hacky na pozicování, když mohu využít parádní pozicovací systém v CSS? ;)

Tvůj odkaz o sémentickém obsahu a vyhledávačích je z roku 2004, kdy snad ani HTML 5 nebylo. Nyní je doba, kdy mají HTML 5 elementy a další věci jako ARIA atributy své místo a vyhledávače atp. je využívají.

Editováno 17.5.2016 19:20
Nahoru Odpovědět
17.5.2016 19:19
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Honza Bittner
Tomáš123:17.5.2016 20:55

Flexbox má mnoho výhod, oproti tomu absolute hacku.

Nemyslím. Jedinou je, že v mojom príklade sa bloky vedia zliať (to nech podchytia @media pravidlá). Ďalším, alternatívnym, lepšie podporovaným, riešením, bez tejto nevýhody, je použitie tabuľkových hodnôt displayu.

Nech je jasné, že sa nebavíme o všeobecných prednostiach flexboxu (je schopnejší). Máme konkrétnu úlohu so sadou konkrétnych riešení. Vybarať by sme mali to najlepšie. Najlepšie podporované je riešenie s poziciovaním ale má muchu (zlievanie stĺpcov a teda nedostupnosti obsahu za určitých podmienok*), potom máme tabuľky, a flex (ten má horšiu podporu ako tabuľky a rovnaké schopnosti riešiť problém). Najvýhodnejšie vychádza použiť tabuľku; nemusíme obetovať žiadnu funkčnosť, vzrastie podpora. Viem, tabuľku som nespomenul. Myslíš si ale, že by bolo v tomto prípade lepšie použiť flexbox aj napriek horšej podpore a rovnakému výsledku?

že to nepůjde babičkám s IE 8

To je zveličovanie. Ako vidno v odkázanom zdroji na caniuse, žiadny Internet Explorer nepodporuje flexbox úplne. Čiastočná podpora prichádza až v IE10.

Tvůj odkaz o sémentickém obsahu a vyhledávačích je z roku 2004

Podstata myšlienky nezostarla. Prečítaj si prosím celú odkázanú časť.

A jelikož je flexbox podporován ve všech moderních prohlížečích, není důvod jej nepoužívat

Ale je, záleží od situácie. Ak žiadne iné riešenie na daný problém neexistuje, čo už. Ak existuje, treba zvážiť, za akú daň môže mať výsledok lepšiu podporu. Ak žiadna daň nie je, nie je ani nad čím premýšľať.

Nyní je doba, kdy mají HTML 5 elementy a další věci jako ARIA atributy své místo a vyhledávače atp. je využívají.

K zvýraznenej časti by som poprosil nejaký zdroj.

*Doplnil by som, že riešenie s poziciovaním by som ja osobne nepoužil. Skúsim popísať, ako nad tým uvažujem:

  • Riešenie má výbornú podporu.
  • Na primalom rozlíšení sa však stĺpce zlejú.
  • To viem riešiť pomocou @media pravidiel.
  • Tie teoreticky nemusia byť podporované.
  • Ak by neboli podporované, tak buď na počítači s dostatočne veľkou šírkou obrazovky alebo dosť starom mobilnom zariadení (ale nechcem túto skupinu odstrihnúť).
  • Na druhej strane, ak nie je podporované tabuľkové riešenie, zrejme sa použije predvolený display** (čo je v prípade divu block), takže obsah ostane za každých okolností čitateľný.
  • Rovnako sa pravdepodobne zobrazí block** aj namiesto neznámeho flexu. Avšak, väčšie percento užívateľov bude vidieť krízovú podobu stránky.

Keďže očakávam, že sa nakoniec použije riešenie s tabuľkou, pridám aj živú ukážku:
http://kod.djpw.cz/rzxb
Dôsledkom sú rovnako vysoké stĺpce. Kto nechce, zafarbí vnorený prvok.

** nemám overené na širšej vzorke, ale je to veľmi pravdepodobné

Nahoru Odpovědět
17.5.2016 20:55
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Tomáš123
Honza Bittner:18.5.2016 0:23

Ta verze se absolutními postranními panely (resp. všechny verze co jsme tu vyjmenovali) a nepodporovanými @media by "fungovala" všude, když bys na to šel metodou mobile-first, také parádní metodika. :-)

Jen poznámka: flexbox dokáže o dost více než to, co bys udělal tabulkami. Nemá tedy stejné schopnosti. :-)

Já chápu tvou pointu, že by bylo fajn podporovat co nejvíce outdated verzí prohlížečů. Sám se v praxi snažím jíst touto cestou, ale globálně to není dobrá cesta. Stejně se pracuje ve světě aplikací pro desktopy/mobily (resp. vlastně skoro u všeho software/hardware). Zpětná kompatibilita se zdá fajn, ale ve výsledku bohužel dost škodí - tvoří dost limitů, na které se musí brát ohled. Jednou se snad dostaneme do světa, kde se zpětná kompatibilita nebude muset řešit, což bude pro vývojáře ráj. :-)

Nahoru Odpovědět
18.5.2016 0:23
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Petr Galeta
Člen
Avatar
Petr Galeta:18.5.2016 9:33

Díky, prostuduji postřehy. Ten flex si určitě vyzkouším, ale pro tyto sránky asi nepoužiji, jelikož je to pro pár starších pánů, kteří nové technice příliš neholdují a je větší pravděpodobnost, že budou mít prohlížeče spíš neaktualizované. Jelikož jsem v začátcích, tak si z vašich pohledů umím vzít oba . Na jednu stranu vidím v novějších metodách zjednodušení a širší využitelnost i v psaném kódu do budoucna, že asi tak rychle nezestárne, na druhou stranu, celej svět si všechno moc zjednodušuje a kolikrát čas ukáže. Pokud mi "koníček" vydrží, budu naslouchat. Jak se dostanu k nějaké variantě, nechám si rád zkritizovat :). dík

 
Nahoru Odpovědět
18.5.2016 9:33
Avatar
Petr Galeta
Člen
Avatar
Petr Galeta:20.5.2016 11:46

Tak jsem nakonec udělal takto http://kod.djpw.cz/abyb a víceméně splňuje představu :).

 
Nahoru Odpovědět
20.5.2016 11:46
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 11 zpráv z 11.