| Autor | Zpráva | ||
|---|---|---|---|
| mezerap Profil |
#1 · Zasláno: 8. 1. 2018, 14:54:07
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 |
#2 · Zasláno: 8. 1. 2018, 15:12:51
mezerap:
background-image: transparent url("img/poly_small.png"); |
||
| mezerap Profil |
#3 · Zasláno: 8. 1. 2018, 15:26:47
radekt:
Zkoušel jsem a nefunguje, navíc mi program vyhazuje chybu v syntaxi :( |
||
| Tomášeek Profil |
#4 · Zasláno: 8. 1. 2018, 15:54:41
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 |
#5 · Zasláno: 8. 1. 2018, 16:21:31
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 |
#6 · Zasláno: 8. 1. 2018, 16:48:15
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 |
#7 · Zasláno: 8. 1. 2018, 18:07:59
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 |
#8 · Zasláno: 9. 1. 2018, 05:48:54
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 |
#9 · Zasláno: 9. 1. 2018, 09:19:38
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 |
#10 · Zasláno: 9. 1. 2018, 09:49:08
mezerap:
Jaký je přesně smysl té transformace 90deg, když ji pak rušíš zpět pomocí -90deg? |
||
| Bubák Profil |
#11 · Zasláno: 9. 1. 2018, 13:52:02
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 |
#12 · Zasláno: 9. 1. 2018, 15:56:42
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 |
#13 · Zasláno: 9. 1. 2018, 16:37:50
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 |
#14 · Zasláno: 10. 1. 2018, 18:28:15
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. |
||
|
Časová prodleva: 6 let
|
|||
0