| Autor | Zpráva | ||
|---|---|---|---|
| pepicek23 Profil * |
#1 · Zasláno: 15. 2. 2016, 18:38:50
Dobrý den, chtěl bych si nastavit stránku, která by byla rozdělená na 4 čtvercové části (
 ). Mám k dispozici tohle:  , jak toho lze docílit, aby byl výsledek responzivní?
|
||
| jakre Profil |
pepicek23:
Tak sem přidej odkaz na živou ukázku. Nahraj ji třeba zde. Zřejmě u jednodlivých částí používáš vlastnosti display:inline-block. Je potřeba to nahradit za display:block.
|
||
| anonymníí Profil * |
#3 · Zasláno: 15. 2. 2016, 18:45:59
jakre:
„Je potřeba to nahradit za display:block.“
Ne. S display: block budou ty 4 bloky pod sebou.
pepicek23: Float: left s 50% šířkou.
|
||
| jakre Profil |
#4 · Zasláno: 15. 2. 2016, 18:57:56
pepicek23 a anonymníí:
Omlouvám se. Zřejmě je pro mě to zadání moc malé. Dodávám hotové řešení. |
||
| pepicek23 Profil * |
jakre:
Ukázku přímo nemám, kvůli tomu sem teké píšu, ale prozatím jsem to vytvořil tímto způsobem: Živá ukázka Tenhle web to nějak nezvládá, tady to funguje: liveweave.com/#&togetherjs=aH2TCkkUOA Pardon, poslal jsem špatný odkaz, tady je správný: liveweave.com/#&togetherjs=aH2TCkkUOA |
||
| jakre Profil |
pepicek23:
Teď je to tedy vyřešeno? Ten odkaz funguje, ale jen v některých prohlížečích. |
||
| pepicek23 Profil * |
Není, tohle je princip, kdy mám obrázky 1.png, 2.png, 3.png a 4.png. Já bych chtěl princip, kdy bych nahradil tyto obrázky jedním obrázkem group.png a jednotlivým položkám bych jen upravil pozici pozadí.
A pokud myslíte vaše řešení, co jste zaslal, tak bych potřeboval variantu s obrázky, protože tohle, co tu posílám je jen názorné řešení, chctěl bych ho uplatnit na konkrétní projekt, kde jsou jiné obrázky |
||
| jakre Profil |
#8 · Zasláno: 15. 2. 2016, 19:15:55
pepicek23:
To se jmenuje sprite. Něco si o tom můžeš přečíst v tomto článku. |
||
| Tomáš123 Profil |
#9 · Zasláno: 15. 2. 2016, 19:24:28
pepicek23:
Pozor na dopočítavanie výšky. Závisí od nadradeného bloku. Použi hack. „ Živá ukázka“ Tomu vravím hospodárenie s triedami. :-). Takto by to nestačilo? |
||
| pepicek23 Profil * |
#10 · Zasláno: 15. 2. 2016, 20:36:34
Bohužel by nestačilo, chtěl bych css sprite, kde by se mi zobrazovaly obrázky, jak by měly (tj. neměnil by se poměr stran obrázku), ale zároveň by byl web responzivní, aby byly obrázky vždy dobře zobrazitelné a v případě potřeby by se zmenšily. Když bych použil klasické css sprite, tak mohu nastavit jen jeden rozměr, který by se neměnil a byl dán pevně v pixelech, já bych ale chtěl v procentech.
|
||
| Tomáš123 Profil |
#11 · Zasláno: 15. 2. 2016, 21:15:33
pepicek23:
„tj. neměnil by se poměr stran obrázku“ Nemení sa. Ten hack som už spomínal. „já bych ale chtěl v procentech.“ Môžeš ho natiahnuť cez backround-size. Ja som na to vo svojej ukážke zabudol. Lepšie? To je tvoj obrázok z prvého príspevku. Ide použiť aj úplne malé obrázky, napríklad túto favikonku: Živá ukázka.
A je to celkom animácieschopné. |
||
| pepicek23 Profil * |
#12 · Zasláno: 15. 2. 2016, 21:37:05
Tohle řešení je celkem dobré, má ale jednu vadu, chtěl bych, aby se web přizpůsobil nejen na šířku, ale i na výšku - aby nebylo potřeba scrollovat. Tento projekt by měl sloužit jako rozcestník pro web a scrollování bych raději nepoužíval.
|
||
| Tomáš123 Profil |
#13 · Zasláno: 15. 2. 2016, 22:05:37
pepicek23:
Nuž, možno nejako takto. |
||
| jakre Profil |
#14 · Zasláno: 15. 2. 2016, 22:07:32
Tomáš123:
Ještě bych u procentuálních rozměrů doporčuil používat max-width a max-height.
|
||
| pepicek23 Profil * |
#15 · Zasláno: 15. 2. 2016, 22:18:08
Něco takového by šlo, ale chtěl bych bez deformace obrázků - klidně vedle nebo pod bílé místo.
|
||
| Tomáš123 Profil |
#16 · Zasláno: 16. 2. 2016, 14:11:13
pepicek23:
Neviem, či je toto riešiteľné v čistom CSS. Totiž, existujú obrazovky s rôznym pomerom strán. V JavaScripte by šlo spočítať, ktorý rozmer zobrazovacej plochy je väčší. Ak by bola väčšia šírka, za hodnotu width by sa dosadila hodnota podielu výšky a počtu buniek v stĺpci (2) (za height 100%). V prípade, že by bola väčšia výška, za hodnotu height by sa dosadila hodnota podielu šírky a počtu buniek v riadku (tiež 2) (za width tiež 100%). Dosadzovanie.
Samotný obrázok sa vie prispôsobovať tak, ako je požadované, ale odkaz nevie (bez JS) nadobúdať potrebných šírok, resp. výšok. Alternatívnym a bez JS lepšie funkčným riešením by bolo pokračovať s predchádzajúcim (deformovaným) riešením a pripraviť si dva obrázky: pre monitory s pomerom strán 4:3 a 16:9(*). Predvolene by si načítaval 16:9, ale ak by mal užívateľ starší monitor a zapnutý JavaScript, predhodil by si mu jeho verziu. *pre mobily by neboli vhodné dátovo náročné obrázky pre počítače. Takže, cez @media pravidlo by sa malým obrazovkám servírovalo iné CSS, napríklad podobné druhej ukážke v tomto príspevku (HTML by netrebalo meniť), resp. nejaké, kde sa už trochu roluje.
|
||
| pepicek23 Profil * |
#17 · Zasláno: 16. 2. 2016, 16:21:21
Super, ale chtěl bych, aby se i při hoveru zobrazoval obrázek.
|
||
|
Časová prodleva: 9 let
|
|||
0