Avatar
Martys
Člen
Avatar
Martys:

Zdravím,
moc Vás prosím někoho o radu, nevím si s tím rady už několik dní. Na svůj prezentační web si chci vložit porfolio obrázků pomocí Mixitup. Chci do toho vkladat obrazky v css jako pozadí, ale když to zapíši ve style souboru jak je níže uvedeno tak se ten jeden obrazek opakuje 8x krat.

Dotaz tedy zní - jak zapsat/vložit 8 rozdílných obrázků do Css . Zde se to na jednom foru řeší, je tam odpoved od Luismi a KunkaLabs, že se to musí vložit jako pozadí, ale stále to nechápu. Pokud je můj dotaz nesrozumitelný prosím napište mi to někdo , s HTML začínám a pořád se učím.

<setion id="portfolio">
<h2>Portfolio</h2>
<div class="controls">
<label>Filter:</la­bel>

<button class="filter" data-filter="all">A­ll</button>
<button class="filter" data-filter=".category-1">Logos & graphic design</button>
<button class="filter" data-filter=".category-2">Web design & development</but­ton>

</div>
<div id="imag" class="imag">

<div class="mix category-1" data-myorder="1"></div>
<div class="mix category-1" data-myorder="1"></div>
<div class="mix category-1" data-myorder="1"></div>
<div class="mix category-2" data-myorder="1"></div>
<div class="mix category-1" data-myorder="1"></div>
<div class="mix category-2" data-myorder="1"></div>
<div class="mix category-1" data-myorder="1"></div>
<div class="mix category-2" data-myorder="1"></div>

</div>
</section>

CSS soubor - tento zapis u background-image nefunguje, opakuje se mi ten prvni obrazek 8krat.

.imag .mix{
text-align: left;
background-image: url("img/srea­lity.png"), url("img/czb.png");
background-size: cover;
margin-bottom: 2%;
display: none;
}

děkuji za Váš čas.
Martin

 
Odpovědět 17. srpna 8:42
Avatar
Martys
Člen
Avatar
Odpovídá na Martys
Martys:

Omlouvam se zapomel jsem vlozit odkaz kde se to řešilo, tady je

https://mixitup.kunkalabs.com/…ding-images/

Martin

 
Nahoru Odpovědět 17. srpna 8:44
Avatar
Mego
Člen
Avatar
Mego:

Prečo nedáš každému div-u ešte inú classu a v CSS potom špecifickej classe nastavíš pozadie?
Lebo chápeš, ty teraz máš všetky div-ka rovnako pomenované, preto všetky nadobudnú len ten prvý picture...

Editováno 17. srpna 8:47
Nahoru Odpovědět 17. srpna 8:46
Radšej 15 minút skôr, ako 15 sekúnd neskoro...
Avatar
Martys
Člen
Avatar
Odpovídá na Mego
Martys:

Ahoj díky moc za rychlou odpověd,
myslel jsem že ten zápis od Mixitup je daný a nelze ho nějak modifikovat.

myslíš třeba takto?
<div id="imag" class="imag">

<div class="mix category-1" data-myorder="1" class="czbet"></­div>
<div class="mix category-1" data-myorder="1" class="sreal"></div>

</div>
css

.imag .mix .sreal{
text-align: left;
background-image: url("img/srea­lity.png");
background-size: cover;
margin-bottom: 2%;
display: none;
}

.imag .mix .czbet {
background-image: url("img/czb.png");
}

Když to takto zapíši tak mi to nefunguje a vše je prázdné, pokud jsem to špatně pochopil prosím napiš mi to.
dík
M

 
Nahoru Odpovědět 17. srpna 9:00
Avatar
Mego
Člen
Avatar
Mego:

<div class="mix category-1 czbet" data-myorder="1"></div>
<div class="mix category-1 sreal" data-myorder="1"></div>

Takto sa píšu viacnásobné classy. Nesmieš mať v jednom <div> viackrát atribút class... napíšeš to do jednej s medzerou medzi názvami. Ak rovnaký názov classy nepoužiješ nikde, stačí ti to v CSS dať ako .czbet, nepotrebuješ písať celý selector.

A ešte takto... všetky obrázky zrejme majú mať rovnaké niektoré nastavenia, napr. text-align, background-size atď. Tak tie daj na classu .mix (to majú všetky) a iba samotnú cestu k obrázku dávaj do tych tvojich class

PS: Netuším čo to je mixitup, takže možno trepem sračky :D

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět  +1 17. srpna 9:29
Radšej 15 minút skôr, ako 15 sekúnd neskoro...
Avatar
Martys
Člen
Avatar
Odpovídá na Mego
Martys:

Díky kámo,

už to funguje, a děkuji moc za přehledné vysvětlení ted´ už to chápu. Dává to i smysl :-)

Martin

 
Nahoru Odpovědět  +1 17. srpna 10:14
Avatar
Ondřej Langr (andysekcze):

Nemůžete používat tlačítko "Vložit zdroják"?

Nahoru Odpovědět  +1 17. srpna 16:12
I have a charger. I have Note 7. Umh I haven't Note7.
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 7 zpráv z 7.