Diskuze: rozložení prvků webu / div

Člen

Zobrazeno 11 zpráv z 11.
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š?
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.
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áš.
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)
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.
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í.
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:
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é
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.
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
Tak jsem nakonec udělal takto http://kod.djpw.cz/abyb a víceméně splňuje představu
.
Zobrazeno 11 zpráv z 11.