21. září bude sraz! Od 18.00 v restauraci Tradice v Praze u Anděla
Autor Zpráva
mezerap
Profil
Zdravím, mám dotaz ohledně textu, který překrývá grafiku.

Obrázek

Potřebuji, aby text "1 KROK" překrýval obrázek a byl vycentrovaný jako v ukázce. Přerušovaná čára představuje DIVy, jak jsem to původně zamýšlel, ale nedaří se mi přijít na správné řešení. Navíc musí být prvek responzivní. Zkoušel jsem použít pro obrázek v DIVu possition: absolute, ale to mi rozhodí celou grafiku. Když dám possition: relative, tak se to nepřekryje a když použiju namísto <img/> pro DIV background-image tak nedokážu nastavit, aby se zobrazoval celý.

Vypadá to asi takto
Obrázek 2

V css to mám pro ten „čtvercový” DIV takto:
    background-image: url("img/poly_small.png");
    background-repeat: no-repeat;
    background-size: auto;
    text-align: center;
    width: auto;
    display: block;
    float: left;

Kombinoval jsem background-size a samotnou velikost DIVu, ale nedaří se mi na to přijít.

Pro někoho to bude možná banalita, ale dokázal by mi s tím někdo pomoci? Děkuji.
radekt
Profil
mezerap:
background-image: transparent url("img/poly_small.png");
mezerap
Profil
radekt:
Zkoušel jsem a nefunguje, navíc mi program vyhazuje chybu v syntaxi :(
Tomášeek
Profil
mezerap:
program vyhazuje chybu v syntaxi
Jakou chybu?

Pokud chceš pomoct, dodej odkaz na stránku, kde se problém vyskytuje. Ta jedna CSS deklarace je jen část problému, máš jich tam více (chybějící (pseudo)tabulku, chybějící rozměry, ...).
Bubák
Profil
radekt:
Chybná syntaxe, v background-image nemá transparent co dělat.

mezerap:
background-size: auto; nebude pro tvůj případ vhodná hodnota. Koukni na 100%, contain a cover, pravděpodobně nejvhodnější pro tvůj případ bude contain.
Koukám, že tam nemáš žádný padding.

Tomášeek:
chybějící rozměry
Rozměr se přizpůsobí obsahu.
Tomášeek
Profil
Bubák:
Na Obrázku 2 je text evidentně malý. Pokud se mu polygon přizpůsobí, bude sice vidět celý, ale text jej bude přetékat. Je třeba doplnit buď rozměr, nebo padding.
Bubák
Profil
Pak by šlo ještě něco takového:
Odkaz
Ale neumím s tím, takže nevím, jak přidat levý trojúhelník.
Odlišná barva pravého trojúhelníka je v příkladu kvůli zviditelnění.

Vycházel jsem z Zkosení hrany v CSS
Tomášeek
Profil
Bubák:
Levý se přidá pomocí :before a podobné sady deklarací. Jen to neřeší symetrii polygonu. Je jedno, jestli se na řešení použije sada pseudoelementů nebo obrázek, ale pevný rozměr tam být musí.
mezerap
Profil
Nakonec se mi to povedlo dát dohromady přes :before :after

Živá ukázka

V breakpointu udělám zmenšení a snad to bude fungovat. Díky za radu!
Tomášeek
Profil
mezerap:
Jaký je přesně smysl té transformace 90deg, když ji pak rušíš zpět pomocí -90deg?
Bubák
Profil
Tomášeek:
Levý se přidá pomocí :before a podobné sady deklarací.
Princip mi je jasný, jenom se mi nepovedlo napozicovat levý trojúhelník na správné místo.

Jen to neřeší symetrii polygonu.
Symetrický je určitě, je otázkou, zda polygon musí být pravidelný šestiúhelník. Viděl jsem pomocí CSS jednoduše udělaný čtverec, co automaticky přizpůsoboval výšku podle šířky, ale změnou (paddingu?) na jednom řádku šel nastavit libovolný poměr stran.Jen to nemůžu znova najít.
mezerap
Profil
Tomášeek:
tím jsem chtěl otočit text, protože by byl jinak otočený o 90° jako ten div
Tomášeek
Profil
mezerap:
Já to z kódu chápu, ale nechápu, proč je otočený ten div. To přeci není potřeba.

Bubák:
Symetrický je určitě, je otázkou, zda polygon musí být pravidelný šestiúhelník.
Myslel jsem pravidelný samozřejmě, nikoliv symetrický.

Viděl jsem pomocí CSS jednoduše udělaný čtverec, co automaticky přizpůsoboval výšku podle šířky
Ano, možné to je. Kdybych měl chuť, ukázku toho čtverce bych ti připravil, bude to rychlejší, než ji hledat. Ale není to předmětem vlákna, asi to psát nebudu.
Tomáš123
Profil
Bubák:
Spomínalo sa to vo vlákne Výška podle šířky.

Zdá sa mi, že predtým sa percentuálna hodnota vlastnosti padding počítala zo šírky aktuálneho elementu. Dnes sa mi správanie podarilo simulovať iba v prípade dvojice prvkov, kde rodič určil veľkosť percenta potomka. Živá ukázka

mezerap:
Živá ukážka možného riešenia.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0