Zur Navigation

Probleme bei Overlayer ....

1 Tilman

Hallo,

ich möchte gerne beim Klick auf einen Link ein Overlayer (Div-Container) einblenden. Dabei soll der eigentliche Inhalt der Webseite abgedunkelt werden. Das ist so gelöst:
CSS:
#overlay_dark{position:fixed;top:0;left:0;
z-index:10005;width:100%;height:100%;
background-color:#000;overflow:hidden;-moz-opacity:.6;opacity:.6;filter:alpha(opacity=60);vertical-align: center; align: center;}
#overlay_content{border: 4px solid #525252; background-color: #fff; ...}

HTML:
<div id="overlay_dark">
<div id="overlay_content">
Inhalt
</div>

Ich habe jetzt 2 Probleme:
1) Wie kann ich den Inhalts-Div (overlay-content) innerhalb von overlay-dark zentrieren (horizontal sowie vertikal)?
2) Durch das Abdunkeln des Webseiteninhalts durch -moz-opacity ... wird auch der Inhalts-Div leicht durchsichtig. Ich möchte aber, dass der Inhalts-Div einfach "nur" weis-undurchsichtig ist.

25.07.2009 20:21

3 Tilman

Super, so habe ich es jetzt gemacht. Klappt einwandfrei.
Allerdings habe ich jetzt ein anderes Problem: Beim Scrollen ist der DIV (overlay-dark) aber nur im ursprünglichen Bereich zu sehen.

Hier die aktuellen CSS-Daten:

body {
         font-family: Arial, Helvetica, sans-serif;
         font-size: 12px;
         margin-top: 8px;
         margin-left: 0px;
         background-color: #EEEEEE;
         height: 100%;
         }
...
#overlay-dark {display: table; position:absolute;top:0;left:0;z-index:10005;width:100%;height:100%;overflow: auto;background-color:#000;-moz-opacity:.8;opacity:.8;filter:alpha(opacity=80); vertical-align: center; text-align: center;}
#overlay-content {height:auto; width: 528px; display: none; position:absolute;top: 50px; left: 50px;background:#fff;z-index:10015;color:#000;border:4px solid #525252;}

27.07.2009 14:58

4 Jörg

Ich würde es mit position:fixed statt mit position:absolute probieren, dann sollte der Layer beim Scrollen stehen bleiben

27.07.2009 22:02

5 Tilman

Ja, habe ich auch schon probiert. Funktioniert auch. Allerdings sollte der overlay-dark-DIV aufgrund der Gestaltung lieber "oben bleiben" und der untere Rest einfach die Hintergrundfarbe schwarz (natürlich noch etwas durchsichtig) sein.

28.07.2009 16:02

6 Jörg

Dann verwende für das eine absolute und für das andere fixed

28.07.2009 20:09

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]