Steve: 2 DIVs übereinander zentrieren geht nicht

SELF-Forum

2 DIVs übereinander zentrieren geht nicht

Steve
– Informationen zu den Bewertungsregeln

Hi!

Ich hänge vor einem krassen Problem: ich habe zwei DIVs - die eine stellt ein Bild im Hintergrund (z-index:2) dar, die andere einen Text im Vordergrund (z-index:5).

Beide DIVs sollen aber am oberen Rand des Frames sitzen (müssen nicht pixelgenau oben sitzen) und dabei ZENTRIERT sein.

Ich hab' schon echt viel versucht, aber keine Lösung hat mit beiden großen Browsern funktioniert.

Irgendwie glaube ich aber, das das gehen muß:

meine DIVs:

<div class="back">
   ein Bild bzw. je nach Unterseite mehrere dunkel gehaltene Bilder
</div>

<div class="front">
   Textinhalt
</div>

die zugehörigen CSS-Definitionen sind wohl das Problem(?):

...
DIV.back {position:relative;z-index:2;align:center;vertical-alignment:center;}
DIV.front {position:relative;z-index:5;align:center;vertical-alignment:center;}
...

Wenn ich an den Einstellungen drehe (mal mit top-Angabe mal ohne) erscheint es NIE
in beiden Browsern richtig. Genügsamer scheint mir hier Netscape zu sein, da ich es
hier schonmal geschafft habe. Aber der IE zeigt die DIVs entweder stier untereinander
oder die Textebene HINTER der Grafikebene an.

Ich bin z.Zt. ziemlich ratlos.
Wer kann helfen???

Danke,
Steve

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. 2 DIVs übereinander zentrieren geht nicht

    Christian Kruse
    – Informationen zu den Bewertungsregeln

    Hi,

    Ich hänge vor einem krassen Problem:

    *g* konkret krass, alta

    Beide DIVs sollen aber am oberen Rand des Frames sitzen (müssen
    nicht pixelgenau oben sitzen) und dabei ZENTRIERT sein.

    [...]

    ...
    DIV.back {position:relative;z-index:2;align:center;vertical-alignment:center;}
    DIV.front {position:relative;z-index:5;align:center;vertical-alignment:center;}

    zunächst mal, der NN interpretiert (interprätiert?) divs nur dann
    als Layer, wenn sie position:absolute haben. Also:

    div.back
    {
    position:absolute;
    z-index:2;
    }

    div.front
    {
    position:absolute;
    z-index:5;
    }

    Dann kommt noch dazu, daß der NN die center-Positionierung so
    nicht annimmt - frag mal Roman, der hatte das Problem gestern,
    hab aber vergessen, was er noch gleich geändert hat.

    Aber: ich kann dir eine JS-Lösung anbieten. Du mußt einfach
    die Mittel-Position ausrechnen:

    <head>
    <script language="JavaScript">
    var bild_x = 0;
    var bild_y = 0;

    var lay1_x = 0;
    var lay1_y = 0;

    var lay2_x = 0;
    var lay2_y = 0;

    function init()
      {
      if(window.innerWidth && window.innerHeight)
       {
       bild_x = window.innerWidth;
       bild_y = window.innerHeight;

    lay1_x = document.layers['fr'].clip.width;
       lay1_y = document.layers['bg'].clip.height;

    lay2_x = document.layers['bg'].clip.width;
       lay2_y = document.layers['fr'].clip.height;

    } else {
       bild_x = document.all['bd'].offsetWidth;
       bild_y = document.all['bd'].offsetHeight;

    lay1_x = document.all['fr'].offsetWidth;
       lay1_y = document.layers['bg'].offsetHeight;

    lay2_x = document.layers['bg'].offsetWidth;
       lay2_y = document.layers['fr'].offsetHeight;
       }

    var mitte_x = new Array();
      var mitte_y = new Array();

    mitte_x['bg'] = (bild_x - lay1_x) / 2;
      mitte_y['bg'] = (bild_y - lay1_y) / 2;

    mitte_x['fr'] = (bild_x - lay2_x) / 2;
      mitte_y['fr'] = (bild_y - lay2_y) / 2;

    if(document.layers)
       {
       document.layers['bg'].top = mitte_y.bg;
       document.layers['fr'].top = mitte_y.fr;

    document.layers['bg'].left = mitte_x.bg;
       document.layers['fr'].left = mitte_x.fr;

    } else {
       document.all['bg'].style.top = mitte_y.bg;
       document.all['fr'].style.top = mitte_y.fr;

    document.all['bg'].style.left = mitte_x.bg;
       document.all['fr'].style.left = mitte_x.fr;
       }
      }
    </script>
    </head>

    <body id="bd" name="bd" onload="init();">

    <div id="bg" name="bg" class="back">
      <!-- der Inhalt -->
    </div>

    <div id="fr" name="fr" class="front">
      <!-- der Inhalt -->
    </div>

    </body>

    mfg
    CK1

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. 2 DIVs übereinander zentrieren geht nicht

      Steve
      – Informationen zu den Bewertungsregeln

      Ich hänge vor einem krassen Problem:

      *g* konkret krass, alta

      HiHi - ist mir gar nicht aufgefallen... *g* Voll Krass!!! ;-)

      Vielen Dank für den Gedankenanstoß - eigentlich hätte ich da selbst drauf kommen müssen.
      Aber ich glaube, mein Gedanke war, eine möglichst einfache (im Sinne von trickfreie) Lösung
      zu finden. Aber das mit Javascript: ein sehr guter Gedanke.

      Das paradoxe daran: vor einiger Zeit hatte ich sowas selbst schonmal gemacht, aber irgendwie
      dachte ich wohl gestern, daß das nicht sein kann (ich dachte eigentlich, es ließe sich auch
      per CSS eine Lösung finden).

      Ich werde aber jetzt wieder auf die Javascript-Idee zurückkommen.
      Scheint mir immer noch sinnvoll zu sein

      Danke nochmal und Gruß,
      Steve ;-)))

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln