NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: více headings na jednom řádku

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

Aktivity
Avatar
Lukáš
Tvůrce
Avatar
Lukáš:29.5.2017 17:20

Ahoj, potřeboval bych, jak udělat abych mohl dát více headings na jeden řádek.. zde je můj příklad https://jsfiddle.net/r780d4ed/1/ a já chci aby vše bylo na jednom řádku, nevíte jak to mám udělat?

Díky Lukáš

 
Odpovědět
29.5.2017 17:20
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Lukáš
David Hartinger:29.5.2017 17:45

Jestli chceš dát 2 sloupečky vedle sebe, tak použij flex box. Obalíš je do nějakého divu a tomu dáš v CSS styl:

display: flex;

Jestli chceš, aby se roztahovaly na celou šířku, dej vnitřním sloupečkům styl:

flex: 0 0 50%;

Dost možná budeš muset nastavit ještě:

box-sizing: border-box;

Aby se těch 50% bralo i s rámečkem a paddingem a druhý sloupec se ti nezalomil.

Editováno 29.5.2017 17:45
Akceptované řešení
+20 Zkušeností
Řešení problému
Nahoru Odpovědět
29.5.2017 17:45
New kid back on the block with a R.I.P
Avatar
Lukáš
Tvůrce
Avatar
Lukáš:29.5.2017 17:52

Umm, trochu nepobírám, mohl by jsi mi to nějak ukázat? Jsem s css a html takový začátečník, nebo jestli je zde na networku nějaký tutorial, rád se podívám.

 
Nahoru Odpovědět
29.5.2017 17:52
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Lukáš
David Hartinger:29.5.2017 18:08

Na flex zde ještě kompletní není, ale na dání dvou sloupců vedle sebe je hned ten první, konkrétně tenhle díl - https://www.itnetwork.cz/…ovouci-obsah. Je obecně dobrý nápad přečíst si ty kurzy, jak vidíš, tak pak stejně tomu řešení z fóra nerozumíte. Přidat třídy divům by nemělo být něco, co je třeba vysvětlovat.

Nahoru Odpovědět
29.5.2017 18:08
New kid back on the block with a R.I.P
Avatar
Lukáš
Tvůrce
Avatar
Lukáš:30.5.2017 19:28

Tak jsem to nakonec dal do tabulky - <table> je to tak mnohem lepší

 
Nahoru Odpovědět
30.5.2017 19:28
Avatar
Martin Kolář
Člen
Avatar
Martin Kolář:30.5.2017 19:59

V tabulce bys mohl narazit na problém s responzivitou.

 
Nahoru Odpovědět
30.5.2017 19:59
Avatar
Jiří Fencl
Člen
Avatar
Jiří Fencl:31.5.2017 8:58

Tabulka se pouziva na tabulkova data ne na layout... kdyz uz te nic jinyho nenapada, tak jsi mel udelat table pres css a ne pres html tagy

 
Nahoru Odpovědět
31.5.2017 8:58
Avatar
Lukáš
Tvůrce
Avatar
Lukáš:31.5.2017 15:52

udělal jsem to přes css, na mé účely dostačující. Jedná se o amatérskou stránku.

 
Nahoru Odpovědět
31.5.2017 15:52
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 8 zpráv z 8.