Autor Zpráva
johnl
Profil
#1 · Zasláno: 26. 4. 2014, 10:32:45
Odpovědět Citovat
Zdravím,
na jeden web který právě tvořím jsem vymyslel, že bych udělal pro každou stranu webu jiné pozadí (a uprostřed by byl samotný web). Vymyslel jsem něco takového: Živá ukázka. Prostě dva fixované divy roztažené na 100% height. Hned jedna nevýhoda mě napadá, že asi v některých starších prohlížečích to nemusí zrovna 100% fungovat a vzhledem k tomu, že pozadí poté bude tvořit obrázek, mohlo by to dojem z webu zkazit.

Každopádně napadá někoho lepší, elegantnější řešení, nebo vylepšení toho mého?
Tomáš123
Profil
#2 · Zasláno: 26. 4. 2014, 13:16:34
Odpovědět Citovat
johnl:
„že pozadí poté bude tvořit obrázek, mohlo by to dojem z webu zkazit.“
Ak bude obrázok robený tak, že nebude vidno jeho koniec a začiatok ak by sa opakoval vertikálne, tak mu môžeš nastaviť: background-repeat: repeat-y;
CZghost
Profil
#3 · Zasláno: 26. 4. 2014, 13:57:44 · Upravil/a: CZghost o okamžik později
Odpovědět Citovat
johnl:
Jedna malá rada ohledně živé ukázky: Když si rozklikneš vertikální nápis CSS, tam najdeš dvě zaškrtávací pole. Jestli chceš vyplnit celý prostor, použij CSS reset, který přidá před veškeré specifikace tuto: 
1* {
2  margin: 0;
3  padding: 0;
4  border: 0;
5  zoom: 1;
6}
* {
  margin: 0;
  padding: 0;
  border: 0;
  zoom: 1;
}
Porovnání, jak vypadá tvoje živá ukázka s a bez CSS resetu:
Bez CSS Resetu (viz tvůj přiložený link): Zdrojový kód: http://kod.djpw.cz/yvcb | Samotná ukázka: http://kod.djpw.cz/yvcb-
S CSS resetem: Zdrojový kód: http://kod.djpw.cz/zvcb | Samotná ukázka: http://kod.djpw.cz/zvcb-

Jestli se to bude zobrazovat všude stejně můžeš otestovat sám. K dispozici musíš mít nejpoužívanější prohlížeče: Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari.

Jinak, možná se ti to bude hodit při příštím návrhu webdesignu: CSS3 umožňuje nastavit více obrázkových pozadí na jeden element, což velice usnadňuje práci s webdesignem. Obrázky se vykreslí v takovém pořadí, v jakém se zapíšou: 
.pozadi { background-image: url("../images/pozadi1.gif"), url("../images/pozadi2.gif"), url("../images/pozadi3.gif"); }
.pozadi { background-image: url("../images/pozadi1.gif"), url("../images/pozadi2.gif"), url("../images/pozadi3.gif"); }
Bubák
Profil
#4 · Zasláno: 26. 4. 2014, 15:22:01
Odpovědět Citovat
johnl:
http://kod.djpw.cz/awcb
http://kod.djpw.cz/awcb-
Funkční od IE7, po přidání html, body, .levy, .pravy {height: 100%; margin: 0; padding: 0} i v IE6.
Já osobně bych DIV .levy, nebo DIV .pravy vynechal a pozadí bych deklaroval elementu BODY.

Pokud má být pozadí jen dvojbarevné nebo jinak nekomplikované, je možné si podobné skopičiny odpustit a deklarovat pozadí obrázkové pozadí pro BODY.
http://kod.djpw.cz/bwcb
http://kod.djpw.cz/bwcb-
Obrázek na pozadí má 520 bajtů a dostatečné rozměry 16000×256px.

CZghost:
„Jinak, možná se ti to bude hodit při příštím návrhu webdesignu: CSS3 umožňuje nastavit více obrázkových pozadí na jeden element, což velice usnadňuje práci s webdesignem.“
V tomto případě nepomůže.
Tebou uvedený příklad by pro mne byl nepřehledný, protože bych dále musel deklarovat ve správném pořadí také background-repeat a background-position.
Deklarovat background místo background-neco mi přijde přehlednější 
.pozadi {background: url("../images/pozadi1.gif"), url("../images/pozadi2.gif") repeat-x, url("../images/pozadi3.gif") no-repeat 50% 20px; }
.pozadi {background: url("../images/pozadi1.gif"), url("../images/pozadi2.gif") repeat-x, url("../images/pozadi3.gif") no-repeat 50% 20px; }
Přiznám se, že kdybych byl nucen zapsat to jako background-něco, tak bych se musel podívat do CSS 3 specifikace.
johnl
Profil
#5 · Zasláno: 26. 4. 2014, 21:58:25
Odpovědět Citovat
CZghost:
„Jedna malá rada ohledně živé ukázky...“
Jen jsem to tam v rychlosti naházel, takže na toto jsem považoval za zbytečné, ono pokud si stejně nerozkliknu ukázku na celou stránku, tak to nejde poznat. :)

Bubák:
„http://kod.djpw.cz/awcb“
U této varianty, pokud délka pozadí přesáhne výšku okna, tak pozadí už dál není, proto jsem já použíl position fixed, takhle by to vypadalo: Živá ukázka

Pozadí bude spíš taková textura, tudíž ta varianta obrázku by mohla mít třeba půl mega (ale možná bych to stlačil i více), takže nad tím by se uvažovat dalo. :o)

Spíš se ještě kouknu na řešení pomocí CSS3, netušil jsem že to umí něco takového, pokud to bude fungovat tak jak chci tak bych to i použil, ale opět jsou tu ty některé starší prohlížeče. :o)
Bubák
Profil
#6 · Zasláno: 26. 4. 2014, 23:36:51
Odpovědět Citovat
johnl:
„U této varianty, pokud délka pozadí přesáhne výšku okna, tak pozadí už dál není, proto jsem já použíl position fixed,“
To mě nenapadlo, ale u u mého řešení můžeš místo absolute použít fided.
Časová prodleva: 11 let
Toto vlákno je staré, již dlouho do něj nikdo nepřispíval.

Informace a odkazy zde uváděné už nemusejí být aktuální. Nechcete-li řešit zde uvedenou konkrétní otázku, založte si vlastní vlákno, nepište do tohoto. Vložíte-li sem nyní příspěvek, upoutáte pozornost mnoha lidí a někteří z nich si jen kvůli vám přečtou i všechny předcházející příspěvky. Předpokládáte-li, že váš text skutečně bude hodnotný, stiskněte následující tlačítko:


Běda vám, jestli to bude blábol.

0