Verhältnisse

[Dieter Raber]

Hallo alle,

Ich habe zu folgendem  Onlinebeispiel eine Frage.
Die Höhe von #innen bezieht sich offensichtlich auf #aussen. Das margin-top von #innen hingegen bezieht sich offensichtlich auf das ganze Dokument und nicht auf #innen. Ich habe die padding-Variante probiert, das Ergebnis ist aber gleich. Wie kann ich #innen sagen, bleib bitteschön 25% der Höhe von #aussen vom oberen Rand von #aussen weg?

Gruß,

Dieter

[Gernot Back]

Hallo Dieter,

Wie kann ich #innen sagen, bleib bitteschön 25% der Höhe von #aussen vom oberen Rand von #aussen weg?

Scheint ja ein wirklich kniffliges Problem zu sein. Warum das Folgende funktioniert und warum man insbesondere dem äußeren Element position:relative verpassen muss ohne es dann überhaupt zu verschieben, damit das innere sich dann absolut-positioniert am äußeren orientiert, kann ich dir auch nicht sagen:

  
#aussen {  
  position:relative;  
  width:700px;  
  height:400px;  
  border:1px blue solid;  
}  
  
#innen {  
  position:absolute;  
  top:25%;  
  width:100%;  
  height:50%;  
  background-color: #EFEFEF;  
}  

Gruß Gernot

[Gernot Back]

Hallo nochmal,

... warum man insbesondere dem äußeren Element position:relative verpassen muss ohne es dann überhaupt zu verschieben, damit das innere sich dann absolut-positioniert am äußeren orientiert, kann ich dir auch nicht sagen:

Doch kann ich jetzt auch, Punkt 4.:

http://www.w3.org/TR/CSS21/visudet.html#containing-block-details

Gruß Gernot

[Axel Richter]

Hallo,

... warum man insbesondere dem äußeren Element position:relative verpassen muss ohne es dann überhaupt zu verschieben, damit das innere sich dann absolut-positioniert am äußeren orientiert, kann ich dir auch nicht sagen:
Doch kann ich jetzt auch, Punkt 4.:
http://www.w3.org/TR/CSS21/visudet.html#containing-block-details

Jepp.

MudGuards Hinweis auf die Regelung zur Berechnung relativer Top- und Bottom-Margins, sollte man sich aber auch irgendwo hinschreiben, bzw. hinverlinken, sonst stolpert man da immer wieder drüber.

Prozentangaben bei margin-top bzw. margin-bottom beziehen sich auf die _Breite_, _nicht_ etwa auf die Höhe, des umgebenden Elements, soweit das nicht das Browserfenster (root) ist. Toll, was Fachleuten[1] so alles einfällt.

viele Grüße ;-))

Axel

[1] Da staunt der Laie...

[Gernot Back]

Hallo Axel,

MudGuards Hinweis auf die Regelung zur Berechnung relativer Top- und Bottom-Margins, sollte man sich aber auch irgendwo hinschreiben, bzw. hinverlinken, sonst stolpert man da immer wieder drüber.

(...) Toll, was Fachleuten[1] so alles einfällt.

Ich versuche immer, mir MudGuards Hinweise hinter die Löffel zu schreiben und habe so schon viel von ihm gelernt. Mich fordert seine kryptische Art ja heraus. Ich habe allerdings die Befürchtung, dass ich ihm mit meiner Vorsagerei das Spiel verderbe und er das gar nicht goutiert.

[1] Da staunt der Laie...

... nun stell dein Licht mal nicht unter den Scheffel!

Gruß Gernot

[MudGuard]

Hi,

Ich habe zu folgendem  Onlinebeispiel eine Frage.
Die Höhe von #innen bezieht sich offensichtlich auf #aussen.
Das margin-top von #innen hingegen bezieht sich offensichtlich auf das ganze Dokument und nicht auf #innen.

Prozentuale margins beziehen sich auf die _Breite_ des enthaltenden Blocks (das ist NICHT zwangsweise das Elternelement). Auch die oberen und unteren margins:

<percentage>
    The percentage is calculated with respect to the width of the generated box's containing block. This is true for 'margin-top' and 'margin-bottom', except in the page context, where percentages refer to page box height.

Ich habe die padding-Variante probiert, das Ergebnis ist aber gleich.

Hier gilt sinngemäß dasselbe:

<percentage>
    The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'.

Wie kann ich #innen sagen, bleib bitteschön 25% der Höhe von #aussen vom oberen Rand von #aussen weg?

Bei der Eigenschaft top bezieht sich ein Prozentwert auf die Höhe des enthaltenden Blocks:

Percentages:   refer to height of containing block

==> mach das #aussen zum containing block, positioniere darin das #innen.

cu,
Andreas

[Dieter Raber]

Hallo Andreas,

==> mach das #aussen zum containing block, positioniere darin das #innen.

Wenn ich dich recht verstehe, kommt das auf dasselbe raus, was Gernot gepostet hat?

Gruß,

Dieter

[MudGuard]

Hi,

==> mach das #aussen zum containing block, positioniere darin das #innen.
Wenn ich dich recht verstehe, kommt das auf dasselbe raus, was Gernot gepostet hat?

Ja. (Sein Posting existierte noch nicht, als ich mit meiner Antwort begann)

cu,
Andreas

[Dieter Raber]

Hallo Gernot, Axel und Andreas,

Danke fuer Eure Antworten.

Gruß,

Dieter