Avatar
pgarsky
Člen
Avatar
pgarsky:

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. července 9:03
Avatar
IT Man
Redaktor
Avatar
Odpovídá na pgarsky
IT Man:

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. července 9:08
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
pgarsky
Člen
Avatar
Odpovídá na IT Man
pgarsky:

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

 
Nahoru Odpovědět 24. července 9:30
Avatar
VitekST
Člen
Avatar
VitekST:

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í
+1 bodů
Řešení problému
 
Nahoru Odpovědět  +2 25. července 9:18
Avatar
Tomáš123
Člen
Avatar
Odpovídá na pgarsky
Tomáš123:

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  -1 25. července 10:51
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
VitekST
Člen
Avatar
Odpovídá na Tomáš123
VitekST:

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

 
Nahoru Odpovědět  +1 25. července 11:08
Avatar
pgarsky
Člen
Avatar
Odpovídá na Tomáš123
pgarsky:

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. července 12:41
Avatar
Tomáš123
Člen
Avatar
Odpovídá na VitekST
Tomáš123:

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ť.

Display: inline-block je na stavbu layoutu nevhodný podobne ako relatívne poziciovanie.

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

Č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ť clearom a nadradený element tak upovedomiť o pozícii a výške obtekaného prvku. Podobný účinok má, ak nadradenému prvku nastavíš overflow iný ako visible.

Editováno 25. července 12:50
Nahoru Odpovědět 25. července 12:48
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Tomáš123
Jiří Gracík:

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. července 13:46
Nahoru Odpovědět  +2 25. července 13:45
Creating websites is awesome till you see the result in another browser ...
Avatar
VitekST
Člen
Avatar
Odpovídá na Tomáš123
VitekST:

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. července 13:54
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Jiří Gracík
Tomáš123:

Tabuľkové hodnoty (vlastnosti display*), 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ť float flexbox? Ak áno, prečo?

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

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  -1 25. července 14:43
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Tomáš123
Jiří Gracík:

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  +1 25. července 15:49
Creating websites is awesome till you see the result in another browser ...
Avatar
VitekST
Člen
Avatar
Odpovídá na Tomáš123
VitekST:

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. července 18:26
Avatar
pgarsky
Člen
Avatar
pgarsky:

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

 
Nahoru Odpovědět 25. července 18:53
Avatar
Tomáš123
Člen
Avatar
Odpovídá na pgarsky
Tomáš123:

Čo potrebuješ urobiť? Tri rovnako široké stĺpce? Ak sa nemusia vzájomne výškovo prispôsobiť, vystačíš si s floatom. Ak sa vzájomne výškovo prispôsobiť musia, môžeš použiť tabuľkové hodnoty vlastnosti display. Ak ti podpora od IE8 vyššie nestačí, ide aj toto riešiť pomerne jednoducho.

Flexbox v tomto prípade nepotrebuješ.

Ukážka použitia floatu
Ukážka použitia tabuľkových hodnôt vlastnosti display

Nahoru Odpovědět 25. července 19:13
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Nahoru Odpovědět 25. července 19:18
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
IT Man
Redaktor
Avatar
IT Man:

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  +1 25. července 20:06
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Jiří Gracík
Tomáš123:

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

To nepopieram; pýtali ste sa na to, prečo som metódy zoradil 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. července 7:44
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na IT Man
Tomáš123:

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 nedefinovala. 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. července 8:09
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na IT Man
Tomáš123:

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 Honza Bittner. Ja som kritizoval tvoje nekvalitné materiály o elemente <title> 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. července 8:16
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Tomáš123
IT Man:

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. července 8:42
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
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.