ripmav: div über ganze Seite

Hallo,
ich möchte ein div-Element über die gesamte HTML Seite legen.
Ich hatte folgenden Ansatz:

<div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: black;"></div>

(Damit es funktioniert muss außerdem <body style="margin: 0px; height: 100%;"> sein)

Das Problem ist: wenn man weiterscrollt, ist der untere Teil der HTML Seite nicht von diesem div überlagert.

Wie kann ich also ein div-Element komplett über die ganze HTML Seite legen?

MfG,
Max

  1. Hallo,
    ich möchte ein div-Element über die gesamte HTML Seite legen.
    Ich hatte folgenden Ansatz:

    <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: black;"></div>

    (Damit es funktioniert muss außerdem <body style="margin: 0px; height: 100%;"> sein)

    Wie kann ich also ein div-Element komplett über die ganze HTML Seite legen?

    Du musst es entweder so groß machen, wie die Seite ist (das geht aber schlecht) oder, du lässt es einfach mitscrollen! :)
    D.h. du verwendest position:fixed statt position:absolute

    1. D.h. du verwendest position:fixed statt position:absolute

      Das wäre natürlich toll, aber ich muss ja das div über alle anderen tags legen. Soweit ich weiss ist das nur mit position:absolute möglich..
      Es würde mich freuen, wenn du ein Beispiel geben könntest, wie du es genau meinst :)

      1. Es würde mich freuen, wenn du ein Beispiel geben könntest,  [...]

        ... genau das wollte ich eben zu _dir_ sagen. ;)

        1. ... genau das wollte ich eben zu _dir_ sagen. ;)

          Kein problem ;)
          Ich poste mal die ganze Seite zum Testen:

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <title>Untitled Document</title>
          </head>

          <body style="margin: 0px; height: 100%;">

          <p>sdfsd</p><p>f</p><p>sdf</p><p>sdf</p><p>sd</p><p>fs</p><p>df</p><p>sd</p><p>f</p>

          <div onclick="HideImage();" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #CCCCCC;">
              <table style="width: 100%; height: 100%; text-align: center; vertical-align: middle;">
                  <tr><td><img src="http://www.google.de/intl/de_de/images/logo.gif" alt=""/></td></tr>
              </table>
          </div>

          <p>sdfsd</p><p>f</p><p>sdf</p><p>sdf</p><p>sd</p><p>fs</p><p>df</p><p>sd</p><p>f</p>
          <p>sd</p><p>fd</p><p>sf</p><p>sd</p><p>f</p><p>sd</p><p>fd</p><p>sf</p><p>sd</p><p>f</p>
          <p>sdf</p><p>ds</p><p>f</p><p>dsf</p><p>sd</p><p>f</p><p>dsf</p>

          </body>
          </html>

          1. ... genau das wollte ich eben zu _dir_ sagen. ;)

            Kein problem ;)
            Ich poste mal die ganze Seite zum Testen:

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Untitled Document</title>
            </head>

            <body style="margin: 0px; height: 100%;">

            <p>sdfsd</p><p>f</p><p>sdf</p><p>sdf</p><p>sd</p><p>fs</p><p>df</p><p>sd</p><p>f</p>

            <div onclick="HideImage();" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #CCCCCC;">
                <table style="width: 100%; height: 100%; text-align: center; vertical-align: middle;">
                    <tr><td><img src="http://www.google.de/intl/de_de/images/logo.gif" alt=""/></td></tr>
                </table>
            </div>

            <p>sdfsd</p><p>f</p><p>sdf</p><p>sdf</p><p>sd</p><p>fs</p><p>df</p><p>sd</p><p>f</p>
            <p>sd</p><p>fd</p><p>sf</p><p>sd</p><p>f</p><p>sd</p><p>fd</p><p>sf</p><p>sd</p><p>f</p>
            <p>sdf</p><p>ds</p><p>f</p><p>dsf</p><p>sd</p><p>f</p><p>dsf</p>

            </body>
            </html>

            Firefox macht genau das, was du ihm sagst.

            er schreibt zunächst die Zeilen mit den Buchstaben
            dann positioniert er ein 100% großes DIV _über_ die Buchstabenzeilen, sodaß diese verdeckt werden.
            Nach dem grauen 100% hohen DIV kommen wieder Buchstabenzeilen, die aber nicht unterhalb des grauen DIVs beginnen, sondern an die ersten Buchstabenzeilen anschließen, also ebenfalls teilweise von dem grauen DIV verdeckt werden.
            Von was soll das graue DIV denn ausgedehnt werden, wenn nur dieses kleine Bild in ihm ist.

            Baue mal meine vorgeschlagenen Änderungen ein, und schließe die Buchstabenzeilen ebenfalls in das graue Div ein.

            gaby

            1. Hallo,
              ich habe wie gesagt deine Ideen bereits probiert.

              Und mir ist klar, dass dieses div den gesamten Inhalt überdeckt.
              Der Sinn dahinter ist, dass per javascript dieses div erstellt wird und das Bild dargestellt wird. Wenn man darauf klickt, verschwindet es wieder. Und der Hintergrund des divs wird später ein halbtransparentes PNG sein, sodass der Inhalt dahinter (halb-)sichtbar ist.

              Ich möchte also, dass dieses div den gesamten Inhalt der Seite bedeckt!
              Bisher bedeckt es aber nur den im Browser sichtbaren Bereich; wenn man scrollt, sieht man den unteren Teil des Textes..

              1. Der Sinn dahinter ist, dass per javascript dieses div erstellt wird und das Bild dargestellt wird. Wenn man darauf klickt, verschwindet es wieder. Und der Hintergrund des divs wird später ein halbtransparentes PNG sein, sodass der Inhalt dahinter (halb-)sichtbar ist.

                Ich möchte also, dass dieses div den gesamten Inhalt der Seite bedeckt!
                Bisher bedeckt es aber nur den im Browser sichtbaren Bereich; wenn man scrollt, sieht man den unteren Teil des Textes..

                Das, was du vorhast, funktioniert so nicht.
                Schon allein aus dem Grund nicht, weil das DIV absolut positioniert, und somit aus dem Textfluß genommen ist, d.h. es hat absolut keinen Bezug zu den Größen außenstehender Elemente, und erkennt somit natürlich auch nicht, wie hoch deine Buchstabenzeilen das BODY-Element ausgedehnt haben.

                Grüße
                gaby

                1. Gibt es irgendeine andere Möglichkeit, die gesamte Seite mit irgendeinen Element zu bedecken, welches dann das Hintergrundbild bekommt?

                  1. Gibt es irgendeine andere Möglichkeit, die gesamte Seite mit irgendeinen Element zu bedecken, welches dann das Hintergrundbild bekommt?

                    Also ich habe es jetzt so gemacht: Im IE < 7 verwende ich ein Popup-Window und für die restlichen Browser deinen Tipp mit position:relative, gaby.

                    Der funktioniert nämlich super! Das Problem war, dass ich ihn nur im IE 6 getestet habe.. Schande über mich :(

                    Danke!

                    1. Hi,

                      Gibt es eigentlich keine Benachrichtigungsmails mehr?

                      Das ist schade, denn so verliert man einen Thread ganz schnell aus dem Kopf, und merkt nicht, daß da in der Zwischenzeit noch Antworten vom OP oder anderen Usern kamen.

                      Oder, wenn man noch etwas zu einen 2 Tage alten Thread posten will, weiß man nie, ob jemand da überhaupt noch hineinguckt.

                      Könnt ihr das nicht wieder so einrichten, wie früher?
                      Ich erinnere mich, daß es da auch Benachrichtigungen für *eigene* Postings gab, was zwar überflüssig, aber nicht so schlimm war.  ;-)

                      Grüße
                      gaby

                      1. wenn man hier so mitliest, kommt einem der gedanke, es könnter ein taubstummer einem blinden das malen beibringen ;)

                        "ummöglich" "bei mir funktioniert das nicht" usw

                        es gibt zig beispiele im netz wo genau das alles einwandfrei funktioniert

                        zb der die mirror-auswahl bei sourceforge oder diverse bildergaleriescripte wie etwa die genannte lightbox

                      2. Hallo.

                        Oder, wenn man noch etwas zu einen 2 Tage alten Thread posten will, weiß man nie, ob jemand da überhaupt noch hineinguckt.

                        Dessen kannst du dir sicher sein.
                        MfG, at

                        1. Hallo at!

                          Dessen kannst du dir sicher sein.

                          Vor allem »Mister Unterer Drittel« aka at widmet sich gerne längst verschlafen geglaubten Threads ;)

                          Freut mich, dass Du wieder da bist, übrigens...

                          Viele Grüße aus Frankfurt/Main,
                          Patrick

                          --

                          _ - jenseits vom delirium - _
                          [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
                          Nichts ist unmöglich? Doch!
                          Heute schon gegökt?
                          1. Hallo.

                            Vor allem »Mister Unterer Drittel« aka at widmet sich gerne längst verschlafen geglaubten Threads ;)

                            Du hättest mich aber nicht gefunden, wenn du nicht selbst ab und zu in den Keller gingest. Und nein, nicht um den Müll herunter zu tragen.

                            Freut mich, dass Du wieder da bist, übrigens...

                            Danke, mich auch, und zwar die Rückkehr, der Empfang und euch wiederzusehen. Ich überlege aber noch, ob es wirklich Heimweh war oder ob es bloß tatsächlich den Täter immer wieder an den Tatort zurück zieht.
                            MfG, at

                        2. Hallo.

                          Oder, wenn man noch etwas zu einen 2 Tage alten Thread posten will, weiß man nie, ob jemand da überhaupt noch hineinguckt.

                          Dessen kannst du dir sicher sein.

                          Hi,

                          Deine Formulierung läßt bei mir aber nun beide Varianten offen. ;-)

                          Ich denke, daß es die Regulars schon mitbekommen, wenn jemand noch auf ein halb verwestes Posting antwortet, aber der OP eben nicht, weil man ja die Liste der letzten Beiträge nur dann sieht, wenn man sich registriert hat.
                          Außerdem ist es doch für sehr fraglich,  ob jemand, der den/seinen Thread abgeschlossen glaubt,  nach Tagen nochmal hier reinguckt und das letzte Posting sucht.

                          Warum hat man denn die Benachrichtigungsmails abgeschafft?
                          Die gabs doch mal.

                          Grüße
                          gaby

                          1. Hallo.

                            Ich denke, daß es die Regulars schon mitbekommen, wenn jemand noch auf ein halb verwestes Posting antwortet, aber der OP eben nicht, weil man ja die Liste der letzten Beiträge nur dann sieht, wenn man sich registriert hat.

                            Ich wusste gar nicht, dass es die überhaupt gibt. Bei mir besteht die Hauptseite des Forums allerdings auch nur aus dem großen Nachrichtenbaum; die Beitragsseiten aus dem Beitragstext, dem Nachrichtenbaum sowie dem Antwortfeld und zwei Schaltflächen. Das ist dann so übersichtlich, dass ich auf Hilfen zur besseren Übersicht ganz gut verzichten kann.

                            Außerdem ist es doch für sehr fraglich,  ob jemand, der den/seinen Thread abgeschlossen glaubt,  nach Tagen nochmal hier reinguckt und das letzte Posting sucht.

                            Dann sollte sich ja auch sein Problem erledigt haben.

                            Warum hat man denn die Benachrichtigungsmails abgeschafft?
                            Die gabs doch mal.

                            Ehrlich gesagt kenne ich auch die nicht, es sind aber wohl interne Gründe.
                            MfG, at

                            1. Hi,

                              Außerdem ist es doch für sehr fraglich,  ob jemand, der den/seinen Thread abgeschlossen glaubt,  nach Tagen nochmal hier reinguckt und das letzte Posting sucht.

                              Dann sollte sich ja auch sein Problem erledigt haben.

                              Es könnte aber sein, daß er nach einer Woche, wenn der Thread von Seite-1 verschwunden ist, nochmal eine Anschlußfrage hat, oder daß einem anderen  Helfer noch die ultimative Antwort einfällt, er sie aber nicht postet, da er davon ausgeht, daß der OP nun nach 1 Woche eh nicht mehr in seinen Thread hineinschaut.

                              Warum hat man denn die Benachrichtigungsmails abgeschafft?
                              Die gabs doch mal.

                              Ehrlich gesagt kenne ich auch die nicht, es sind aber wohl interne

                              "won't fix"
                              Das hört sich ja gar nicht gut an, und bedeutet, daß auch wohl nicht mehr dran gearbeitet wird.
                              :-((

                              Schade, sehr schade.

                              Grüße
                              Gaby

                              1. Hallo.

                                Es könnte aber sein, daß er nach einer Woche, wenn der Thread von Seite-1 verschwunden ist, nochmal eine Anschlußfrage hat, oder daß einem anderen  Helfer noch die ultimative Antwort einfällt, er sie aber nicht postet, da er davon ausgeht, daß der OP nun nach 1 Woche eh nicht mehr in seinen Thread hineinschaut.

                                Auf archivierte Beiträge, vulgo: auf Seite > 1, kann hier gar nicht geantwortet werden, womit sich eine Benachrichtigung erübrigt. Auch das mag man bedauern, ist hier aber Teil der Philosophie.
                                MfG, at

                              2. Moin!

                                Außerdem ist es doch für sehr fraglich,  ob jemand, der den/seinen Thread abgeschlossen glaubt,  nach Tagen nochmal hier reinguckt und das letzte Posting sucht.

                                Dann sollte sich ja auch sein Problem erledigt haben.

                                Es könnte aber sein, daß er nach einer Woche, wenn der Thread von Seite-1 verschwunden ist, nochmal eine Anschlußfrage hat, oder daß einem anderen  Helfer noch die ultimative Antwort einfällt, er sie aber nicht postet, da er davon ausgeht, daß der OP nun nach 1 Woche eh nicht mehr in seinen Thread hineinschaut.

                                Da hilft dir eine Mailbenachrichtigung ja auch nicht, da du nicht wissen kannst, ob der OP sie benutzt, oder nicht. Es ist doch lediglich ein Feature, das dir die eigene Nutzung des Forums erleichtern sollte, indem es dich auf neue Nachrichten aufmerksam machte.

                                Warum hat man denn die Benachrichtigungsmails abgeschafft?
                                Die gabs doch mal.

                                Ehrlich gesagt kenne ich auch die nicht, es sind aber wohl interne

                                "won't fix"
                                Das hört sich ja gar nicht gut an, und bedeutet, daß auch wohl nicht mehr dran gearbeitet wird.
                                :-((

                                Schade, sehr schade.

                                Nein, gut begründet.

                                Unerwünschte Mails will niemand empfangen. Die Mailbenachrichtigungsfunktion hat aber einfach Benachrichtigungen rausgemailt, ohne vom Besitzer der Mailadresse dazu vorher eine Erlaubnis abzufragen. Das hatte zur Folge, dass man als Unruhestifter einfach eine Mailadresse eines einem nicht genehmen Zeitgenossen in ein kontroverses Flame-Posting packen konnte und diesem unschuldigen Opfer damit eine Menge unerwünschter Mails beschert.

                                Die Konsequenzen für das Projekt, wenn absichtlich die Mailadresse eines Abmahnanwalts verwendet würde, sollte die Dramatik der Situation noch weiter verdeutlichen.

                                Wir haben, insbesondere weil dieses Feature nur sehr rudimentär und ohne jegliche Administrationsoberfläche implementiert war, die Konsequenz gezogen und es ersatzlos deaktiviert.

                                Du hast, insbesondere ohne den Medienbruch "HTTP vs. SMTP/POP3", über die diversen funktionierenden Forumsfeatures wie "gelesene Nachrichten serverseitig markieren" bzw. die RSS-Feeds jedes einzelnen Threads genug Möglichkeiten, an Threads "dranzubleiben". Da solche Funktionalität nur von Powerusern nachgefragt wird, können wir erwarten, dass man sich da im Bedarfsfall mit passender Software versorgt (zur Info: Sowohl Opera als auch Thunderbird sind brauchbare RSS-Clients, alternativ gibts eben die benutzerdefinierte Ansicht).

                                - Sven Rautenberg

                                --
                                "Love your nation - respect the others."
              2. Hallo ripmav

                Der Sinn dahinter ist, dass per javascript dieses div erstellt wird und das Bild dargestellt wird.

                Wenn das Div durch Javascript erzeugt wird, dann kannst du dieses Javascript vorher auch die notwendige Größe ermitteln lassen.

                Wenn man darauf klickt, verschwindet es wieder. Und der Hintergrund des divs wird später ein halbtransparentes PNG sein, sodass der Inhalt dahinter (halb-)sichtbar ist.

                Meinst du sowas wie Lightbox, ThickBox oder js_popup?

                Auf Wiederlesen
                Detlef

                --
                - Wissen ist gut
                - Können ist besser
                - aber das Beste und Interessanteste ist der Weg dahin!
      2. Hi,

        D.h. du verwendest position:fixed statt position:absolute

        Das wäre natürlich toll, aber ich muss ja das div über alle anderen tags legen. Soweit ich weiss ist das nur mit position:absolute möglich..

        Dann passe dein Wissen an - es ist unvollstaendig.

        MfG ChrisB

        --
        "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
  2. Hallo,
    ich möchte ein div-Element über die gesamte HTML Seite legen.
    Ich hatte folgenden Ansatz:

    <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: black;"></div>

    (Damit es funktioniert muss außerdem <body style="margin: 0px; height: 100%;"> sein)

    Das Problem ist: wenn man weiterscrollt, ist der untere Teil der HTML Seite nicht von diesem div überlagert.

    Wie kann ich also ein div-Element komplett über die ganze HTML Seite legen?

    probiere mal

    min-height: 100% und min-width: 100%
    im DIV-Element   und

    height: 100% und width: 100%  für HTML und BODY.

    Grüße
    gaby

    1. Hallo,
      ich habe es genau so gemacht und in FF, IE, Safari + Opera getestet. Leider hat es in keinem Browser funktioniert. Die Ausgabe ist genau so gewesen, wie ich sie vorher auch schon hatte :(

  3. Hi,

    Wie kann ich also ein div-Element komplett über die ganze HTML Seite legen?

    In dem man es bspw. absolute in Bezug auf den Body positioniert, und zwar nicht nur "von oben" (top), sondern auch "von unten" (bottom) aus - und die erforderliche Hoehe damit automatisch ermitteln laesst. (Funktioniert nicht in IE < 7.)

    (Dann sollte man dem Body vielleicht auch eine Mindesthoehe von 100% geben, falls dessen Inhalt mal kuerzer als Viewporthoehe ausfaellt.)

    MfG ChrisB

    --
    "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."