Frage zu p-Tag

[AugustQ]

Hi,

eine Frage zu p-Tag habe ich.

Ich will Texte und Fotos gegenüberstellen. Ein Foto (links, nächstes Foto dann rechts, usw.) mit zugehörigem Text. Dafür verwende ich <p>. Klappt auch soweit.

Am Ende klappt es allerdings nicht. D.h. ich habe das letzte Foto in dieser Reihe, schreibe meinen Text dazu. Dann kommt </p> Beginne ich den nächsten Abschnitt, so beginne ich wieder mit <p> und danach folgt mein Text. Ich will, daß dieser neue Text in einer eigenen neuen Zeile beginnt, er erscheint aber immer zusammen mit dem alten Text und dem Bild.

Was mache ich da falsch?

Schönen Gruß August

PS: so sieht es aus:

Der Text "Ach ja, bitte klicken Sie ...." sollte in einer neuen Zeile unter dem Bild (in voller Breite der Seite) erscheinen.

[Matthias Scharwies]

Servus!

Hi,

eine Frage zu p-Tag habe ich.

Ich will Texte und Fotos gegenüberstellen. Ein Foto (links, nächstes Foto dann rechts, usw.) mit zugehörigem Text. Dafür verwende ich <p>. Klappt auch soweit.

Also ein p mit Text und einem gefloateten Bild?

Am Ende klappt es allerdings nicht. D.h. ich habe das letzte Foto in dieser Reihe, schreibe meinen Text dazu. Dann kommt </p>

Untersuche Deine Seite. Evtl. findest du mit dem Validator einen Grund, warum dein vorletztes p nicht geschlossen wird.

Beginne ich den nächsten Abschnitt, so beginne ich wieder mit <p> und danach folgt mein Text. Ich will, daß dieser neue Text in einer eigenen neuen Zeile beginnt, er erscheint aber immer zusammen mit dem alten Text und dem Bild.

Ist das p im Seiteninspektor sichtbar?

Was mache ich da falsch?

Das könnte man untersuchen, wenn Deine Seite online wäre.

Warum online-Beispiele besser als das Posten von Code sind!

Arbeiten_mit_dem_Seiteninspektor

Schönen Gruß August

PS: so sieht es aus:

Der Text "Ach ja, bitte klicken Sie ...." sollte in einer neuen Zeile unter dem Bild (in voller Breite der Seite) erscheinen.

Herzliche Grüße
Matthias Scharwies

[Ryuno-Ki]

Moin AugustQ,

ist jetzt ein wenig im Nebel gestochert, weil kein Live-Beispiel bzw. Markup und CSS nicht geteilt wurden.

Hast du bereits mit :first-of-type herumgespielt? Ich verstehe dich so, dass du immer nur das erste p-Element nach einem Bild selektieren willst.

Gruß

[Rolf B]

Hallo AugustQ,

da das Bild höher ist als sein zugeordneter Text, ragt es in den folgenden Paragraphen hinein und schiebt dessen fließenden Inhalt ebenfalls beiseite, statt den ganzen Paragraphen nach unten zu schieben.

Das gleiche Problem solltest Du aber auch beim Übergang von einer Bild-Text Gruppe zur nächsten Gruppe haben. Wie hast Du es dort gelöst? Die gleiche Lösung hilft Dir auch für den "Ach ja" Paragraphen, würde ich behaupten.

Oder hast Du bisher nur ein Bild?

Rolf

[Ryuno-Ki]

Moin Rolf,

ich würde hier ein ::after Pseudo-Element nutzen, es ein display:block;content:" ";clear:both; zuweisen und schauen, ob es den gewünschten Effekt hat.

Im Wiki läuft das unter Clearfix.

Gruß

[Rolf B]

Hallo Ryuno-Ki,

ja, ist eine Möglichkeit.

Das Beispiel an sich ist unschön, find ich - hier wäre eher ein figure-Element mit figcaption angebracht. Aber es ging ja weniger um Bildpräsentation als um die clear-Eigenschaft, und nachher kommt figure ja auch noch, darum lass ich das stehen; ich habe im Codebeispiel nur :after in ::after geändert…

Für August wäre es ggf. günstiger, die img Elemente in das p Element hineinzuziehen und dem p Element contain:layout zu geben. Oder, wenn zu einem Bild mehr als ein p gehört, kann man Bild und Text mit einer section, einem article oder auch einem div gruppieren und DEM die contain:layout-Eigenschaft zuweisen.

