Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Řazení elementů vedle sebe

Aktivity
Avatar
pgarsky
Člen
Avatar
pgarsky:24.7.2016 9:03

Kód:

<table class="onas1">
    <thead>
    <tr>
        <th>Nadpis</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Text<br/></td>
    </tr>
    </tbody>
</table>
<table class="onas2">
    <thead>
    <tr>
        <th>Nadpis</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Text<br/></td>
    </tr>
    </tbody>
</table>
<table class="onas3">
    <thead>
    <tr>
        <th>Nadpis</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Text<br/></td>
    </tr>
    </tbody>
</table>

Rád bych věděl, jak udělat v CSS, aby se zařadily vedle sebe.

Odpovědět
24.7.2016 9:03
Pokud ti něco jde těžko, znamená to, že jdeš tou správnou cestou...
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na pgarsky
Jan Lupčík:24.7.2016 9:08

Mohu se zeptat, proč to řešíš přes tabulku? Nebyl by lepší div?
A pro řazení blokových prvků vedle sebe stačí do CSS přidat toto:

table, div {    /* nevím, jestli se rozhodneš pro ten div */
    display: inline-block;
}
Nahoru Odpovědět
24.7.2016 9:08
TruckersMP vývojář
Avatar
pgarsky
Člen
Avatar
Odpovídá na Jan Lupčík
pgarsky:24.7.2016 9:30

Děkuji za radu, jsem začátečník.

Nahoru Odpovědět
24.7.2016 9:30
Pokud ti něco jde těžko, znamená to, že jdeš tou správnou cestou...
Avatar
VitekST
Člen
Avatar
VitekST:25.7.2016 9:18

Buďto přes inline-block, nebo můžeš jít také přes flexbox, který se ti dokáže přizpůsobit podle položek a nabízí třeba i centrování.

CSS:

.container{
        display: flex;

        flex-direction: row;
        justify-content: center;
}

HTML:

<div class="container">
        <div>Nadpis 1</div>
        <div>Nadpis 2</div>
        <div>Nadpis 3</div>
</div>

Masivně to zjednoduší kód a nabízí to mnohem více věcí než tuto formu flexibilního layoutu.
Více zde: https://css-tricks.com/…-to-flexbox/

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
25.7.2016 9:18
Avatar
Tomáš123
Člen
Avatar
Odpovídá na pgarsky
Tomáš123:25.7.2016 10:51

Alebo cez ideálny float v spolupráci s vlastnosťou clear alebo absolútne poziciovanie v kombinácii s relatívnym. Prípadne rozvediem ukážkovými kódmi, vysvetlením, či odkazmi.

Navrhol by som uprednostňovať metódy v tomto poradí:

  1. obtekanie (float)
  2. poziciovanie
  3. tabuľkové hodnoty
  4. flexbox

Zmena displayu na inline-block je niekedy kvôli zachovávaniu bielych znakov nevhodná. Nie je to bežná metóda.

Nahoru Odpovědět
25.7.2016 10:51
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
VitekST
Člen
Avatar
Odpovídá na Tomáš123
VitekST:25.7.2016 11:08

Proč flexbox až jako poslední?
Jedná se o moderní a vysoce flexibilní metodu tvorby layoutu, pokud mě paměť neklame?

 
Nahoru Odpovědět
25.7.2016 11:08
Avatar
pgarsky
Člen
Avatar
Odpovídá na Tomáš123
pgarsky:25.7.2016 12:41

No právě toto mám na webu v layoutu a když bych použil float, tak by se to nezařadilo do layoutu

Nahoru Odpovědět
25.7.2016 12:41
Pokud ti něco jde těžko, znamená to, že jdeš tou správnou cestou...
Avatar
Tomáš123
Člen
Avatar
Odpovídá na VitekST
Tomáš123:25.7.2016 12:44

Pretože má najhoršiu podporu. Predsa ak ide rovnakého vzhľadu dosiahnuť inou, lepšie podporovanou, metódou, je výhodnejšie ju uprednostniť.

