Div-Container über komplette Seitenlänge

Hallo Leute,

Ich möchte einen Div-Layer über die komplette Seite legen, damidt die Seite nicht mehr angeklickt werden kann. Wenn ich nun aber den Layer auf 100% Breite und 100% Höhe setze wird nur die Größe des Browserfensters mit dem Layer überdeckt. Wenn ich nach unten scrolle wird der neu erscheinende Teil der Seite nicht mit überdeckt. Ich möchte den Layer jedoch auch nicht verschachteln. Weiß jemand wie ich dieses Problem lösen kann?

MFG TheMove

Hi,

ganz einfach, bau deine div so auf:

ahso: Höhe und Weite je 100%, aber das ist ja klar,
hoffe ich konnte Dir helfen…
lg. Meganova

Danke für deine Antwort, aber mein Problem ist damit leider immer noch nicht gelöst. Mein Problem ist, dass der Layer nur den Anzeigebereich des Browsefensters überdeckt. Wenn man nun nach unten scrollt wandert der Layer mit nach oben und es wird ein unüberdeckter Bereich frei.
Hier ist ein Beispiel: http://www.patrickmedia.de/test.htm
Der eingegraute Bereich ist der Layer und unterhalb des Anzeigebereiches geht er nicht weiter, obwohl er auf 100% gesetzt ist.

Achso, dann versuch es doch mal mit Höhe in Pixel anstatt in %.
Das müsste dann klappen.

lg. Meganova

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

Das ist ja auch nicht das was ich will. Bei der richtigen Seite ist der Inhalt immer unterschiedlich lang. Wenn man dem Layer nun eine statische Länge zuweist sieht das auch blöd aus.
Der Layer soll noch dynamisch bleiben und sich an die größe der Seite anpassen.

MFG TheMove

Achso,
dann kann ich Dir auch nicht helfen, ich bin mir nicht sicher aber ich glaub mit reiner HTML wird das nix, dann doch eher Javascript oder PHP oder so, davon hab ich aber kein Plan :frowning: !!!

lg. Menagnova

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

Hi,

ich denke die einfachste Lösung wäre, wenn du den kompletten Inhalt der Seite in einen div-container schreibst, dieser passt sich in der Größe dann automatisch der Länge des Inhalts an.

Gruß
Peave

Hey,
also ich habe gerade etwas Zeit gehabt und mir deinen Quelltext angesehen und ein bischen damit rumgespielt. Die einzige Möglichkeit für ein dynamisches Desigen ist, soweit ich das beurteilen kann, wenn du im bodytag eine Hintergrundfarbe einstellst. Dann geht sie über die komplette Seite und passt sich automatisch der Länge des Inhalts an.

Mir fällt da gerade noch etwas ein:
es gibt auch die Möglichkeit, dass du ein Bild deiner Hintergrundfarbe nimmst, dieses einfach als Hintergrund festlegst und über die komplette Seite wiederholen lässt. Das ist allerdings aufwändiger.

Gruß Peave

Hi Peave,
danke für deine Bemühungen aber das ist leider immer noch nicht die Lösung für mein Problem :frowning:.

Ich schilder jetzt am besten mein geamtes Vorhasben, damit ihr die Hintergründe versteht, warum eure Tipps mir leider nicht richtig weiterhelfen.
Ich entwerfe zur Zeit eine Bildanzeige. Wenn man auf ein Verkleinertes Miniaturbild klickt, wird der Hintergrund langsam ausgegraut und das Bild wird langsam in Originalgröße sichtbar. Das ausgrauen der restlichen Seite ist nötig, damit mehrfachklicks auf das Bild vermieden werden und so Scriptfehler ausgeschlossen werden. Das ganze Script ist JavaScript, da es aber reibungslos funktioniert liegt der Fehler nicht daran, sondern an dem HTML-DIV-Container, der den Hintergrund mit einem Halbdurchlässigen schwarzen Layer überdeckt. Mein Problem ist nun, wie ich es ja schon beschrieben habe, dass dieser Halbdurchsichtige-Layer nicht 100% der Seitenlänge sondern nur 100% des sichtbaren Bereiches einnimmt.

Hier ist ein Beispiel: http://www.patrickmedia.de/synergy-sound/
Wenn man nun auf die Galleriebilder klickt, kommt die Bildanzeige. Scrollt einfach nach unten und ihr seht mein Problem.

Hier ist noch der Quelltext zu dem div-container:

hinter onclick stehen die Javascript-Funktionen für das ein und ausblenden.

Und hier noch die Formatierungen aus der CSS-Datei:

div.bglayer {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: #000000;
z-index:100;
visibility: hidden;
}

Schon vielen Dank im voraus für eure Bemühungen.

MFG TheMove

Hey TheMove,
es gibt die Möglichkeit zu verhindern, dass der Besucher der Seite scrollen kann. Dazu muss man dem body noch einen style-tag zuweisen, dass sieht dann so aus:

Ich weiß nur nicht, ob du das so in dein script einfügen kannst, dass die Eigenschaft erst wirksam wird, wenn man auf das Bild klickt.(Bin noch recht neu im Metier)
Das ganze scheint mir ein Problem mit Firefox zu sein, denn im IE wird die Seite so angezeigt, wie es von dir beabsichtigt ist.
Gruß
Peave

Moin.

Da Du eh Javascript einsetzt, kannst Du ja die Größe mit Javascript bestimmen und dem div-Container zuweisen. So habe ich das mal gelöst.

Beispiel:
document.getElementById(‚layer‘).style.height=
(document.getElementById(‚content‘).offsetHeight + 50) + ‚px‘;

Mein div-Container hat die ID „layer“, der Bildschirminhalt ist in einem div mit der ID „content“, die Zeilen gehören ans Ende der Datei (vor

Danke, damit kann ich das Problem umgehen. Zwar hätte es mich allgemein interessiert, wie mein Problem konkret gelöst werden könnte(kann man ja vieleicht mal gebrauchen)aber Hauptsache es funktioniert.

MFG TheMove

Vielen vielen Dank. :smile:)

Die einfachsten Lösungen sind doch immer noch die Besten.

MFG TheMove

Hi,

ich war bis eben auch auf der Suche nach einer Problemlösung. Durch diesen Artikel bin ich auf eine Idee gekommen, die bei mir einigermaßen funktioniert. Das einzige Problem dabei ist noch, dass der Scrollbalken angezeigt wird und man auf der Seite scrollen kann.
Aber es wird trotzdem nur noch der darüberliegende Container angezeigt.

Du musst dem Container, der die Seite verdecken soll das Attribut position: fixed zuweisen.

Bei mir sieht das ganze so ähnlich aus

#container {
 position: fixed;
 height: 100%;
 width: 100%;
 background-color: #999999;
}

Damit bleibt er immer an der selben Stelle im Browser (also über dem sichtbaren Teil der Seite).

Ich hoffe, dir geholfen zu haben.
MfG