Baddel: Div horizontal & vertikal zentrieren

Beitrag lesen

Hallo,

ich versuche gerade ein DIV ("Bitte warten" Anzeige) mittig im Browserfenster auszurichten. Das ist soweit kein Problem.

wie hast du es denn gemacht?

Das habe ich so gemacht:

<div id="loading" style="display:none;position:absolute;top:50%;left:50%;width:0;height:0;">
<div style="position:relative;top:-2.5em;left:-10em;width:20em;height:5em;border:3px solid #D63333;background:#EEEEEE;z-index:10;">Bitte warten... ihre Suchanfrage wird bearbeitet.
</div>
</div>

Der DIV-Container ist beim Seitenaufbau unsichtbar und wird wenn man auf einen Link klickt sichtbar gemacht (soweit auch alles kein Problem).

und wie hast du das gemacht?

[...] onClick="document.getElementById('loading').style.display='inline';"

und wenn der User JS deaktiviert hat?

Ist denke ich nicht so schlimm, da es nichts an der Funktionalität der Website ändern. Konkret: Da die Datenbankabfragen so lange dauern will ich an bestimmten Stellen nur einen Hinweis einblenden dass sich was tut. Wenn der User JS deaktiviert hat bekommt er diesen zusäztlichen Hinweis halt nicht zu sehen.

Mein Tipp: Benutze CSS und die Suche hier im Forum oder bei Google & Co.
Stichwort(e): "horizontal vertikal zentrieren"

Das ist ein häufig vorkommendes Thema, sodass es nicht schwer sein sollte, etwas passendes zu finden.

Ja, dazu findet man wirklich viel. Ich habe mir auch schon einen Ast abgegoogelt ;-)

Die Ausrichtung an sich funktioniert ja auch (siehe Code-Snippet oben). Mein Problem ist - und an der Stelle komme ich immer nicht weiter - dass sobald ich nach unten scrolle es nicht mehr mittig ausgerichtet ist. Es müsste im Prinzip "position:fixed" sein (was mit Firefox ja auch problemlos geht, aber im IE wiederum nicht).

Da das DIV aber ja nicht die ganze Zeit sichtbar "fixed" sein muss, sondern nur in dem Moment in dem man auf den Link klickt - dachte ich könnte man es vielleicht via Javascript neu ausrichten und mittig zentrieren (das würde reichen!)......?

p.s.: der "IE7-CSS-Fixed-Position-Hack" für den IE (http://dean.edwards.name/IE7/) hat irgendwie nicht funktioniert damit position:fixed im IE funktioniert...