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!
Avatar
mat.masar
Člen
Avatar
mat.masar:31.10.2015 17:40

Ahojte, jak mám zrušit text align u nějakého elementu, když se zdědil?
Přesný příklad je tohle: www.minikoblizky.wz.cz/fotoalbum.html .. Mezi fotkama jsou mezery ale u posledních 2 je ta mezera jiná.. Chtěl jsem, aby ty mezery byly stejné a když jsem si vypínal styly přiřazené k té fotce, tak při vypnutí text-aling: justify; se to rozhodilo, ale mezery byly stejné.

 
Odpovědět
31.10.2015 17:40
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na mat.masar
Neaktivní uživatel:31.10.2015 17:50

Ahoj, je to způsobeno mezerou v HTML kódu. Kdybys ty elementy namačkal na sebe, bez odřádkování, problém zmizí. To je ale trochu nešťastný způsob, hlavně, když chceš mít pěkný HTML kód. Proto raději použij CSS.

#reference {
    display: table;
}

Viz: http://stackoverflow.com/…div-elements

Nahoru Odpovědět
31.10.2015 17:50
Neaktivní uživatelský účet
Avatar
mat.masar
Člen
Avatar
Odpovídá na Neaktivní uživatel
mat.masar:31.10.2015 17:54

No jo, ted jsou mezery stejné, ale je to seřazené pod sebou. Já jsem to chtěl tak jak to bylo před tím, že jsou 2-3 obrázky vedle sebe akorád se stejnou mezerou.

 
Nahoru Odpovědět
31.10.2015 17:54
Avatar
alfonz
Člen
Avatar
alfonz:31.10.2015 18:11

Podívej se na flex-box to by mohlo pomoct

Nahoru Odpovědět
31.10.2015 18:11
lmao
Avatar
Uživatel sítě
Tvůrce
Avatar
Odpovídá na mat.masar
Uživatel sítě :31.10.2015 18:13

Co třeba:

#reference {
    text-align: center;
}
Nahoru Odpovědět
31.10.2015 18:13
Chybami se člověk učí, běžte se učit jinam!
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na mat.masar
Honza Bittner:31.10.2015 18:13

1 - Mezery v kódu lehce odstraníš minifikací, což by jsi na produkci měl mít. :-)

2a - Můžeš použít CSS3 :nth-child() selektor pro 3. obrázek v řádku, kterým odstraníš margin (odsazení), jinak budou mít nějaký margin-right.

2b - Můžeš použít flexbox s pravidlem justify-content: space-between, se kterým to bude asi nejvíce cool (bude se to přizpůsobovat automaticky). Viz http://goo.gl/H4vED4. Samozřejmě pro fotky si dáš nějakou šířku v procentech, např. 30%.

#hobijebuh

Nahoru Odpovědět
31.10.2015 18:13
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na mat.masar
Neaktivní uživatel:31.10.2015 18:36

Jak to myslíš pod sebou? Když jsem to zkoušel u sebe, tak to normálně fungovalo. :)

Nahoru Odpovědět
31.10.2015 18:36
Neaktivní uživatelský účet
Avatar
mat.masar
Člen
Avatar
Odpovídá na Neaktivní uživatel
mat.masar:31.10.2015 18:58

Když jsem přidal to display:table; tak se to zobrazilo pod sebou... je jen jedna v řádku

 
Nahoru Odpovědět
31.10.2015 18:58
Avatar
mat.masar
Člen
Avatar
Odpovídá na Honza Bittner
mat.masar:31.10.2015 20:27

Tvůj nápad se mi líbí, obzvláště kvůli tomu, že jsem jenom zkopíroval ten složitý kód a nemusel jsem si lámat hlavu s tím co mám blbě. Akorád mám ještě dotaz. Teď to vypadá jako na obrázku(příloha) a já bych potřeboval dát ten poslední obrázek v 3 řádku k tomu před ním, aby tam nebyla mezera na další obrázek. A potom, jak se nastavuje rozestup mezi jednotlivými flex-itemy.

 
Nahoru Odpovědět
31.10.2015 20:27
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Neaktivní uživatel
Tomáš123:31.10.2015 21:01

