Frage zu "schöner" Positionierung

[Encoder]

Hallo
Ich nutze die Tatsache "absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung position:static aufweist.", siehe Beispiel.
Das Bild soll sich am Beginn des Texts ausrichten und sich nicht auf die Positionierung des Texts auswirken.
Es funktioniert, macht aber auf mich den Eindruck als wärs von hinten durch die Brust... Hab ich das kapiert, oder geht das noch schöner?

<p style="position:relative;">
<img ... style="position:absolute; top=... left=..." />
Hier steht Text
</p>

[Beat]

Ich nutze die Tatsache "absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung position:static aufweist.", siehe Beispiel.
Das Bild soll sich am Beginn des Texts ausrichten und sich nicht auf die Positionierung des Texts auswirken.
Es funktioniert, macht aber auf mich den Eindruck als wärs von hinten durch die Brust... Hab ich das kapiert, oder geht das noch schöner?

<p style="position:relative;">
<img ... style="position:absolute; top=... left=..." />
Hier steht Text
</p>

Ohne mehr zu wissen, ist das schlechter Code, bis du das Gegenteil beweist.

Einstweilen propagiere ich
p img{ display:block; position:static; }

mfg Beat

[Encoder]

Den Absatz hab ich relativ positioniert, damit er nicht mehr static ist und sich das position:absolute auf diesen Absatz bezieht. top und left vom Absatz sind 0, damit der trotzdem da bleibt wo er eigentlich auch hingesetzt werden würde.

Ohne mehr zu wissen, ist das schlechter Code, bis du das Gegenteil beweist.

Was genau ist daran nicht gut, mal abgesehen davon dass im Original natürlich kein "..." auftaucht.
Ich kann natürlich schon noch ein paar weitere Versuche machen. Aber bis ich da dann zufällig einen finde zu dem jemand sagt ja, genau so wärs ok...
Wie würdet ihr das denn machen?

[Beat]

Den Absatz hab ich relativ positioniert, damit er nicht mehr static ist und sich das position:absolute auf diesen Absatz bezieht. top und left vom Absatz sind 0, damit der trotzdem da bleibt wo er eigentlich auch hingesetzt werden würde.

Ohne mehr zu wissen, ist das schlechter Code, bis du das Gegenteil beweist.
Was genau ist daran nicht gut, mal abgesehen davon dass im Original natürlich kein "..." auftaucht.

Deine Beschreibung

Ich kann natürlich schon noch ein paar weitere Versuche machen. Aber bis ich da dann zufällig einen finde zu dem jemand sagt ja, genau so wärs ok...
Wie würdet ihr das denn machen?

Was machen? Beschreibe erst mal deine Aufgabe.
Deine Angaben lassen nur den Schluss zu, dass du das Bild über dem Text positionierst. Etwas anderes kann nicht daraus geschlossen werden.

mfg Beat

[Encoder]

Deine Angaben lassen nur den Schluss zu, dass du das Bild über dem Text positionierst. Etwas anderes kann nicht daraus geschlossen werden.

Dann bin ich schon ganz gut um beschreiben, denn genau das trifft es ;-)

Ich beschreibs nochmal genauer.
Es gibt mehrere Absätze mit Text (im <p> </p>). Über dem Beginn dieser Absätze möchte ich jetzt jeweils dieses Bildchen haben, das ist ein kleines Symbol das über den ersten paar Buchstaben stehen soll. Das Bild hat dann zum Beispiel top=-20px und left=-10px, damit es oberhalb des Textbeginns steht.
Ich möchte das nicht außerhalb des <p> definieren, damit das Bild wirklich immer alles das mitmacht, was dem <p> passiert. Das Bild soll also am Ursprung des <p> verankert werden.
Mit meiner Methode funktioniert das auch soweit, ich wollte nur wissen obs vielleicht noch eine elegantere Art gibt, das zu erreichen.

Also praktisch so, wenn ich es ein bisschen mehr ausschmücke.
<p style="position:relative; top=0; left=0;">
<img src="x" alt="x" style="position:absolute; top=-20px; left=-10px;" />
Hier steht Text.<br />und nochmal Text...
</p>

Das mit dem relative des <p> ist mir noch nicht ganz so geheuer. Aber ich denke ich brauch das nunmal dazu, damit das Bild mit absolute auch den Abschnitt als Maßstab nimmt.

[ChrisB]

Hi,

Es gibt mehrere Absätze mit Text (im <p> </p>). Über dem Beginn dieser Absätze möchte ich jetzt jeweils dieses Bildchen haben, das ist ein kleines Symbol das über den ersten paar Buchstaben stehen soll. Das Bild hat dann zum Beispiel top=-20px und left=-10px, damit es oberhalb des Textbeginns steht.

Also soll es nicht den Text selber überlagern (in z-Richtung), sondern nur „oberhalb” von diesem in y-Richtung liegen?

Dazu brauchst du keine absolute Positionierung.
Wie Beat schon sagte, Bild als block darstellen lassen, damit nachfolgender Text erst darunter beginnt.

Die Verschiebung um -20px nach oben dürfte damit komplett entbehrlich werden, und die nach links um -10px sollte sich über negatives margin oder notfalls relative Positionierung machen lassen.

MfG ChrisB

[Encoder]

Naja so halb drüber vielleicht auch mal (bzw eher z-mäßig gesehen darunter), ich bin auf der Suche nach einem möglichst variablen Hingucker für den Textbeginn. Irgendwas unaufdringliches, damit die Seite ein bisschen schöner aussieht. Dazu wollt ich mir das offen lassen, wohin ich das Bildchen genau setze.
Aber jetzt weiß ich was Beat meinte :-)
Danke euch jedenfalls, vielleicht lass ich es erst mal so wie es ist. Tut ja immerhin ...

[ChrisB]

Hi,

Naja so halb drüber vielleicht auch mal (bzw eher z-mäßig gesehen darunter), ich bin auf der Suche nach einem möglichst variablen Hingucker für den Textbeginn.

Reine Verzierung? Dann nutze ein Hintergrundbild für die P-Absätze. Oben Links positioniert, nicht wiederholt.
Halte den Text per padding auf gewünschtem Abstand.

MfG ChrisB

[Beat]

Reine Verzierung? Dann nutze ein Hintergrundbild für die P-Absätze. Oben Links positioniert, nicht wiederholt.
Halte den Text per padding auf gewünschtem Abstand.

Darf die Verzierung auch nur in modernen Browsern verfügbar sein?
p.yourclass:before{ display:block; background:url(wehschnittchen.png); }

mfg Beat