<code>Display: inline-block</code> je na stavbu layoutu <a href="http://­kod.djpw.cz/o­aac">nevhodný</a> podobne ako <a href="https:/­/diskuse.jakpsat­web.cz/?action=vthre­ad&forum=19&to­pic=118545" title="Odkaz na DJPW.cz">relatívne poziciovanie</a>.

Nahoru Odpovědět
25.7.2016 12:44
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na pgarsky
Tomáš123:25.7.2016 12:48

Čo toto?

a když bych použil float, tak by se to nezařadilo do layoutu

Áno, bežne je obtekaný prvok vyňatý z toku dokumentu. Plávanie ale ide ukončiť <code><a href="https:/­/www.jakpsatweb­.cz/css/clear­.html" title="Popis vlastnosti clear na JPW.cz">clear</a>om</co­de> a nadradený element tak upovedomiť o pozícii a výške obtekaného prvku. Podobný účinok má, ak nadradenému prvku nastavíš <code>overflow</co­de> iný ako <code>visible</co­de>.

Editováno 25.7.2016 12:50
Nahoru Odpovědět
25.7.2016 12:48
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Odpovídá na Tomáš123
Neaktivní uživatel:25.7.2016 13:45

Nejhorší podpora? Jestli neděláš stránky, na který budou koukat jenom v muzeu, pak by ti současná podpora měla bohatě stačit, viz http://caniuse.com/#…

// Tabulka před flexboxem :D? No tak to se pak nemáme o čem bavit

Editováno 25.7.2016 13:46
Nahoru Odpovědět
25.7.2016 13:45
Neaktivní uživatelský účet
Avatar
VitekST
Člen
Avatar
Odpovídá na Tomáš123
VitekST:25.7.2016 13:54

Jak tady kolega Jiří Gracík zmínil, podporu má dobrou,
IE sice v aktuální verzi flexbox podporuje jen částečně, ale who uses IE these days.

 
Nahoru Odpovědět
25.7.2016 13:54
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Neaktivní uživatel
Tomáš123:25.7.2016 14:32

Tabuľkové hodnoty (vlastnosti <code>display</co­de>*), nie tabuľka.

*V príspevku, na ktorý reaguješ som toto nepripísal. Pardón za nejasnosť.

Jestli neděláš stránky, na který budou koukat jenom v muzeu, pak by ti současná podpora měla bohatě stačit

Vyvracia azda argument subjektívne postačujúcej podpory objektívne najhoršiu podporu z vymenovaných riešení? Použil by si na úlohu, ktorú zvládne vyriešiť <code>float</code> flexbox? Ak áno, prečo?

Nahoru Odpovědět
25.7.2016 14:32
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na VitekST
Tomáš123:25.7.2016 14:43

Dobrú na trojku?

IE sice v aktuální verzi flexbox podporuje jen částečně, ale who uses IE these days.

Explorer nie je jediný prehliadač, ktorý flexbox nepodporuje.

who uses IE these days

Podobnú pripoviedku nepovažujem za relevantný argument. Odpovedz prosím aj ty na otázky, ktoré som položil Jiřímu Gracíkovi vo svojom predchádzajúcom príspevku. Zaujímajú ma dôvody prečo používať riešenie s horšou podporou bez zjavného benefitu.

Nahoru Odpovědět
25.7.2016 14:43
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Odpovídá na Tomáš123
Neaktivní uživatel:25.7.2016 15:49

Flexbox má víc než dost zjevných benefitů, které se jinak uspokojivě řešit nedají, nebo ne tak pohodlně a elegantně. Věci, které bych mohl řešit rozumně pomocí vlastností float, bych flexboxem zatím neřešil, protože mám napsáno poměrně dost stylů, které řeší většinu problémů, které si dokážu vytvořit. Pokud bych měl psát čístý web z ničeho, pak nejspíš použiju flexbox.
S tou tabulkou jsem se seknul, i když styly, které simulují chování tabulky, také neschvaluji.

who uses IE these days

S touhle myšlenkou taky nesouhlasím. Netvářím se totiž, že by lidé IE nepoužívali (bavím se hlavně o verzích <= 9, ty zbylé mě nedrásají), jen je ignoruji. Dokud budeme dělat webové stránky tak, aby fungovali i v kéžby mrtvých prohlížečích, tak si přece sami házíme klacky pod nohy. Takovou cestou se jich nikdy nezbavíme.

