Bild anordnen

[Achot]

Guten Morgen,

könnt ihr mir vielleicht bei folgendem Problem helfen: http://codepen.io/anon/pen/BpNYqL

Ich habe ein Text mit drei Absätzen. Nach dem ersten Absatz sollte das Bild auf die rechte Seite geschoben werden und die zwei weiteren Absätze links davon.

Im responsiven Design ab

@media screen and (max-width: 55.000em) { }

sollte das Bild zwischen Absatz zwei und drei rutschen. Wie könnte ich dieses umsetzen ohne wenn möglich den HTML Code anzupassen, da dieser von WordPress vorgegeben wird, was ich natürlich durch ein weiteres Template umschreiben könnte, sollte es nötig sein.

[MrMurphy1]

Hallo

In dem Beispiel hast du nur zwei Absätze. br-Elemente bewirken Zeilenumbrüche, keine neuen Absätze.

Ohne Anpassungen im Quelltext sind deine Vorstellungen nur mit HTML und CSS nicht zu verwirklichen.

Gruss

MrMurphy

[Achot]

Hallo MrMurphy,

In dem Beispiel hast du nur zwei Absätze. br-Elemente bewirken Zeilenumbrüche, keine neuen Absätze.

Ohne Anpassungen im Quelltext sind deine Vorstellungen nur mit HTML und CSS nicht zu verwirklichen.

wie müsste ich das HTML anpassen um mein Vorhaben zu verwirklichen?

[Gunnar Bittersmann]

@@Achot

wie müsste ich das HTML anpassen um mein Vorhaben zu verwirklichen?

Das hängt davon ab, was dein Vorhaben ist. Im Falle des Umfließens des Bildes wäre es dienlich, wenn es im Markup zwischen dem ersten und dem zweiten Absatz stünde.

LLAP 🖖

[Achot]

Hallo,

Das hängt davon ab, was dein Vorhaben ist. Im Falle des Umfließens des Bildes wäre es dienlich, wenn es im Markup zwischen dem ersten und dem zweiten Absatz stünde.

ich habe mein HTML etwas angepasst: http://codepen.io/anon/pen/BpNYqL

[Gunnar Bittersmann]

@@Achot

http://codepen.io/anon/pen/BpNYqL

Ich habe ein Text mit drei Absätzen.

Nein, du zwei Absätze. Den zweiten mit hartcodierten Zeilenumbrüchen.

br hat (außer bei Gedichten/Liedtexten, Postadressen u.ä.) nichts in HTML zu suchen. Ersetze <br>\n<br> durch </p>\n<p>.

Nach dem ersten Absatz sollte das Bild auf die rechte Seite geschoben werden und die zwei weiteren Absätze links davon.

Was heißt „links davon“? Sollen sie das Bild umfließen? Oder soll unter dem Bild frei bleiben?

@media screen and (max-width: 55.000em) { }

Genauer geht’s nicht? Weg mit .000. Auch bei

.servus {
	max-width: 75.000em;
	margin: 2em auto 0 auto;
}

Eine Zeilenlänge sollte bei Fließtext etwa 35 bis 75 Zeichen enthalten (optimal so bei 60–65). Das macht so in etwa 18em bis 36em. 75em sind viel zu viel.

BTW, das letzte auto bräuchtest du nicht; margin: 2em auto 0 wäre dasselbe.

ohne wenn möglich den HTML Code anzupassen, da dieser von WordPress vorgegeben wird, was ich natürlich durch ein weiteres Template umschreiben könnte, sollte es nötig sein.

Ist nötig, siehe oben.

LLAP 🖖

[Achot]

Hallo,

Nein, du zwei Absätze. Den zweiten mit hartcodierten Zeilenumbrüchen. br hat (außer bei Gedichten/Liedtexten, Postadressen u.ä.) nichts in HTML zu suchen. Ersetze <br>\n<br> durch </p>\n<p>.

ist sehr schwer einem Blogschreiber zu erklären er soll in die Option "Text" gehen und seine <br> durch <p> zu ersetzten. Wenn es anderes nicht geht muss er darauf eben achten.