Der Clearfix mit ::after ist eher eine Notlösung bzw. dann interessant, wenn man das HTML nicht passend gestalten kann (oder will). Ih bin der Meinung, dass bei einer solchen Dokumentstruktur ein gruppierendes Element durchaus legitim ist.

Rolf

[MrMurphy]

Die Frage ist wie sich der Text verhalten soll, wenn er in der Höhe mehr Platz beansprucht als das danebenstehende Bild.

Soll er er dann unter dem Bild weitergehen ist float sinnvoll. Dann musst du aber auch clearen, wie es so schön heißt. Für das Clearen gibt es unterschiedliche Möglichkeiten. Die unterschiedlichen Möglichkeiten laufen umgangssprachlich unter der Bezeichnung clearfix. Welche sinnvoll ist hängt vom Quelltext ab.

Wenn der Text in solchen Fällen hingegen immer seine Breite behalten soll (auch wenn er unter den Platz unter dem Bild nutzen könnte) ist CSS-Grid das Mittel der Wahl.

[Gunnar Bittersmann]

@@MrMurphy

Die Frage ist wie sich der Text verhalten soll, wenn er in der Höhe mehr Platz beansprucht als das danebenstehende Bild.

Und auch, wie er sich verhalten soll, wenn er in der Höhe weniger Platz beansprucht als das Bild.

Das wird mitunter nicht bedacht; aufgemalt wird der happy path. Genau darum ging’s bei meiner diesjährigen Session auf dem UXcamp Europe.

Soll er er dann unter dem Bild weitergehen ist float sinnvoll. […] Wenn der Text in solchen Fällen hingegen immer seine Breite behalten soll (auch wenn er unter den Platz unter dem Bild nutzen könnte) ist CSS-Grid das Mittel der Wahl.

Oder auch beides: Auf schmalen Viewports Float, auf breiten Grid (o.a. Flexbox). ☞ Beispiel

Das Beispiel lässt sich auch leicht abwandeln, sodass die Bilder abwechselnd links und rechts vom Text stehen. ☞ Beispiel 2

---

Dann musst du aber auch clearen, wie es so schön heißt. Für das Clearen gibt es unterschiedliche Möglichkeiten.

Ja. Und alle, die nicht display: flow-root verwenden, sind hoffnungslos veraltet.

Die unterschiedlichen Möglichkeiten laufen umgangssprachlich unter der Bezeichnung clearfix.

Die Bezeichnung clearfix ist ein sicheres Indiz für hoffnungslos veraltet.

Welche sinnvoll ist hängt vom Quelltext ab.

Sinnvoll ist die mit display: flow-root.

🖖 Live long and prosper

[AugustQ]

das angegebene Beispiel2 ist mein Ding, so habe ich mir das vorgestellt. Wobei ich bei jedem Bild nur wenig Text habe. Das sollte aber kein Problem sein.

Allerdings: nach dem letzten Bild kommt weiterer Text, der nicht zu einem Bild gehört. Und das ist der Punkt meiner Frage.

[Rolf B]

Hallo Gunnar,

Und alle, die nicht display: flow-root verwenden, sind hoffnungslos veraltet.

Oder haben einen Grund dafür.

Wenn der Text länger ist, möchte man dem Bild etwas Margin geben, damit es nicht zu sehr am Text klebt. Und natürlich muss man diesen Margin grundsätzlich geben und nicht textabhängig, denn je nach Viewportbreite ist er nötig oder nicht.

Aber: display:flow-root verhindert das Zusammenfließen von Rändern. Heißt:

<p class="fotoparagraph">
<img src="bild1.png" alt="...">
Text Text Text
</p>
<p class="fotoparagraph">
<img src="bild2.png" alt="...">
Text Text Text
</p>

Ohne Clearfix oder Flow-Root-Zuweisung würde Bild 1 in den Paragraphen 2 hineinragen und dort ggf. Text verdrängen. Das kann Absicht sein, es kann aber auch sch...eußlich aussehen. Vor allem kann es zu Problemen führen, Text und Bilder einander richtig zuzuordnen.

Mit

.fotoparagraph {
   display: flow-root;
}

sorgt man dafür, dass der Fotoparagraph das Bild immer vollständig enthält. ABER die flow-root Eigenschaft sperrt auch einen margin ein:

Ich habe p- und img-Elementen eine outline gegeben, um das zu visualisieren: Unter den Bildern ist etwas Platz, das ist der für möglichen Textumfluss vorgesehene Abstand, der mit dem margin-bottom des p Elements nicht zusammengelegt wird. In der Folge ist der Abstand zwischen den Abschnitten zu groß. Und nein, der outline ist nicht schuld, dass die Margins nicht zusammenfallen.