Nahoru Odpovědět
25.7.2016 15:49
Neaktivní uživatelský účet
Avatar
VitekST
Člen
Avatar
Odpovídá na Tomáš123
VitekST:25.7.2016 18:26

Otázka A:
Efektivně a elegantně vyřešil (téměř) všechny problémy, které jsem musel při tvorbě layoutů řešit.
Ostatní řešení sice fungovala, většinou ale byla složitější nebo ne tak elegantní.

Otázka B:
Ano, použil. I přes to, že je podpora "dobrá za tři", jak říkáš. Jsem toho názoru, že prohlížeč... (více v následujícím textu, nechci se opakovat)

//

S tím prohlížečem... Samozřejmě, nějaké procento uživatelů internetu ještě IE používá, narážel jsem na to, že IE je zastaralý.

Jak po oficiální stránce, přes technickou stránku, tak po morální stránce.

Nicméně, je tu organizace W3C, které definuje standardy jako je HTML5 a CSS3. Je tu od toho, aby vytvořila jednotnou a univerzální specifikaci těchto dvou jazyků a jejích "fíčur".

Jestli prohlížeč takovouto specifikaci nepodporuje, je podle mého názoru zastaralý, nevidím tedy důvod proč web optimalizovat právě pro tyto prohlížeče.

Jestliže vývojář prohlížeče nechce svůj prohlížeč přizpůsobovat podle aktuálních standardů, které W3C definuje, tak asi ho zatrhnul, nebo je sám proti sobě.

 
Nahoru Odpovědět
25.7.2016 18:26
Avatar
pgarsky
Člen
Avatar
pgarsky:25.7.2016 18:53

Takže kterou funkci mám nakonec použít ? :D

Nahoru Odpovědět
25.7.2016 18:53
Pokud ti něco jde těžko, znamená to, že jdeš tou správnou cestou...
Avatar
Tomáš123
Člen
Avatar
Odpovídá na pgarsky
Tomáš123:25.7.2016 19:13

Čo potrebuješ urobiť? Tri rovnako široké stĺpce? Ak sa nemusia vzájomne výškovo prispôsobiť, vystačíš si s <code><a href="https:/­/www.jakpsatweb­.cz/css/float­.html">float</a></co­de>om. Ak sa vzájomne výškovo prispôsobiť musia, môžeš použiť <a href="http://­jecas.cz/displa­y#tabulkove">ta­buľkové hodnoty vlastnosti <code>display</co­de></a>. Ak ti podpora od IE8 vyššie nestačí, ide aj toto <a href="http://­jecas.cz/stej­ne-vysoke-sloupce">riešiť</a> pomerne jednoducho.

Flexbox v tomto prípade nepotrebuješ.

<a href="http://­kod.djpw.cz/xa­ac">Ukážka</a> použitia <code>float</code>u
<a href="http://­kod.djpw.cz/y­aac">Ukážka</a> použitia tabuľkových hodnôt vlastnosti <code>display</co­de>

Nahoru Odpovědět
25.7.2016 19:13
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na pgarsky
Tomáš123:25.7.2016 19:18

<a href="http://­kod.djpw.cz/za­ac">Ukážka</a> použitia <code>float</code>u a <code><a href="http://­jecas.cz/float#cle­arovani">clear</a></co­de>u.

Nahoru Odpovědět
25.7.2016 19:18
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Jan Lupčík
Tvůrce
Avatar
Jan Lupčík:25.7.2016 20:06

Tomáš123: Takže jelikož flexbox je novinka, se kterou se pracuje dobře a dá se s ní dost pohrát, ale moc prohlížečů ho nepodporuje, budeme furt stále používat vlastnosti float. Kritizoval jsi moje manuály a můj článek před rokem kvůli té podpoře a stále obhajuješ to, že podpora je malá. Myslím si, že většina lidí má W10, kde na Edge už snad takové věci fungují. Pokud lidi mají starší systémy, troufám si říci, že budou mít nějakou novější verzi Chromu, Opery, Mozilly Firefox nebo IE (11). Pokud ne, jedná se o celkem zanedbatelné množství lidí. To máš to samé jako s JS - pár lidí ho má vypnuté též.

