Christian Kruse: 2 DIVs übereinander zentrieren geht nicht

Beitrag lesen

SELF-Forum

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