| Autor | Zpráva | ||
|---|---|---|---|
| johnl Profil |
#1 · Zasláno: 26. 4. 2014, 10:32:45
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
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;
}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 |
#4 · Zasláno: 26. 4. 2014, 15:22:01
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; } |
||
| johnl Profil |
#5 · Zasláno: 26. 4. 2014, 21:58:25
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
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: 10 let
|
|||
0