Text neben Bild - Text unten

[Katja]

Hallo

Ich möchte folgendes umsetzen:

Ein Bild, daneben (meist) mehrzeilige Text der unten mit dem Bild abschließt.
So in etwa:

___________
|         |
| Bild    |
|         | Text
|         | Text
|_________| Text

Die Größe des Bildes ist variabel, auch die Textmenge (eine Zeile oder mehrere...) - kommt alles aus einer Datenbank. Und das Ganze kommt mehrmals auf einer Seite vor.
Bekannt ist nur die maximale Gesamtbreite Bild + Text (ein umschließendes p oder div).

Hat wer einen Tip wie das mit CSS umsetzbar wäre?
Und zwar so das es der Microsoft Internet Explorer auch schafft...

Danke

Katja

[wahsaga]

hi,

___________
|         |
| Bild    |
|         | Text
|         | Text
|_________| Text

Das dürfte sich realisieren lassen, in dem du um beide einen Container (Div) packst, der position:relative bekommt.
Der Textabsatz wird dann absolute am bottom positioniert, und sollte eine feste Breite bekommen, damit er nicht unter das Bild laufen kann.

Die Größe des Bildes ist variabel, auch die Textmenge (eine Zeile oder mehrere...) - kommt alles aus einer Datenbank. Und das Ganze kommt mehrmals auf einer Seite vor.

Probleme wirst du bekommen, wenn der Text höher wird, als das Bild - dann wird er oben aus dem Container herauslaufen.

gruß,
wahsaga

[Kalle_Birkenau]

hi,

Probleme wirst du bekommen, wenn der Text höher wird, als das Bild - dann wird er oben aus dem Container herauslaufen.

Deswegen knalle ich in einem solchen Fall the <table> wieder rein mit <td valign=bottom>. Eine wunderbare Einrichtung.

Auch mein Fahrrad habe ich noch, obwohl es seit hundert Jahren Autos gibt.

Kalle

[Katja]

Hi wahsaga

Der Textabsatz wird dann absolute am bottom positioniert, und sollte eine feste Breite bekommen, damit er nicht unter das Bild laufen kann.

»»

Meinst Du das (Kurzfassung mit Inline-Styles):

<div style="position:relative; width:400px">
<img src="bild.jpg">
<p style="position:absolute; bottom:0;">
Text<br>Text
</p>
</div>

Würde funktionieren wenn die Breite des Bildes und somit der Wert für "left:xx" bekannt wäre. Auch die Feste Breite des Text-Absatzes ist daher nicht möglich...

Die Größe des Bildes ist variabel, auch die Textmenge (eine Zeile oder mehrere...) - kommt alles aus einer Datenbank. Und das Ganze kommt mehrmals auf einer Seite vor.

Probleme wirst du bekommen, wenn der Text höher wird, als das Bild - dann wird er oben aus dem Container herauslaufen.

Mehr als vier Zeilen werden es nicht werden, und das ist meist weniger als das Bild hoch ist (sind mindestens 250px).

Also viele Unbekannte...

Katja

[wahsaga]

hi,

Würde funktionieren wenn die Breite des Bildes und somit der Wert für "left:xx" bekannt wäre.

Du sagtest doch selbst:

Die Größe des Bildes ist variabel, auch die Textmenge (eine Zeile oder mehrere...) - kommt alles aus einer Datenbank.

Also wäre die serverseitige Ermittlung der Bildmaße wohl denkbar.
Ansonsten kommst du, wie Kalle schon sagte, hier mit einer Tabelle ggf. doch leichter zum Ziel.

gruß,
wahsaga

[Katja]

Hi wahsaga

Also wäre die serverseitige Ermittlung der Bildmaße wohl denkbar.

So werde ich es auch machen müssen, denk ich...
Dachte nur an eine einfachere Lösung mit float oder so...

Ansonsten kommst du, wie Kalle schon sagte, hier mit einer Tabelle ggf. doch leichter zum Ziel.

Es sind ja nicht wirklich tabellarische Daten...
Und diese Bild/Text-Gruppe taucht mehrmals auf der Seite auf, mal mit nur einem Bild und Text, dann wieder mit mehreren. Und da jedesmal eine neue table zu öffnen ist noch umständlicher, von Semantik gar nicht zu sprechen... ;-)

Danke jedenfalls

Katja

[mewX]

Genau, float ist doch viel einfacher...
<div style="float:left">
Bild
</div>
<div style="float:right; vertical-align:bottom">
Text dazu
</div>
<div style="clear:both"></div>

und dann immer so weiter...

[Katja]

Genau, float ist doch viel einfacher...
<div style="float:left">
Bild
</div>
<div style="float:right; vertical-align:bottom">
Text dazu
</div>
<div style="clear:both"></div>

und dann immer so weiter...

Wenn es so funktionieren würde hätte ich es sicher so gemacht!
Und da die von Dir vorgeschlagene Lösung aber NICHT funktioniert werde ich mir eine andere Lösungsmöglichkeit suchen...

Trozdem Danke

Katja

[wahsaga]

hi,

Dachte nur an eine einfachere Lösung mit float oder so...

Nein, die gibt es nicht - http://www.w3.org/TR/CSS21/visuren.html#float-position:
"8. A floating box must be placed as high as possible."
Ein gefloatetes Element befindet sich also immer "oben". Das läuft deinem Wunsch, etwas "unten" zu positionieren, natürlich zuwider.

Und so lange die Browser die display-Typen für tabellenartige Darstellung (in diesem Falle table-cell) nicht vernünftig umsetzen (dann könntest du vertical-align anwenden) - wirst du bei einer der umständlicheren (mein Vorschlag) oder einer der strukturell unschöneren (HTML-Tabelle) Möglichkeiten bleiben müssen.

gruß,
wahsaga

[Katja]

Hi wahsaga

Ich werde serverseitig - wie von Dir vorgeschlagen - die Abmessungen des Bildes auslesen lassen. Die Werte werden dann per Inline-style - leider - angegeben.
Apropos: Ich habe auch festgestellt das der Microsoft Internet Explorer auch die Höhe des umschließenden Elementes braucht um etwas "bottom:0" zu positionieren... :-(
Firefox scheint das nicht zu brauchen...

Danke jedenfalls für Deine Hilfe

Katja