Ausrichtung

[Akela]

Hallo,

Ich habe folgenden HTML-Code

<a ...><img ...> blabla </a>

Die Punkte enthalten natürlich sinnvolle Argumente ;-)

Solange blabla in eine Zeile passt, wird das Bild vor dem blabla angezeigt und das ist auch richtig. Wenn der Text jedoch länger wird und die Zeile umbricht, dann geht der Text unter der Grafik weiter. Ich möchte aber, daß der Text aller weiteren Zeilen in der gleichen vertikalen Flucht wie die erste Zeile fortführt. Also ähnlich einem <li>-Tag, nur kann ich aus verschiedenen Gründen keine Listen verwenden.

Das Konstrukt befindet sich in einer Anwendung, in der ich nur wenig rumspielen kann, daher kann ich keine radikalen Änderungen machen. Das IMG-Tag muß auch so bestehen bleiben, da das Image eine ID hat und während der Laufzeit durch JS beeinflußt wird. Somit ist ein Hintergrundbild nicht möglich.

Ich würde mich über Vorschläge freuen :-)

ciao Andreas

[Ingo Turski]

Hi,

Also ähnlich einem <li>-Tag, nur kann ich aus verschiedenen Gründen keine Listen verwenden.

Schade, damit wäre das am einfachsten.
Setze den Text in ein inline-Element und nutze float für das Bild und display:block und margin für den Text.

freundliche Grüße
Ingo

[Gunnar Bittersmann]

Hello out there!

Setze den Text in ein inline-Element und nutze float für das Bild und display:block und margin für den Text.

Äh, pfui! Warum nachträglich das Markup ändern, um gewünschte Darstellung-FX zu erreichen?

See ya up the road,
Gunnar

[Ingo Turski]

Hi,

Äh, pfui! Warum nachträglich das Markup ändern, um gewünschte Darstellung-FX zu erreichen?

weil ich absolute Positionierung nur dann verwenden will, wenn es wirklich nicht anders geht.
Außerdem: vielleicht gibt es ja sogar ein sinnvolles Element zur Auszeichnung des Textes?

freundliche Grüße
Ingo

[Gunnar Bittersmann]

Hello out there!

Äh, pfui! Warum nachträglich das Markup ändern, um gewünschte Darstellung-FX zu erreichen?
weil ich absolute Positionierung nur dann verwenden will, wenn es wirklich nicht anders geht.

Ich will nachträglich aus Darstellungsgründen hinzugefügtes Markup nur dann verwenden, wenn es wirklich nicht anders geht.

Geht hier aber anders. Warum sollte man die Möglichkeiten von CSS nicht ausschöpfen anstatt am HTML rumzupfuschen? Was soll an absoluter Positionierung böse[tm] sein?

Außerdem: vielleicht gibt es ja sogar ein sinnvolles Element zur Auszeichnung des Textes?

Im Quelltext im OP war keins zu finden.

See ya up the road,
Gunnar

[Ingo Turski]

Hi,

Geht hier aber anders. Warum sollte man die Möglichkeiten von CSS nicht ausschöpfen anstatt am HTML rumzupfuschen? Was soll an absoluter Positionierung böse[tm] sein?

Es ist grundsätzlich nicht ohne Risiko, ein Element aus dem Fluß zu nehmen. Es sollte in diesem Fall sichergestellt sein, dass das Bild selbst bei Schriftverkleinerung nicht mit dem nachfolgenden Inhalt kollidieren kann.

freundliche Grüße
Ingo

[Gunnar Bittersmann]

Hello out there!

Es sollte in diesem Fall sichergestellt sein, dass das Bild selbst bei Schriftverkleinerung nicht mit dem nachfolgenden Inhalt kollidieren kann.

Da hast du recht. Also noch 'min-height' ('height' für IE) für die Box, die den Text enthält, wenn nötig auch noch 'display: block'.

See ya up the road,
Gunnar

[Akela]

Hallo Ingo,

Danke, das wars :-)

Mit dem inline-Element hatte ich auch schon rumgespielt, hatte aber beim Text keine block eingestellt.

ciao Andreas

[Gunnar Bittersmann]

Hello out there!

Hallo,

Ich habe folgenden HTML-Code

<a ...><img ...> blabla </a>

Die Punkte enthalten natürlich sinnvolle Argumente ;-)

Ähm, sinnvolle _Attribute_ meinst du.

Du kannst das Bild durch absolute Positionierung aus der Box des 'a'-Elements und aus dem Fluss nehmen und links wie gewünscht positionieren. (Für die Vertikale gibts du nichts an, dann bleibt es in der Höhe des Textes.)

Dem 'a'-Element gibst du genügend linken Rand, so dass es neben dem Bild erscheint.

Also ähnlich einem <li>-Tag, nur kann ich aus verschiedenen Gründen keine Listen verwenden.

Diese würden mich allerdings interssieren.

See ya up the road,
Gunnar