| Autor | Zpráva | ||
|---|---|---|---|
| kamil223 Profil * |
#1 · Zasláno: 29. 7. 2011, 21:41:11
Pokouším se již delší dobu udělat DIV uplně přes celou obrazovku, ale vubec se mi to nedaří, ví někdo jak na to? klidně za pomocí JS.
|
||
| pcmanik Profil |
#2 · Zasláno: 29. 7. 2011, 21:57:37
kamil223:
width:100%; height:100%; nestaci? Asi bude treba este margin a padding 0 na body. |
||
| Rellik Profil |
#3 · Zasláno: 29. 7. 2011, 22:00:14 · Upravil/a: Rellik
Asi tak:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style>
div {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background-color: #cfcfcf;
}
</style>
</head>
<body>
<div>celá obrazovka</div>
</body>
</html>EDIT: barevné pozadí je tam jen pro ukázku, že je opravdu přes celý monitor... ;) |
||
| kamil223 Profil * |
#4 · Zasláno: 29. 7. 2011, 22:09:16
Rellik:
Diky, ale tohle je 100% na obrazovku, ja to blbě napsal, potřebuji, aby ten div byl uplně přes celý dokument, aby to zakrylo úplně vše... přidal jsem tam ještě position: fixed; ... to funguje v Firefoxu ale ne v IE... jak to vyřešit? Díky |
||
| Rellik Profil |
#5 · Zasláno: 29. 7. 2011, 22:30:49
a co to má zakryt?? Jestli to chceš nad něco dát, tak tam přidej
z-index: 1; |
||
| kamil223 Profil * |
#6 · Zasláno: 29. 7. 2011, 22:44:22
Ten DIV bude něco jako tmave pozadí, které zakryje cely dokument, ukáže se až po vyvolání skriptem.
Z-index: 1 mi v tomto případě nepoužije... zkus si přidat do tvého kódu nějaký text, aby se ukázalo rolování... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style>
div {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background-color: #cfcfcf;
}
</style>
</head>
<body>
<div>celá obrazovka</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><p>neco</p>
</body>
</html>A uvidíš, kde je pro mě ten kámen úrazu. Když začneš rolovat dolů, šedý div už tam nezasahuje a já potřebuju, aby byl přes úplně celý dokument. |
||
| Rellik Profil |
#7 · Zasláno: 30. 7. 2011, 07:11:16 · Upravil/a: Rellik
Takhle ti to schová celou obrazovku:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style>
#hlavni {
width: 100%;
margin: 0 auto;
text-align: left;
min-height: 100%;
height: 100%;
position: relative;
}
div {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
bottom: 0px;
background-color: #999;
}
</style>
</head>
<body>
<div id="hlavni">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>neco</p>
<div>celá obrazovka</div>
</div>
</body>
</html>jen musíš nějak dořešit to odkrývání / zakrývání... |
||
| margin Profil * |
#8 · Zasláno: 30. 7. 2011, 10:50:48
kamil223:
„Když začneš rolovat dolů, šedý div už tam nezasahuje a já potřebuju, aby byl přes úplně celý dokument.“ Není pro to důvod, stačí, když se den DIV bude posouvat, nebude mít pevnou pozici vzhledem k dokumentu, ale obrazovce, přesněji viewportu. Stačí maličká změna tvého kódu a bude ti to fungovat všude, krom IE6 a starších, tak, jak ji představuješ. Doskriptováním jde obdobného chování docílit i v IE6, ale já bych se na tuhle optimalizaci v tomto případě vykašlal. |
||
| Coll22 Profil * |
#9 · Zasláno: 31. 7. 2011, 11:00:04
Použil jsem kód Rellika, funguje všude.
Ještě jsem tam přidal min-width, abych ošetřil i případ, kdy okno nebude maximalizovane, při rolovani do stran, respektive doprava, tam vznikla mezera... DIKY |
||
|
Časová prodleva: 3 roky
|
|||
| platoon Profil * |
#10 · Zasláno: 2. 5. 2014, 00:41:59
Hello,
jj, tomuhle jsem porozuměl. Ale už si delší dobu lámu hlavu, jak to aplikovat na můj případ :S Mám stránku s phpbb3 fórem, trochu se to snažím upravit. Chci na tu stránku dát pozadí skládající se ze tří vrstev: spodní vrstva: background: #303235 url(./images/page.jpg) 50% 50% fixed repeat;
prostřední vrstva: background: url(./images/dots.png) 50% 50% fixed repeat;
vrchní vrstva: background: url(./images/page_gradient_light.svg) 50% -400px fixed no-repeat,
url(./images/page_gradient_dark.svg) 50% 0 fixed no-repeat; |
||
| Chamurappi Profil |
#11 · Zasláno: 2. 5. 2014, 12:36:58
Reaguji na platoona:
Chceš-li něčemu nastavit (minimální) výšku v procentech (tedy u tebe asi 100%), musí mít nastavenou výšku i všichni rodičové, včetně <html> a <body>.
|
||
| platoon Profil * |
#12 · Zasláno: 2. 5. 2014, 14:27:52
Chamurappi:
Šmarjááá, že bych byl až takovýhle tele? Fakt jsem tu 100% výšku nadřazeným prvkům nedal. Díky moc Chamurappi, zabralo to :) Jsem z toho phpbb3 fóra trochu zmatený, dost složitý systém pro začátečníka jako jsem já. Ale když už jsem se do toho jednou pustil ... :) |
||
|
Časová prodleva: 1 měsíc
|
|||
| pl4toon Profil |
Hoj jsem tu zas. Nějak se v tom neorientuji. Potřebuji roztáhnout div background a body background na celý dokument.
Teď se mi složené pozadí zobrazí správně jen na obrazovku, ale při posunutí stránky už tam nejsou dva prvky (body a div). Jak je natáhnout? Nemůžu dávat stylopis obecně na div, potřebuji to udělat takhle jak to je, jen to nastylovat. Náhled: http://lsd-songs.4fan.cz/testbg <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test background</title>
<style>
html {
background: #303235 url(page.jpg) 50% 50% fixed repeat;
width: 100%;
height: 100%;
}
body {
background: url(dots.png) 50% 50% fixed repeat;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
#bg-light {
background: url(page_gradient_light.svg) 50% -400px fixed no-repeat, url(page_gradient_dark.svg) 50% 0 fixed no-repeat;
background-size: 1200px 900px, 2560px 400%;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="bg-light">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body>
</html> |
||
| pl4toon Profil |
#14 · Zasláno: 10. 6. 2014, 14:11:43
Vyřešeno.
|
||
| jenikkozak Profil |
#15 · Zasláno: 10. 6. 2014, 14:20:02
Jaké řešení jsi zvolil?
|
||
| pl4toon Profil |
Mno jelikož se v tom moc nevyznám, tak jsem se během několikadenního testování formou pokusu a omylu dopracoval k tomuto jakštakš funkčnímu řešení:
html {
background: #303235 url(page.jpg) 50% 50% fixed repeat;
width: 100%;
height: 100%;
min-height: 100%;
}
body {
background: url(dots.png) 50% 50% fixed repeat;
margin: 0px;
padding: 0px;
width: 100%;
min-height: 100%;
}
#bg-light {
background: url(page_gradient_light.svg) 50% -400px fixed no-repeat, url(page_gradient_dark.svg) 50% 0 fixed no-repeat;
background-size: 1200px 900px, 2560px 400%;
height: 100%;
width: 100%;
min-height: 100%;
} |
||
| CZghost Profil |
#17 · Zasláno: 11. 6. 2014, 08:33:42
pl4toon:
U body je zbytečné uvádět min-height, stejně tak u html, ty jsou automaticky roztažené na celý průzor prohlížeče, pokud je na stránce delší obsah, zobrazí se rolovací lišta (případně lišty, je-li obsah také širší než průzor). Když už používáš vícenásobné pozadí, proč nenastavíš pozadí jednotně pro html (obrázky JPG a PNG) a pro body (obrázky SVG)? To by mělo spolehlivě fungovat :-) Kdyby nefungovalo pozadí na html, potom zkus JPG převést na PNG (kvalita zůstane stejná, jen se trochu zvýší objem dat)
|
||
| pl4toon Profil |
No mně to ale nešlo jinak. Nastavit jpg a png na html jsem také zkoušel a nějak to nefungovalo, vždy se mi zobrazil jen ten první. On je trochu problém v tom, že co mi v jednoduchém kódu funguje, tak na phpbb3 fóru třeba nefunguje. Má to asi 10 css souborů, v tom aby se čert vyznal.
Nakonec jsem to pořešil tak, že jsem si nechal zobrazit jen jpg a png, típnul jsem vlevo nahoře čtverec 300x300 a ten nastavil jako pozadí. Takže jsem se tak zbavil jedné vrstvy navíc. Už mám pozadí jaké jsem chtěl. Ale je to škoda, chtěl jsem se naučit, jak se dělá tohle čtyřvrstvé pozadí. |
||
| CZghost Profil |
#19 · Zasláno: 11. 6. 2014, 13:23:43
pl4toon:
No ono phpBB3 je dost problematické, co se týče bezpečnosti. SSL není dobře promyšlené a často padá, takže zde je lepší používat klasické nezabezpečené HTTP požadavky. Protože phpBB používá tunu skriptů a obsahuje přiliš mnoho CSS souborů v každém motivu, potom je dost těžké udělat nějaké úpravy bez nějakých hlubších znalostí kódů, zde se bez hledátka neobejdeš. Ostatně na tom pracuje více lidí a je to tak dělané schválně, aby se zabránilo nějakým úpravám razantně měnící vzhled fóra. Většinou, když děláš nějaký nový motiv, musíš vycházet z předdefinovaného motivu a z něj udělat fork. Nejsnáze se předělává Prosilver. |
||
| pl4toon Profil |
#20 · Zasláno: 11. 6. 2014, 19:03:24
Nový motiv jsem nedělal a ani ve snu bych si na to netroufl. Vybral jsem šablonu, co se nejvíce blížila tomu, čeho jsem chtěl dosáhnout a tu jsem přestyloval. Na to, že o tom vím prakticky kulový (mno trošku umím HTML), se výsledek myslím celkem povedl :) http://lsd-songs.4fan.cz/forum
|
||
| CZghost Profil |
#21 · Zasláno: 11. 6. 2014, 19:34:28
pl4toon:
Jo, je to pěkný :-) Nejspíš si udělám něco podobného na svoje stránky :-) |
||
| pl4toon Profil |
#22 · Zasláno: 11. 6. 2014, 20:04:25
Díky :)
|
||
| CZghost Profil |
#23 · Zasláno: 12. 6. 2014, 15:17:57
pl4toon:
Jenom mi trochu vadí angličtina, ale to asi bude tím, že fórum máš mezinárodní. Já to mám stejně :-) |
||
| pl4toon Profil |
#24 · Zasláno: 12. 6. 2014, 16:58:49
Výchozí jazyk fóra je nastavený na angličtinu schválně, jak si sám řekl, náš klub je mezinárodní. Ale pro čechy neznalé angličtiny to není žádný problém, registrace probíhá na webu v Joomle, kde si pomocí ikon nastaví jaký jazyk chtějí. Aktivovaný profil se pak přenáší pomocí JFusion i na fórum, takže jakmile se v Joomle přihlásí, je přihlášen i na fóru v jazyce, který si nastaví v profilu a fórum samozřejmě češtinu obsahuje :)
|
||
| CZghost Profil |
#25 · Zasláno: 12. 6. 2014, 17:11:59
pl4toon:
Tak to je vychytaný :-) Otázkou je ale, jestli ti, co se registrují na Joomle, chtějí být i na fóru :-) Možná by se hodilo takové udělátko, že by si uživatel mohl zaškrtnou políčko „Registrovat i na fóru“. V tom případě by se to propojilo a při přihlášení na Joomle se přihlásí i zároveň na fóru, neboť by souhlasila uživatelská jména a registrační e-mail :-) |
||
| pl4toon Profil |
To je myslím zbytečné, fórum bude v podstatě sloužit k veškeré komunikaci, proto jsem ani neinstaloval žádný plugin pro PM na Joomle. Všechny odkazy pro poslání PM v Joomle jsou přesměrované přímo na fórum, i se v Joomle zobrazují informace o PM z fóra (nové zprávy a celkový počet zpráv).
Prostě web bude sloužit jako nástěnka a rozcestník, veškerá komunikace bude na fóru. Jen škoda, že se mi nepovedlo propojit přímo stránky phpbb a Joomly, neumím udělat společné cookies a sessions, proto jsem to nechal takhle zvlášť a propojil je pomocí JFusion. Až se to jednou naučím, tak vyhodím JFusion a integruji phpbb3 fórum přímo do Joomly. Na YT jsem našel návod jak to udělat, ale připadá mi to strašně složité, tomu budu muset věnovat ještě hodně času, než to pochopím a ubastlím :D btw: jinak sry modům za OT v tématu ;) |
||
|
Časová prodleva: 10 let
|
|||
0