Autor Zpráva
Pavel V.
Profil
Zdravím Vás, jsem naprostý začátečník a pro známého jsem pomáhal vytvořit opravdu jednoduchou stránku

Použil jsem obrázek na pozadí o velikosti 1920*1080 (nevím zda jsem zvolil správně?)

V PC prohlížečích se stránka zobrazuje správně, problém však nastane při zobrazení v na mobilní platformě Android, kdy menu zasahuje do loga a text v pravém bloku přesahuje pozadí stránky a odsune odkazy na sociální sítě úplně mimo...

Jde mi o docílení toho, aby základní layout zůstal vždy procentuelně zhruba stejný při zobrazení jak na šířku, tak i na výšku.

Možná jsem si zbytečně zkomplikoval práci s použitím css a bylo by jednodušší použít jen základní html...?

Prosím o jakoukoliv radu.
Tomáš123
Profil
Pavel V.:

sociální sítě úplně mimo...
Odkazy umiestni do divu, nechaj ich plávať a daj im clear: right; Bude to však fungovať len za predpokladu, že vlastnosť float priradíš aj divu nad pätou.
Druhá možosť je umiestniť aj div textu aj päty do jedného spoločného divu, ktorému nastavíš šírku 25%.

Možná jsem si zbytečně zkomplikoval práci s použitím css a bylo by jednodušší použít jen základní html...?Prečo ten otáznik?
Určite nie, bez CSS by to nefungovalo ani tak ako teraz...

Použil jsem obrázek na pozadí o velikosti 1920*1080 (nevím zda jsem zvolil správně?)
Obrázok na pozadí môžeš urobiť tak, že ho prerobíš tak, aby obsahoval prechod a celému body dáš background-color vo farbe, ako prechod končí.
Pavel V.
Profil
Zkusil jsem nastavit velikosti divů v css pouze pomocí % a docílil jsem jakéhož tekéhož výsledku.

Rád bych ale, aby výška obrázku na pozadí zůstala neměnná (tzn. měnila by se v závislosti na výšce prohlížeče aby nedocházelo k opakování pozadí).

Co přesně mám u background nastavit? Mám na mysli width, height, min-height, min-width, cover, contain apod.

Proporce jsem nastínil zde na šířku a výšku.
Tomáš123
Profil
Pavel V.:
Rád bych ale, aby výška obrázku na pozadí zůstala neměnná (tzn. měnila by se v závislosti na výšce prohlížeče aby nedocházelo k opakování pozadí).
To som vôbec nepochopil...Veď stránka v tom odkaze, čo si tu dal pracuje presne ako chceš.

Nanešťastie, ja som to zbadal až teraz a už som urobil živú ukážku, tak ju tu dám:
kód;
ukážka.
Môžeš si pozrieť, ako idú divy za sebou, stačí vymazať symbol zahájenia komentáru "//" na začiatku riadkov s farbami.

Na ukotvenie obrázka som použil background-size: 100%;
juriad
Profil
// není komentář v css. Způsobí sice, že vlastnost nebude fungovat, ale je to chyba.
Správný komentář je /* ... */
Tomáš123
Profil
juriad:
Použil som aj správny komentár na správny účel (riadok 9). Dve čiarky "//" som použil iba na deaktivovanie vlastnosti, lebo som nechcel vymazávať farbu, keby ju chcel Pavel vidieť. Ale ďakujem za upozornenie, aj keď nie som zástancom kódu, z ktorého je polovica komentovaná a nikto z neho nevyjde.
Pavel V.
Profil
Zřejmě si stále nerozumíme. Nejde mi šířku pozadí při zobrazení v prohlížeči na šířku , ale o zachování 100% výšky při zobrazení v prohlížečích na výšku (android apod). Náhled

Podle návodu zde by se o to měl starat parametr conrtain, ale v mém případě nefunguje a pozadí při jeho použití zmizí zcela.
CZghost
Profil
Pavel V.:
Podle návodu zde by se o to měl starat parametr conrtain, ale v mém případě nefunguje a pozadí při jeho použití zmizí zcela.
Jaký používáš prohlížeč? Tato vlastnost nefunguje všude, Internet Explorer pod verzi 9 nepodporuje CSS 3, ve které je vlastnost obsažena, samotná devítka ignoruje většinu CSS 3 vlastností. Chceš-li zajistit zpětnou kompatibilitu, místo CSS použij pseudopozadí (pozadí, které je vloženo pomocí elementu img, je mu nastaveno absolutní pozicování a záporný z-index). Jinak parametr contain se snaží vecpat pozadí do divu tak, aby bylo vidět celé, ale mělo zachované proporce:

>>>> contain: Scale the image to the largest size such that both its width and its height can fit inside the content area
To znamená, že na mobilu se ti ukáže celý obrázek zmenšený tak, aby se tam vešel. Pokud chceš zpětnou kompatibilitu ignorovat (což bych nedoporučoval), použij místo contain parametr cover. Ten ti vyplní celý prostor tak, aby nezanechal žádné volné místo, což je přesně to, co potřebuješ. Netestoval jsem to na delší stránku, která roluje, je možné, že obrázek se natáhne i dolů, aby vyplnil celé body. To ještě budu muset vyzkoušet. Dám ti vědět.



EDIT: Jestli chceš skutečně zobrazit celou výšku obrázku nehledě na velikost stránky, zafixuj pozadí na stránku. Jinak se ti to v případě rolující stránky (což je na mobilu velmi často) roztáhne i dolů za viditelnou bariéru. Mimochodem, ty asi chceš pozadí mít pořád na jednom místě, aby se neposouvalo se stránkou, takže tohle je řešení pro dnešní prohlížeče. Na mobilu by to mělo fungovat.



EDIT: Tady jsou screenshoty v mém Dropboxu (jejich názvy mluví za vše, pro jistotu jsem doplnil popisek za URL):
https://www.dropbox.com/s/5ly0ff7ipmxuq53/bgsize_test_chrome.jpg (Google Chrome poslední verze)
https://www.dropbox.com/s/nu0tqshptbnbzwc/bgsize_test_ie11.jpg (Internet Explorer 11)
https://www.dropbox.com/s/jvvp4e3ovtzin24/bgsize_test_editor.jpg (Zdrojový kód testovací stránky)



Ještě jsem udělal živou ukázku, že nekecám :-) Klikni na zdrojový kód, máš tam komentář :-) Ještě se podívej čistě na ukázku a zkus si zobrazit zdrojový kód stránky pomocí funkce prohlížeče :-)
Pro úplnost zde ještě uvedu URL:
Zdrojový kód: http://kod.djpw.cz/tldb
Samotná ukázka: http://kod.djpw.cz/tldb-

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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