Display: table pri tejto štruktúre nejde využiť, lebo prvky do seba nie sú vhodne vnorené. Môžu byť všetky v riadku alebo stĺpci.

Nahoru Odpovědět
31.10.2015 21:01
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na mat.masar
Tomáš123:31.10.2015 21:10

Použil by som tento zápis:

#reference a {float: left}
#reference a img {margin-right: 12px;}

Problém vzniká na iba na poslednom riadku. Ani text posledného riadku sa nerozťahuje až na koniec. Pomôže, ak na konciec ešte niečo pridáš. Napríklad span s vlastnosťami display: inline-block, width: 100%.

Display: flex má zbytočne slabú podporu.

Nahoru Odpovědět
31.10.2015 21:10
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na mat.masar
Tomáš123:31.10.2015 21:12

Pardón, ked pridáš prázdny prvok, obrázky sa ti zarovnajú ako na snímku vyššie. Odporúčam ten float.

Nahoru Odpovědět
31.10.2015 21:12
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Tomáš123
Honza Bittner:31.10.2015 21:50

Protože 95 % je zbytečně slabá podpora? :-)

http://caniuse.com/#…

Ale tak pokud někdo rád podporuje prehistorické prohlížeče, pak GG. :-`

Nahoru Odpovědět
31.10.2015 21:50
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
mat.masar
Člen
Avatar
Odpovídá na Tomáš123
mat.masar:31.10.2015 21:52

Podporuje to dost prohlížečů

Jo ty fotky jsou teďka seřazené jak jsem chtěl, akorád to překryl div co je normálně pod fotkama. Mám dát

#reference{
margin-bottom: 500px; // např?
}
Editováno 31.10.2015 21:52
 
Nahoru Odpovědět
31.10.2015 21:52
Avatar
mat.masar
Člen
Avatar
Odpovídá na Honza Bittner
mat.masar:31.10.2015 21:54

Jo podporuje to dost prohlížečů, a co je tedy lepší používát? Ten flexbox nebo normální float atd? U toho flexboxu se mi líbilo, že už je responzivní a nemusím to dělat já.

 
Nahoru Odpovědět
31.10.2015 21:54
Avatar
Tomáš123
Člen
Avatar
Odpovídá na mat.masar
Tomáš123:31.10.2015 22:29

Tých 5% sú tisíce...

Nie, pred koncovu značku divu #reference vlož <div style=clear:both> alebo nastav #reference nejaký overflow.

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
31.10.2015 22:29
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na mat.masar
Honza Bittner:1.11.2015 11:50

Flexbox není responzivní v pravém slova smyslu, jen je flexní (flex == ohnout).

Je to perfektní nástroj na pozicování, což v CSS dost chybělo. Samozřejmě se dalo dost dobře pozicovat aj v bez něho, ale to byly spíše takové hacky, než-li opravdové možnosti pozicování. Hlavně je třeba si uvědomit a následně pochopit, že se pracuje s 2 osami, což je trochu nezvyklé a do začátku to může dělat trochu problémy, jelikož stejný kód s změněnou osou dělá úplně něco jiného. Každopádně flexbox není všemocný a když určíš osu, nemůžeš pracovat s druhou.

Nějaké info o flexboxu máš tady na webu, ale to je IMHO dost omezené a né tak dobře popsané, takže doporučuji spíše http://the-echoplex.net/flexyboxes (aplikace pro testování), http://philipwalton.github.io/…d-by-flexbox (ukázky řešení nějakých problémů), https://www.youtube.com/watch?… (super vysvětlovací video), https://css-tricks.com/…-to-flexbox/ (dost dobrý psaný "návod", mě se líbil nejvíce).

Nahoru Odpovědět
1.11.2015 11:50
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
mat.masar
Člen
Avatar
Odpovídá na Honza Bittner
mat.masar:1.11.2015 11:55

Nakonec jsem použil to normální stylování, ale pro příště budu znát i další možnost jak něco udělat. Takže díky

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