Autor Zpráva
kamil223
Profil *
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
kamil223:
width:100%; height:100%; nestaci? Asi bude treba este margin a padding 0 na body.
Rellik
Profil
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 *
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
a co to má zakryt?? Jestli to chceš nad něco dát, tak tam přidej
z-index: 1;
(případně vyšší číslo, jestli už nějaký používáš) to ti ten div dá nad obsah toho co tam máš. Je to v podstatě jako když děláš v nějakém grafickém editoru a používáš přitom vrstvy, které jsou nad sebou...
kamil223
Profil *
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
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 *
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 *
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
platoon
Profil *
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;
Pořešil jsem to tak, že jsem spodní dal na html element, prostřední na body a vrchní na DIV. Ale funguje to jen částečně, v celém dokumentu mám jen pozadí z html, ale pozadí z body a toho DIVu mi končí na spodní hraně fóra a ani zaboha nemůžu ten div ani pozadí z body roztáhnout přes celou stránku dokumentu. Ví někdo co s tím? To fórum mám tady: http://lsd-songs.4fan.cz/forum
Chamurappi
Profil
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 *
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 ... :)
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
Vyřešeno.
jenikkozak
Profil
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%;
      }
Sice se mi ještě dots.png neroztahuje na celý dokument (jen na obrazovku), ale to tam snad nějak časem dostanu. Stejně to skoro není vidět.
CZghost
Profil
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
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
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
pl4toon:
Jo, je to pěkný :-) Nejspíš si udělám něco podobného na svoje stránky :-)
pl4toon
Profil
Díky :)
CZghost
Profil
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
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
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 ;)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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