Autor Zpráva
johnl
Profil
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
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
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:
* {
  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"); }
Bubák
Profil
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; }
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
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
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.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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