Flo: Text zentrieren + mitscrollen im Fenster

Hallo,

wie kann ich denn gleich nach <body> z.B. einen Text mit <div....> Text </div> immer mittig im Fenster zentrieren und auch noch mitscrollen lassen????

Habe es so versucht mit <div style="position: absolute; left: 50%; top: 50%;">

Nur leider steht er nicht genau in der Mitte und wird auch überhaupt nicht mitgescrollt!

Was muss ich bloß machen???

Vielen Dank!

  1. Hallo Flo

    wie kann ich denn gleich nach <body> z.B. einen Text mit <div....> Text </div> immer mittig im Fenster zentrieren und auch noch mitscrollen lassen????

    Wie meinst du das?
    Normalen Fließtext, der eine horizontal zentrierte Spalte bildet und mit der
    Seite mitscrollt: Ausrichtung von Block-Level-Elementen

    Habe es so versucht mit <div style="position: absolute; left: 50%; top: 50%;">

    Damit bringst du die linke obere Ecke in die Mitte des Browserfensters, wenn
    html und body auf 100% Höhe gesetzt sind.
    Auch vertikale Zentrierung findest du in der Forums-Hilfe.
    (Wie kann ich Inhalte genau in der Mitte des Anzeigefensters positionieren?)
    Weitere Beispiele dazu:
    Zentrieren mit nur einem Element
    (bitte auch die weiter verlinkten Seiten beachten)
    CSS vertical centering using float and clear

    Nur leider steht er nicht genau in der Mitte und wird auch überhaupt nicht mitgescrollt!

    Doch, mitscrollen dürfte er so.
    Oder meintest du, er soll in der Mitte des Browserfnsters stehen bleiben,
    auch wenn die Seite gescrollt wird?

    Auf Wiederlesen
    Detlef

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

    wie kann ich denn gleich nach <body> z.B. einen Text mit <div....> Text </div> immer mittig im Fenster zentrieren und auch noch mitscrollen lassen????
    Habe es so versucht mit <div style="position: absolute; left: 50%; top: 50%;">

    bedenke dabei, dass der Referenzpunkt dann nicht der Mittelpunkt des div-Elements ist, sondern die linke obere Ecke. Und die rückt damit in die Mitte.
    Beachte außerdem, dass sowohl body als auch html mit height:100% definiert sein müssen, damit sich das dann am Browserfenster orientiert.

    Nur leider steht er nicht genau in der Mitte und wird auch überhaupt nicht mitgescrollt!

    Das mit der Mitte hatte ich ja schon angedeutet: Damit das div-Element tatsächlich exakt in die Mitte kommt, musst du es um die Hälfte seiner Breite nach links und um die Hälfte seiner Höhe nach oben verrutschen.
    Das geht am einfachsten mit negativen Werten für margin-left und margin-top.

    Und nun sag nicht, das wird nicht mitgescrollt! Aber selbstverständlich wird das!

    Schönen Sonntag noch,
     Martin

    --
    Ich liebe Politiker auf Wahlplakaten.
    Sie sind tragbar, geräuschlos, und leicht wieder zu entfernen.
      (Loriot, deutscher Satiriker)
    1. Hallo,

      <div id="bw" style="background: #ffff00; border: dotted 1px #ff0000; position: absolute; top: 20px; left: 20px; width:500px; height: 40px;">
      <p style="font-weight: bold; font-size: 14px;">Bitte warten... Newsletter schicken befindet sich in Bearbeitung! Bitte klicken Sie keinen anderen Link an und schließen Sie nicht den Browser!</p>
      </div>

      Mir reicht wenn der Text in der linken oberen Ecke steht! Aber leider steht er wirklich immer nur ganz links oben und wenn ich scrolle wird der Text nicht mitgescrollt! Ich schwör!!!

      Liebe Grüße

      Flo