Takže sdílím názor s VitekST. S flexboxem se dá dobře pohrát a nakonec třeba udělá ještě lepší design. :)

Nahoru Odpovědět
25.7.2016 20:06
TruckersMP vývojář
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Neaktivní uživatel
Tomáš123:26.7.2016 7:44

Flexbox má víc než dost zjevných benefitů

To nepopieram; pýtali ste sa na to, prečo som metódy <a href="www.itnet­work.cz/html-css/diskuzni-forum-webdesign/razeni-elementu-vedle-sebe-57946833e8f85­#goto178774">zo­radil</a> v takom poradí. Isteže v prípade, keď danou vlastnosťou nejde požadovaný výsledok dosiahnuť, nejde s ňou počítať a rebríčka sa vôbec nezúčastní. Tu si treba vybrať, či na staršie prehliadače kašľať, skriptom zachytiť a kašľať na ne s arogantnou hláškou o nutnosti inovácie, alebo nejako zachytiť a zabezpečiť pre takéhoto užívateľa čo možno najlepší pôžitok za znesiteľnú cenu (používať tabuľkové layouty, nadmerne zväčšovať objemy súborov či pripravovať také stránky, aby sa na nich prakticky nemalo čo pokaziť už je trochu extrém).

Nahoru Odpovědět
26.7.2016 7:44
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Jan Lupčík
Tomáš123:26.7.2016 8:09

Jak po oficiální stránce, přes technickou stránku, tak po morální stránce.

Čo po hospodárskej, politickej či právnej stránke?

Nicméně, je tu organizace W3C, které definuje standardy jako je HTML5 a CSS3

Flexbox ešte tak úplne <a href="https:/­/www.w3.org/TR/tr-technology-stds#tr_CSS">­nedefinovala</a>. Väčšinu proprietárny „fíčur“ W3C neštandardizuje.

Jestli prohlížeč takovouto specifikaci nepodporuje...

Veď ani nevieš, čo je špecifikáciou aktuálne definované. Ak pre teba toľko znamená, prestaň používať flexbox, kým sa nestane „W3C doporučením“.

Jestliže vývojář prohlížeče nechce svůj prohlížeč přizpůsobovat podle aktuálních standardů, které W3C definuje, tak asi ho zatrhnul, nebo je sám proti sobě.

Ty toho o tom vieš...

Nahoru Odpovědět
26.7.2016 8:09
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Jan Lupčík
Tomáš123:26.7.2016 8:16

Takže jelikož flexbox [...] moc prohlížečů nepodporuje, budeme furt stále používat vlastnosti float

Ak to bude postačovať potrebám, áno.

Kritizoval jsi moje manuály a můj článek

Podľa profilu máš iba jeden článok o flexboxe, kde ťa kritizuje <a href="http://­www.itnetwork­.cz/html-css/responzivni-webdesign/html-css-flexbox-tutorial-tvorba-modernich-layoutu#goto147916">Hon­za Bittner</a>. Ja som kritizoval tvoje nekvalitné materiály o elemente <code><title></co­de> a vysúvacom menu (väčšinou z dôvodov nesúvisiacich s podporou).

Myslím si, že většina lidí má W10

Ja si myslím, že nemá.

Nahoru Odpovědět
26.7.2016 8:16
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Tomáš123
Jan Lupčík:26.7.2016 8:42

K prvnímu bodu se už vyjadřovat nebudu. S takovým přístupem můžeme rovnou přestat používat HTML 5.
To se omlouvám, chyba na mé straně. Nicméně to nemění to, že všude, kde chce někdo použít flexbox, hned podstrkáváš starší a zdlouhavější metody místo té jednodušší, rychlejší a modernější.
Myslel jsem prostě nějaké větší % lidí. Samozřejmě se nejedná o nejpoužívanější systém. Přesto má obrovské množství lidí novější verze prohlížečů a to na jakémkoliv systému.

Nahoru Odpovědět
26.7.2016 8:42
TruckersMP vývojář
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 23 zpráv z 23.