Avatar
mat.masar
Člen
Avatar
mat.masar:

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
Fredep
Redaktor
Avatar
Odpovídá na mat.masar
Fredep:

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  -1 31.10.2015 17:50
Týmová práce je důležitá proto, aby bylo možno obvinit z neúspěchu někoho jiného.
Avatar
mat.masar
Člen
Avatar
Odpovídá na Fredep
mat.masar:

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
Denis Homolík (Alfonz):

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

Nahoru Odpovědět  ±0 31.10.2015 18:11
Vše je možné, dokud si to myslíte!
Avatar
Marek Z.
Redaktor
Avatar
Odpovídá na mat.masar
Marek Z.:

Co třeba:

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

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  +1 31.10.2015 18:13
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Fredep
Redaktor
Avatar
Odpovídá na mat.masar
Fredep:

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
Týmová práce je důležitá proto, aby bylo možno obvinit z neúspěchu někoho jiného.
Avatar
mat.masar
Člen
Avatar
Odpovídá na Fredep
mat.masar:

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:

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 Fredep
Tomáš123:

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:

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:

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
Redaktor
Avatar
Odpovídá na Tomáš123
Honza Bittner:

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  -2 31.10.2015 21:50
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
mat.masar
Člen
Avatar
Odpovídá na Tomáš123
mat.masar:

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:

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:

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í
+1 bodů
Ř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
Redaktor
Avatar
Odpovídá na mat.masar
Honza Bittner:

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  -2 1.11.2015 11:50
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
mat.masar
Člen
Avatar
Odpovídá na Honza Bittner
mat.masar:

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.