Positionierung

[Thomas]

Hallo!
Erstmal der Quelltext:

----------------------------------------------------------------------------

<div style='height:400px; width:400px; position:absolute; background-color:red;'>

<div style='height:100px; width:100px; float:left;' id='A1'><img style='height:100px; width:100px;'
id='bildA1'></div>

<div style='height:100px; width:100px; float:left;' id='B1'><img style='height:100px; width:100px;'
id='bildB1'></div>

<div style='height:100px; width:100px; float:left;' id='C1'><img style='height:100px; width:100px;'
id='bildC1'></div>

<div style='height:100px; width:100px; float:left;' id='D1'><img style='height:100px; width:100px;'
id='bildD1'></div>

[..]

<div>hoch</div>

<div>runter</div>

<div>links</div>

<div>rechts</div>

</div>

----------------------------------------------------------------------------

Das Problem bei der Sache ist folgende: Ich habe einen Haupdiv (Hintergrundfarbe rot), in diesem sind alle anderen Divs drin. Was ist jetzt versuche ist folgendes: Der Link für "hoch" soll oben in der Mitte auf den grünen Feldern angeordnet sein. Das heißt ich müsste es so positionieren können, dass der Abstand vom roten div aus immer derselbe ist. Mit einer absoluten Positionierung gelingt mir dies aber nur mit dem Abstand von der Homepageecke.

Ich habe jetzt den Tipp bekommen, dass mit position:relative und margin zu machen, also habe ich es jetzt so versucht und zwar für das "hoch":

----------------------------------------------------------------------------
<div style='position:relative; margin-top:0px; margin-left:180px; width:40px; background-color:yellow;'>hoch</div>
----------------------------------------------------------------------------

dies könnt ihr unter http://vfb-stuttgart.piranho.de betrachten. Aber leider funktioniert es so nicht, die Position wird immer noch vom ursprünglichen Platz aus positioniert und nicht vom oberen Element aus.

Gibt es da eine Lösung?

Thomas

[ChrisB]

Hi,

Das heißt ich müsste es so positionieren können, dass der Abstand vom roten div aus immer derselbe ist. Mit einer absoluten Positionierung gelingt mir dies aber nur mit dem Abstand von der Homepageecke.

Dann lies in SELFHTML noch mal nach, worauf absolute Positionierung Bezug nimmt.

Ich habe jetzt den Tipp bekommen, dass mit position:relative und margin zu machen [...] Aber leider funktioniert es so nicht, die Position wird immer noch vom ursprünglichen Platz aus positioniert

Natuerlich, so ist relative Positionierung ja auch definiert: Ein Element wird von dem Platz aus, den es ohne Positionierung einnehmen wuerde, verschoben, und der urspruengliche Platzbedarf bleibt reserviert.

MfG ChrisB

[Thomas]

Hi,

Das heißt ich müsste es so positionieren können, dass der Abstand vom roten div aus immer derselbe ist. Mit einer absoluten Positionierung gelingt mir dies aber nur mit dem Abstand von der Homepageecke.

Dann lies in SELFHTML noch mal nach, worauf absolute Positionierung Bezug nimmt.

Hab jetzt nochmal nachgeschaut und festgestellt, dass absolute von übergeordneten Element aus gemessen wird, wenn dieses nicht static ist - ich nehme an darauf beziehst du dich.

Dann habe ich den Quelltext so geändert:

<div style='position:absolute; top:100px; left:100px; height:400px; width:400px; background-color:red;'>
[...]
<div style='position:absolute; top:0px; left:180px; width:40px; background-color:yellow;'>hoch</div>
[...]
</div>

Jetzt ist das äußere nicht mehr static, sondern absolute (relative ändert auch nichts am Problem) und der innere sollte sich jetzt jetzt doch "gemessen am Rand des nächsthöheren Vorfahrenelements" orientieren. Stattdessen ist der Div "hoch" komplett verschwunden - wieder zu betrachten unter http://vfb-stuttgart.piranho.de/

[ChrisB]

Hi,

<div style='position:absolute; top:100px; left:100px; height:400px; width:400px; background-color:red;'>
[...]
<div style='position:absolute; top:0px; left:180px; width:40px; background-color:yellow;'>hoch</div>
[...]
</div>

Jetzt ist das äußere nicht mehr static, sondern absolute (relative ändert auch nichts am Problem) und der innere sollte sich jetzt jetzt doch "gemessen am Rand des nächsthöheren Vorfahrenelements" orientieren. Stattdessen ist der Div "hoch" komplett verschwunden

Wieso soll der "verschwunden" sein?

Ich sehe ihn im Firefox genau dort, wo du ihn positioniert hast - 180px von Links und 0px von oben, ausgerichtet am Viewport.

MfG ChrisB

[Thomas]

Wieso soll der "verschwunden" sein?

Ich sehe ihn im Firefox genau dort, wo du ihn positioniert hast - 180px von Links und 0px von oben, ausgerichtet am Viewport.

MfG ChrisB

Ähm...
im Firefox ist er da, aber im Internet Explorer fehlt er merkwürdigerweise - wie schaffe ich es, dass er auch im IE zu sehen ist.

Thomas

[EKKi]

Mahlzeit Thomas,

im Firefox ist er da, aber im Internet Explorer fehlt er merkwürdigerweise - wie schaffe ich es, dass er auch im IE zu sehen ist.

Hat vielleicht nur mittelbar damit zu tun - aber es könnte nicht schaden, wenn Du Deinen HTML-Code validierst: This page is not Valid (no Doctype found)!

Wenn das Grundgerüst (HTML) fehlerfrei ist, passt die bunte Plane (CSS) viel besser drüber ...

MfG,
EKKi

[Thomas]

Perfekt, am fehlenden doctype lag es, jetzt funktioniert es!
Danke!