Autor Zpráva
pepicek23
Profil *
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 *
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
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
pepicek23:
To se jmenuje sprite. Něco si o tom můžeš přečíst v tomto článku.
Tomáš123
Profil
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 *
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
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 *
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
pepicek23:
Nuž, možno nejako takto.
jakre
Profil
Tomáš123:
Ještě bych u procentuálních rozměrů doporčuil používat max-width a max-height.
pepicek23
Profil *
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
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 *
Super, ale chtěl bych, aby se i při hoveru zobrazoval obrázek.

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: