Nils P.: Problem: zentrierte, überlappende Elemente

Beitrag lesen

Hi Tim,

http://www.tepasse.org/selfraum/rot-gruene-leiter.html

Ist aber in den meisten Browsern noch ungetestet.

Ertsmal 1K Dank - Das ist schonmal ne ziemlich großer Schritt für mich. Ich poste mal den entscheidenden Teil deines codes:

<style type="text/css">
  html {
  background-color:white;
  color:black;
  }
  body {
  display;block;
  background-color:red;
  color:black;
  width:300px;
  height:auto;
  margin:0em auto;
  padding:10px 0px;
  }
  .gruen {
  background-color:green;
  color:black;
  height:100px;
  width:350px;
  margin:25px -25em 25px -25px;
  padding:0px;
  }
</style></head>

<body>
<div class="gruen">blub</div>
<div class="gruen">blub</div>
<div class="gruen">blub</div>
</body>

Fragen/Bemerkungen meinerseits:

Du hast einen "Kunstgriff" verwendet, indem du das rote als body genommen hast - aber geht das auch, wenn es ein eigenes div ist, u.U. wenn die ganze Konstuktion in weitere divs verschachtelt ist? Mir ist es jedenfalls nicht gelungen... Jedenfalls hast du die ganze z-index/position relative/absolute-Problematik elegant umgangen.

Noch ein Kunstgriff: die grünen Sprossen sind nicht per margin zentriert, sondern dadurch, dass die Breite der Blöcke bekannt ist - clever! Ich fürchte, eine von absoluten Breiten unabhängige Lösung wird kaum möglich sein - oder?

Warum schreibst du bei den grünen -25em als Abstand nach rechts?

In meinem Moz klappt's gut, der IE scheint brav in compliant mode zu schalten und stellt es auch richtig dar. Der IE 5 hingegen macht das gesamte Fenster rot und klebt die drei Sprossen nach links. Frisst wohl die Breitenangaben zu body grundsätzlich nicht?

Ich würde gerne deine Lösung einsetzen, aber jetzt steck ich in dem Dilemma - wenn's im IE5 nicht geht, kann ich es praktisch nicht machen.

Thx nochmal,
Nils