[ERLEDIGT] Element unter Bild positionieren

[CSSteff]

Hallo,
ich habe ein div mit zwei Absätzen unter einem Bild positioniert. Das funktioniert auch ganz gut. Wenn ich jedoch das Browser-Fenster so weit verkleinere, so dass das Bild nicht mehr reinpasst, rutscht das div in das Bild hinein.
Wie kann ich immer gewährleisten, dass das div unter dem Bild ist?

Das ist mein Code:

<div style="position: absolute; bottom: 0; left: 0; text-align:center; width:100%;">
    <p>...</p>
</div>

Hier die Seite:
http://www.lektorat-im-team.de/

L. G.
CSSteff

 

[Tronjer]

Das Style-Tag löschen.

 

[CSSteff]

Dann befinden sich die Absätze links oben.

L. G.,
CSSteff

 

[threadi]

Du musst dem div, welches das ImageMap und alles darüber umgibt, eine feste Höhe, vermutlich in Höhe des Bildes, geben. Bei meinem Test half eine Höhe von 836px. Dann musst Du noch beim o.g. div die absolute Positionierung und alle dazugehörigen Style-Eigenschaften entfernen.

 

[CSSteff]

@threadi : Danke, für deine Antwort. Das div, das die Map und die Bilder umgibt, ist folgendes:

<div style="width:100%; position: relative;">
...
</div>

Es hat keine absolute Positionierung wie du sagtest, weshalb ich mich frage, ob es wirklich das ist, was du meinst. Die Höhenangabe und das Löschen der style-Elemente hat dort leider nicht geholfen, ebenso beim div mit den Absätzen nicht.

<div style="height: 840px;">
...
</div>

L. G.,
CSSteff

 

[djheke]

Völlig korrekt, was threadi schrieb.

 

[Tronjer]

Threadi hatte es bereits erklärt. Das position: absolute auf dem Bild löst es aus dem Textfluss. Was zur Folge hat, dass das Parent-Div des Bildes height: 0 hat. Wenn du vom zweiten Div den Style-Container löschst, steht es nicht 'links oben' sondern direkt unter dem ersten. Das lässt sich im Firebug verifizieren.

 

[CSSteff]

Ah, jetzt verstehe ich das, danke! :-)
Leider sind die Absätze nun nicht mehr ganz unten am Bildschirm, so wie ich das haben wollte, aber es ist immer noch besser als der Bug davor. Das lässt sich nicht zufällig irgendwie realisieren?

Liebe Grüße,
CSSteff

 

[Tronjer]

Das ließe sich mit der Sticky-Footer-Methode realisieren.

 

[CSSteff]

Ich werde mal beizeiten danach googlen, danke!