<img> Position

[Mark]

Ich habe eine Tabelle mit mehreren Feldern.
Eins dieser Felder hat seinen Inhalt zentriert.
Etwa so:

<table>
<tr><td width="75%">
Irgendwas
</td><td width="25%">
Sonstwas
</td></tr>
<tr><td align="center" width="75%">
Hier steht<br>
ein Haufen<br>
Zeug
</td><td width="25%">
Nochwas
</td></tr>
</table>

Jetzt möchte ich in die Zelle mit dem Haufen Zeug drin in der oberen rechten Ecke ein Bild einbauen, wobei der andere Inhalt der Zelle zentriert bleiben soll, als ob das Bild nicht existiert.

Ich weiss, mit position:absolut kann ich ein Bild völlig unabhängig von der Tabelle irgendwo auf die Seite legen, aber wie kann ich so ein Bild abhängig von der Position der Zelle ausrichten?

 

[Marv]

Hi,

ein absolut positioniertes Element richtet sich immer am nächsten relativ positionierten Elternelement aus.
Laut meiner Aussage musst du der Zelle position:relative geben und dem Bild position:absolute, damit sich Letzteres an der Zelle ausrichtet.

 

[francesco]

Wir wäre es, wenn du dem Bild ein

float: right;

verpasst? Habe mir mal die Mühe gemacht und dir ein Dabblet erstellt.

 

[Mark]

Vielen Dank für die Antworten.

float:right war auch meine erste Idee, aber das verschiebt den Rest der Zelle nach links, weil der Haufen Zeug nicht mehr in der Zelle zentriert wird, sondern auf dem verbleibenden Platz links vom Bild.

Mit position:absolut muss ich von links aus rechnen, da weiss ich nicht, wie ich die Breite der Zelle und vom Bild berechnen soll, so dass ich es oben rechts positionieren kann.

 

[francesco]

Soll der Text über das Bild laufen?

 

[Mark]

Jein.
Das Bild ist sehr klein und oben rechts ist reichlich Platz, das überlappt sich nicht, höchstens wenn der User das Fenster extrem klein macht.
Im Zweifelsfalle wäre es aber kein Problem, wenn der Text ins Bild läuft, solange der Text über dem Bild liegt, sprich lesbar bleibt.

 

[francesco]

Kannst du uns denn sagen, was das für ein Bild sein soll bzw. was die Funktion davon ist? Evtl. könnte man dann an einer besseren, anderen, effektiveren Lösung arbeiten.

Falls dich bei der float-Variante der Abstand stört, kannst du dem Bild doch einfach ein linkes, negatives margin mit der Breite des Bildes verpassen.

 

[Marv]

Ich muss meinen Kommentar um folgendes ergänzen, dass die Verwendung von position:relative und absolute in der Form nicht bei Tabellen funktioniert.

Kommt eine Umsetzung ohne Tabellen in Frage? Oder was spricht bei dir dagegen?

 

[Mark]

Habe es gerade rausgefunden, Blödsinn von links rechnen, geht auch von rechts.
Und wenn es in der Tabelle nicht geht, mache ich halt einen <p> in die Zelle.

<td align="center" width="75%">
<p align="center" style="position:relative" width="100%">
<img src="bild.jpg" style="position:absolute; right:0px">
Text Text
Text Text
</p>
</td>

Auf jeden Fall nochmal danke für die Hilfe, ihr habt mich auf den richtigen Weg gebracht.