| Autor | Zpráva | ||
|---|---|---|---|
| Stalker Profil |
Ahoj,
jak docílit toho, aby horní border nebyl pod "kolečkem" ale končil vlevo i vpravo cca 5px před "kolečkem"? Ukázka: jsfiddle.net/fak8hw99 Edit: ještě bych chtěl dodat, že obsah nebude mít fixní šířku |
||
| Trejpa Profil |
#2 · Zasláno: 14. 2. 2016, 16:30:02
Stalker:
Toho rámečku se nezbavíš. Můžeš ho ale překrýt jinou barvou. „aby horní border nebyl pod "kolečkem"“ Nastavit kolečku barvu pozadí: background: white;
„končil vlevo i vpravo cca 5px před "kolečkem"?“ Je třeba další element, který stejným způsobem překryje čáru. Kolečko bude teprve před ním. ukázka |
||
| Stalker Profil |
#3 · Zasláno: 14. 2. 2016, 16:44:21
Trejpa:
Zapomněl jsem dodat, že na pozadí je obrázek, takže nejde použít fallback bílého pozadí pod kolečkem |
||
| anonymníí Profil * |
#4 · Zasláno: 14. 2. 2016, 17:10:57
Stalker:
K tomu obecné řešení asi nepovede. Osobně bych to, pokud dám na svou intuici a první nápad, místo Trejpovy bílé na pozadí přiřadil totéž pozadí, které má rodič, jen s jinou background-position. Tak, aby to sedlo. Při změně (rozměru) pozadí s tím budeš muset trochu laborovat, ale jiná cesta asi nepovede.
|
||
| Stalker Profil |
anonymníí:
A když bych to ještě zkomplikoval a byl by na pozadí carousel z obrázků? :) Já nad tím celkově přemýšlel tak, že mezi rámečky umístím nějaký obrázek a bordery udělám přes after a before, zatíkající např. -5000px a +5000px s tím, že to pak oříznu, ale tím pádem bych obrázek mezi rámečky ořízl i z vrchu. Něco takového: jsfiddle.net/fak8hw99/1 ale ještě chloupek k dokonalosti chybí :) Leda to obalit ještě jedním obalem a tomu nastavit padding-top, v případě, že znám výšku obrázku. To by šlo, ale že by se mi to zrovna nějak moc líbilo, se říct nedá :D Ukázka: jsfiddle.net/fak8hw99/2 |
||
| Keeehi Profil |
#6 · Zasláno: 14. 2. 2016, 17:28:47
A co se vykašlat na rámečky a jen si to prostě nakreslit a použít obrázek?
|
||
| Stalker Profil |
#7 · Zasláno: 15. 2. 2016, 07:42:21
Keeehi:
Když tvoříš webové stránky je vždy dobré (pokud to jde) vše tvořit pomocí HTML a CSS. V tomto případě obrázek použít nemůžu, protože jednak bude text různě veliký a potřebuji, aby se ten rámeček natahoval a zkracoval a druhak bude web responzivní, takže potřebuji aby se rámeček automaticky zmenšoval na menších zařízeních. |
||
| Keeehi Profil |
#8 · Zasláno: 15. 2. 2016, 09:05:36
Stalker:
Toho jde ale přece dosáhnout i s obrázky. Pamatuji si dobu, kdy se kulaté rohy musely řešit přes obrázky. Pokud nebyla známá ani šířka ani výška boxu, bylo na to potřeba 8 obrázků. Což sice bylo trochu nepohodlné, ovšem funkční. Plně responsivní provedení be tvém by mělo být možné s 2 png obrázky. No a nebo by taky mohlo jít využít SVG. |
||
| Trejpa Profil |
#9 · Zasláno: 15. 2. 2016, 09:10:06
Stalker:
„Když tvoříš webové stránky je vždy dobré (pokud to jde) vše tvořit pomocí HTML a CSS.“ Naštěstí ne všichni sdílí stejný názor. „V tomto případě obrázek použít nemůžu“ Nemůžu nebo neumím? Už před deseti lety jsem řešil stejný problém v situaci, kdy u natahovacího rámečku každý roh i stěna vypadala jinak. S dnešními možnostmi CSS a tvým jednoduchým 1px rámečkem je to jen o dost jednodušší. Ve tvém případě bude stačit jen jeden obrázek vodorovné čáry (dlouhé, co to dá, vysoké 1 px), která má uprostřed průhlednou mezeru. Dáš ji bloku s rámečkem jako pozadí zarovnané nahoru na střed bez svislého opakování, horní rámeček zrušíš. Můžeš doplnit 1 px odsazení paddingu shora jako kompenzaci chybjícího pixelu. |
||
| Stalker Profil |
#10 · Zasláno: 15. 2. 2016, 12:38:04
|
||
| Keeehi Profil |
#11 · Zasláno: 15. 2. 2016, 23:44:23
Stalker:
„Proč zrovna toto řešit obrázky a nepoužít css? Napřijde mi to jako dobré řešení.“ Protože to je jednoduché a všude krásně funkční. |
||
| Speedy21 Profil |
#12 · Zasláno: 16. 2. 2016, 12:09:37
Souhlasím s Trejpou Keeehim... Stačí použít jediný obrázek a nemusíš zbytečně psát 50 řádků kódu, kvůli takové maličkosti.
Živá ukázka |
||
| Speedy21 Profil |
#13 · Zasláno: 16. 2. 2016, 14:47:34
Pokud bys ale trval na svém, tak tady je to pouze pomocí kódu:
Živá ukázka |
||
| Stalker Profil |
#14 · Zasláno: 16. 2. 2016, 15:20:22
|
||
|
Časová prodleva: 9 let
|
|||
0