Stift: seltsames Verhalten eines Divs mit margin-top: -30%;

Hallo Forumsteilnehmer,

kann mir jemand von Euch dieses für mich seltsame Verhalten des blauen DIV-Containers erklären, wenn man die Breite des Browserfensters (beispielsweise zwischen 200px und 800px) variiert? Je nach Fensterbreite ist die vertikale Position der blauen Box unterschiedlich. Ausprobiert mit FF 3.5.3 und IE 8

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html style="height: 100%;">
<head>
<title>Test</title>
</head>
<body style="height: 100%; margin: 0px;">
<div style="border: 1px solid red; height: 50%;"></div>
<div style="border: 1px solid blue; height: 30%; margin-top: -30%;"></div>
</body>
</html>

Außerdem konnte ich aus der Seite http://de.selfhtml.org/css/eigenschaften/randabstand.htm nicht entnehmen, auf was sich Prozentangaben bei Außenrand und Abstand beziehen.

Danke für die Hife.

  1. @@Stift:

    nuqneH

    Je nach Fensterbreite ist die vertikale Position der blauen Box unterschiedlich.

    Works as designed.

    Außerdem konnte ich aus der Seite http://de.selfhtml.org/css/eigenschaften/randabstand.htm nicht entnehmen, auf was sich Prozentangaben bei Außenrand und Abstand beziehen.

    Der CSS-Spezifikation [CSS2 §8.3] kann man es entnehmen: „Der Prozentsatz wird relativ zur _Breite_ des umschließenden Blocks der erzeugenden Box berechnet.“

    Qapla'

    --
    Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
    1. Danke für die schnelle Antwort. Noch eine Frage: Welchen Sinn hat es, einen prozentualen Abstand, den man nach oben bzw. unten haben will über die Breite zu berechnen. Leuchtet mir nicht so ganz ein.

      Danke.

      1. Hi,

        Noch eine Frage: Welchen Sinn hat es, einen prozentualen Abstand, den man nach oben bzw. unten haben will über die Breite zu berechnen. Leuchtet mir nicht so ganz ein.

        Das ist so, weil es nicht anders geht.

        Ein margin-top wirkt sich darauf aus, wie hoch die Oberkante des Elements platziert wird. Wenn jetzt aber dieses margin von der Höhe des Inhaltes abhängt, dann setzt das voraus, dass diese schon berechnet werden kann. Kann sie aber nicht, weil noch nicht klar ist, wie hoch die Oberkante des Elements platziert wird. Von dieser Platzierung abhängig könnten sich nämlich Faktoren ergeben, die wiederum die Höhe beeinflussen - z.B., ob ein floatendes Element hineinragt, welches den Inhalt teilweise verdrängt, so dass dieser weiter nach unten fliessen muss, was wiederum die Höhe des Elements, dem wir das horizontale Margin in Prozent geben wollten, verändert - womit sich auch die Position der Oberkante dieses Elements wieder ändern würde, ... etc. pp. blah blah.

        Wenn für margin-top eine Angabe in Prozent erlaubt wäre, dann hätten wir also ...
        <blockquote style="voice-family:"Doc Brown"> ein Paradoxon, in dessen Folge eine Kettenreaktion ausgelöst wird, die die Struktur des Raum-Zeit-Kontinuums auflöst und das gesamte Universum vernichtet! Zugegeben, das ist das schlimmste Ereignis. Es wäre möglich, dass sich die Zerstörung in Grenzen hält und sich nur auf unsere Galaxis bezieht." </blockquote>

        MfG ChrisB

        --
        “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
    2. @@Gunnar Bittersmann:

      nuqneH

      Der CSS-Spezifikation [CSS2 §8.3] kann man es entnehmen: „Der Prozentsatz wird relativ zur _Breite_ des umschließenden Blocks der erzeugenden Box berechnet.“

      Was übrigens Unsinn ist. Nicht der Prozent_satz_ wird berechnet (der ist ja gegeben, hier als -30%), sondern der Prozent_wert_.

      Auch im Original [CSS2 §8.3, CSS21 §8.3] ist von “percentage” die Rede. Naja.

      Qapla'

      --
      Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)