Mit

.fotoparagraph {
   clear:both;
}

passiert das nicht. Das <p> Element ist weniger hoch als das Bild, durch clear:both wird der zweite Paragraph vollständig unter dem Bild positioniert UND der margin-top des Paragraphen fällt mit dem margin-bottom des Bildes zusammen.

Es ist auch wichtig, clear:both auf den ersten Paragraphen hinter den Fotopagraphen anzuwenden und nicht ein Dummy-div dazwischen zu schalten. Dieses dummy-div würde wiederum das Zusammenfallen der Margins verhindern und für zu viel Abstand zwischen den Paragraphen 2 und 3 sorgen.

Dafür fängt man sich mit clear:both die Abhängigkeit ein, dass das erste Element hinter den Fotoparagraphen einen eigenen Clearfix braucht. Meh. Bis zum generellen DTP-Tool hat CSS noch einiges zu lernen 😉^[1]

Rolf

---

1. Ich weiß, ich weiß. Niemand hat die Absicht, CSS für DTP zu verwenden… 🧱 ↩︎

[AugustQ]

Hi all,

sorry, ich war ein wenig beschäftigt.

Ich kümmere mich morgen um die Antworten.

Schönen Gruß August

[AugustQ]

Hi,

ich fange an mit den Antworten .....

So habe ich mir das vorgestellt: ich habe 12 Bilder, wobei es zu jedem Bild einen eigenen Text gibt. Die Bilder will ich alternierend darstellen, also links dann rechts dann links usw. Der zugehörige Text entsprechend auf der anderen Seite zum Bild.

Das klappt auch, mit p-Tag.

Das Problem ist das letzte Bild. Das Bild erscheint rechts, der zugehörige Text erscheint links. Nun gibt es aber einen Text, der nicht direkt zum Bild gehört und als eigener/neuer Absatz erscheinen soll, also unter dem Bild.

Das war meine Frage.

Schönen Gruß August

[Ryuno-Ki]

Moin AugustQ,

falls die Anzahl 12 fix ist, kann dir vielleicht eine strukturelle Pseudoklasse in Kombination mit dem Geschwisterselektor helfen, das entsprechende Elemente (und alle nachfolgenden) zu bestimmen.

Gruß,

[Rolf B]

Hallo Ryuno-Ki,

bei :nth-child(2n of .fotoparagraph) und :nth-child(2n+1 of .fotoparagraph) ist es egal, ob da 2, 12, 17 oder einunddrölfzig Fotoparagraphen sind.

Rolf

[AugustQ]

hmmmm

ein bissel weiter gelesen, aber erst mal zur Seite:

Der Blog liegt auf Google (=blogger), ich vrwende auch den Google-Editor zum Erstellen der Seite. So sieht mein Text aus (vereinfacht):

<p><div class="separator" style="clear: both;"><a href="https:/ .......</a></div> <br/> mein Text </p>

was mir auffällt: Google-Editor markiert den schliessenden p-Tag in rot (dazu gleich mehr).

Und der Editor wandelt es um in folgende Form: <p></p><div class="separator" style="clear: both;"><a href="https:/ .......</a></div> <br/> mein Text <p></p>

Mittlerweile habe ich gelesen, daß sich <p> und <div> nicht vertragen.

Ich lese mal weiter.

[Ryuno-Ki]

Moin AugustQ,

Mittlerweile habe ich gelesen, daß sich <p> und <div> nicht vertragen.

Stimmt so halb. <p> darf in <div> vorkommen, aber nicht andersherum.

Laut Spezifikation ist nur Phrasing content erlaubt, d.h. die dort aufgelisteten Elemente. <div> ist (genau wie <p>) aber ein Flow content-Element.

Gruß,

[AugustQ]

ah, ich denke ich habe da eine Lösung, aber ist die auch brauchbar?

Wie schon geschrieben arbeite ich mit dem Google-Editor. Und ich habe die Bilder via Google-Editor eingefügt. Und Google fügt zum Bild immer ein Element

<div class="separator" style="clear: both;">

ein. Also habe ich das mal weggelassen. Dann passiert überall das, was ich mit dem letzten Bild beschrieben habe, d.h. das nächste Bild ragt dann in das vorige Bild hinein.

Also habe ich zu meinem Text unter dem letzten Bild mal dieses <div> eingefügt. Sieht dann so aus:

<div class="separator" style="clear: both;">Ach ja, bitte klicken Sie .....</div>

und das tut es.

Keine Ahnung, was dieses Objekt macht, aber ich werde damit weiter spielen.

Schönen Gruß August