Was heißt „links davon“? Sollen sie das Bild umfließen? Oder soll unter dem Bild frei bleiben?

Unter dem Bild soll frei bleiben.

[Gunnar Bittersmann]

@@Achot

Was heißt „links davon“? Sollen sie das Bild umfließen? Oder soll unter dem Bild frei bleiben?

Unter dem Bild soll frei bleiben.

OK, also nicht einfach float.

Es wäre ein leichtes, wenn die Absätze, die neben dem Bild stehen sollen, in einem Containerelement (div) gewrappt wären. Müssen sie aber nicht sein, es geht auch ohne – bei feststehender Bildbreite:

Das Bild^{[1] [2]} steht im Markup direkt nach dem (letzten) Absatz, der über die volle Breite gehen soll. Die auf das Bild folgenden Absätze (figure ~ p) bekommen rechten Abstand (Bildbreite + etwas Zwischenraum) verpasst. Das Bild wird absolut positioniert und rechts ausgerichtet. Das Ganze aber nur per media query für breiten Viewport.

Bei schmalem Viewport wird das Bild per Flexbox/order hinter dem gewünschten Absatz plaziert.

☞ Codepen ^[3]

LLAP 🖖

---

1. Ob figure hier angebracht ist, lässt sich ohne den Inhalt zu kennen nicht sagen. Vielleicht ist es auch nur ein blankes img-Element; Styles dann für dieses angeben. ↩︎

2. Zu width: min-content siehe diesen Thread. ↩︎

3. BTW, zum lobotomized owl selector siehe Heydons ALA-Artikel ↩︎

[Achot]

Hallo,

Es wäre ein leichtes, wenn die Absätze, die neben dem Bild stehen sollen, in einem Containerelement (div) gewrappt wären. Müssen sie aber nicht sein, es geht auch ohne – bei feststehender Bildbreite:

das wäre jetzt noch möglich. Ich habe gelesen man kann in Wordpress Templates für einzelne Seiten anlegen: https://developer.wordpress.org/themes/template-files-section/page-templates/ allerdings predigst du doch immer, man soll so wenig wie möglich unnötigen HTML Code verwenden? Wäre es in diesem Fall also besser ein DIV zu nehmen?

Das Bild^[1] steht im Markup direkt nach dem (letzten) Absatz, der über die volle Breite gehen soll. Die auf das Bild folgenden Absätze (figure ~ p) bekommen rechten Abstand (Bildbreite + etwas Zwischenraum) verpasst. Das Bild wird absolut positioniert und rechts ausgerichtet. Das Ganze aber nur per media query für breiten Viewport.

Vielen Dank für dein Beispiel und deine Hilfe. Genau so habe ich es mir vorgestellt.

Da bin ich mir noch nicht so sicher. Wenn das Bild eine Beschreibung bekommen soll, wäre ein figure angebracht? Wenn nur das Bild, dann lieber ein reines <img>?

---

1. Ob figure hier angebracht ist, lässt sich ohne den Inhalt zu kennen nicht sagen. Vielleicht ist es auch nur ein blankes img-Element; Styles dann für dieses angeben. ↩︎

[Gunnar Bittersmann]

@@Achot

allerdings predigst du doch immer, man soll so wenig wie möglich unnötigen HTML Code verwenden? Wäre es in diesem Fall also besser ein DIV zu nehmen?

Nein, wozu? Es geht doch ohne.

Da bin ich mir noch nicht so sicher. Wenn das Bild eine Beschreibung bekommen soll, wäre ein figure angebracht? Wenn nur das Bild, dann lieber ein reines <img>?

Entscheidender als ob das Bild eine Unterschrift hat ist, denke ich, der Bezug zum Haupttext.

Ich hab im Codepen noch eine Bildunterschrift hinzugefügt.

Und ich weiß nicht, ob du sie schon gesehen hast; ich hab bei vorigen Posting noch eine Fußnote hinzugefügt.

LLAP 🖖