Support » Allgemeine Fragen » PulQuote nicht neben Text

  • Hallo alle zusammen

    bin gerade seit einigen Stunden am Informationen über den TextBlock PullQuote am Suchen. Aber irgendwie schaffe ich das nicht wirklich.

    Mein Ziel ist, dass der Text links vom PullQuote Block mit der roten Schrift zu stehen kommt.

    Nachdem ich am CSS herum geschraubthabe, ist der Block nach unten gerutscht. Dies obwohl der Block unmittelbar nach dem Titel geschrieben ist.

    Was mache ich falsch?

    Vielen Dank für Informationen welche den Block neben den Text hoch ziehen…
    Gruss Markus

    <!-- wp:heading -->
    <h2>Remote Arbeit im HomeOffice</h2>
    <!-- /wp:heading -->
    
    <!-- wp:pullquote {"align":"right","className":"is-style-solid-color"} -->
    <figure class="wp-block-pullquote alignright is-style-solid-color"><blockquote><p>Access DB Entwickler, VBA Programmierer</p><cite>Siehe <a href="https://markus-winter.ch/ms-office/ms-access/vba-access-programmierung/">VBA Access Programmierung</a></cite></blockquote></figure>
    <!-- /wp:pullquote -->
    
    <!-- wp:paragraph -->
    <p>Immer mehr Menschen dürfen, oder wollen, oder müssen, im HomeOffice arbeiten. Für die Einen ist das ein Segen, für Andere ist das ein Fluch. Hier beleuchte ich die verschiedenen Aspekte der Arbeit im HomeOffice und was möglicherweise zu beachten ist, jeweils aus den verschiedenen Blickwinkeln des <a href="https://markus-winter.ch/homeoffice/mitarbeiter/">Arbeitnehmers</a> und des <a href="https://markus-winter.ch/homeoffice/arbeitgeber/">Arbeitgebers</a>.</p>
    <!-- /wp:paragraph -->

    Die CSS Datei:

    /* PullQuote */
    /* --------- */
    /* Anpassung des Blockqoute Elementes für Pullquotes */ 
     .wp-block-pullquote blockquote {
          color: #111;
          border: solid; /*ok*/
          border-radius: 10px 10px 10px 10px; /*ok*/
          border-width: 1px;
          margin-top: calc(4 * 1rem);
          margin-bottom: calc(4.33 * 1rem);
          margin-left: 0;
     }
     /* Absätze im Rahmen des Pullquotes */ 
     .wp-block-pullquote p {
          font-size: 13px;		/* warum ist das nicht die Schriftgrösse ??? */
          font-style: normal;
          line-height: 1; /*ok, reagiert*/
          font-family: "Garamond", "Times New Roman", serif; /* Hier lassen sich natürlich auch andere Schriftarten auflisten */
          margin-bottom: 0.5em;
          margin-top: 0.5em;
     }
     /* Quellenangabe des Pullquotes */  
     .wp-block-pullquote cite {
          display: inline-block;
          font-family: "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;  /* Ebenso hier Platz für andere Schriftarten */ 
          line-height: 1.6;
          text-transform: none;
          font-style:normal;
          font-size: 13px; /*ok Untere Zeile, reagiert.*/
      }
     /* Style Default */
     /* Style Default alignfull und alignwide */
     .wp-block-pullquote.alignwide.is-style-default, 
     .wp-block-pullquote.alignfull.is-style-default {
         border-top: 2px solid #632e9b;  /* Farbwert anpassen! */ 
         border-bottom: 2px solid #632e9b;  /* Farbwert anpassen! */ 
         margin-top: calc(4 * 1rem);
         margin-bottom: calc(4.33 * 1rem);
         padding: 0 1em;
     }
     /* Farbfüllende Pullquotes */  
     /* Farbfüllend: Pullquotes alignfull und alignwide */  
     .wp-block-pullquote.alignfull.is-style-solid-color, 
     .wp-block-pullquote.alignwide.is-style-solid-color {
          background-color:#632e9b; /* Farbwert anpassen! */
          padding-top: calc(2 * 1rem); 
          padding-bottom: calc(2 * 1rem); 
          margin-top: calc(4 * 1rem);
          margin-bottom: calc(4.33 * 1rem);
          }
     /* Farbfüllend: Blockquote-Element des Pullquotes 
    alignfull und alignwide */   
     .wp-block-pullquote.alignfull.is-style-solid-color blockquote, 
     .wp-block-pullquote.alignwide.is-style-solid-color blockquote {
          max-width: 100%;
          margin-left: 1rem;  
          margin-right: 1rem;      
     }
     /* Farbfüllend: Absätze im Rahmen des Pullquotes */ 
     .wp-block-pullquote.is-style-solid-color p {
         color:red /* ok Farbwert ggf. anpassen */
     }
     /* Farbfüllend: Quelle des Pullquotes alignfull und alignwide */ 
     .wp-block-pullquote.alignfull.is-style-solid-color cite, 
     .wp-block-pullquote.alignwide.is-style-solid-color cite 
     {color:#fff;  /* Farbwert ggf. anpassen */ 
    }
     /* Media Queries für die Pullquotes */
     /* Tablets quer und Desktop */
     @media screen and (min-width: 769px) {
     .wp-block-pullquote.alignfull.is-style-solid-color blockquote { 
          max-width: 760px;  /* Breite ggf. anpassen */ 
          margin-left:auto;
          margin-right:auto;
     }
     .wp-block-pullquote.is-style-solid-color blockquote p {
         font-size: 2.25em;
         margin-bottom: 1em;
     }
     }
     /* Mobiles bis zu Tablet hoch */
     @media screen and (max-width: 768px) {
     .wp-block-pullquote.is-style-solid-color blockquote p {
         font-size: 32px;
     }
     .wp-block-pullquote p {
         font-size: 32px;
         margin-bottom:1em;}
     }

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)
  • Warum verwendest du nicht ein zweispaltiges Layout?
    Das dürfte dann auch bei mobilden Endgeräten lesbarer werden.

    Das Tag <h2> hat eine CSS-Eigenschaft clear: both;, kann also nicht vom Pullquote umflossen werden. Dadurch ergeben sich die Textlücken.

    Nochmal eine freundliche Erinnerung: Wenn du Fragen zu CSS hast, solltest du die auch in einem Forum stellen, in dem solche Fragen behandelt werden. Hier ist das off topic.

    Thread-Starter Markus Winter

    (@mawiti)

    Hallo Mario,

    vielen Dank für Deine Antwort.
    Bei einem zweispaltigen Layout würde ja der Text nicht zwischen den roten Blöcken bis an den Rand fliessen. Also der Bereich „Die Ist-Situation“ wäre dann auf der rechten Seite leer.

    Der rote Text sollte eigentlich „nur“ maximal so hoch sein, wie der links davon stehende Absatz. Dass beim darauf folgenden Titel der Rote Text nicht umflossen wird kann ich annehmen. Aber der Rote Text sollte auf der gleichen Höhe beginnen wie der Text.
    Also „Immer Mehr Menschen“ sollte auf der gleichen vertikalen Höhe sein Wie „Access DB“

    Was mache ich falsch?

    Also der Bereich „Die Ist-Situation“ wäre dann auf der rechten Seite leer.

    Wieso das? Du kannst doch mit dem Block-Editor mitten im Text einen zweispaltigen Abschnitt einfügen?

    Screenshot Blöcke

    (Die roten Rändern sollen natürlich nur anzeigen, wo die Spalten wären. Der restliche Text ist einspaltig.)

    Zu deiner Frage „Was mache ich falsch?“

    Du hast im HTML

    <figure class="wp-block-pullquote …">
      <blockquote>
        <p>Text Text Text</p>
        <cite>Mehr Text</cite>
      </blockquote>
    </figure>

    Also zwei Block-Elemente ineinander.

    Der Block figure fängt direkt bündig mit dem darauf folgenden Absatz an, hat aber oben 3em Padding zugewiesen (lilafarbener Kasten):

    Screenshot Einstellungen

    Der gelbe Abschnitt ergibt sich aus der negativen Margin des Blockelements <blockquote> – negative Margins sind immer ein wenig problematisch und hier eine missglückte Krücke, um das Layout geradezubiegen.

    Das Element <blockquote> hast du dann noch mit einer Angabe einer maximalen Breite von 60% (.wp-block-pullquote.is-style-solid-color blockquote { max-width: 60%; … }) verkorkst. Das wird bei Mauszeigerkontakt in den Entwickler-Tools schln sichtbar:

    Screenshot Einstellungen

    Durch die Verschachtelung der Blockelemente, die angegebene Margin und Padding hat also der Text gar keine Möglichkeit, diesen Pullquote-Block zu umfließen.

    ¯\_(ツ)_/¯

    Thread-Starter Markus Winter

    (@mawiti)

    Hallo, wow, super vielen Dank für Deine Ausführungen.
    Auf Deinen PrintScreens leuchtet mir das alles ein und ich verstehe was Du mir sagst. Wenn ich das allerdings im zusätzlichen CSS versuche zu korrigieren, dann passiert nichts, egal welche Zahl ich wo ändere.

    Du hast geschrieben, dass Du zweispaltiges Layout empfehlen würdest. Habe ich begonnen Deine Empfehlung umzusetzen weil mir das besser gefällt. Vor allem, weil ich da auch die Schriftgrösse anpassen kann welche viel zu gross ist.

    Nur würde ich den grauen Block nur so hoch haben wollen wie der Text hoch ist. Aber er macht das scheinbar um die ganze Spalte herum…

    Du könntest in der Spalte statt einer Überschrift oder eines Absatz einen Block mit HTML einfügen und dort ein

    <dev class="mitrahmen">
      <p>Text Text Text <br />
    <a href="#">Text mit Link</a></p>
    </dev>

    einfügen:

    Screenshot Einstellungen

    Dann mit eigenen CSS-Regeln gestalten:

    
    .mitrahmen {
    	border: 1px solid red;
    	padding: 15px;
    	display: block;
    	box-shadow: 1px 1px 3px #000;
    }

    sieht dann so aus:

    Screenshot Einstellungen

    Thread-Starter Markus Winter

    (@mawiti)

    Mega super vielen Dank, HTML ist genau das was ich auch schon gesucht habe. Habe das so eingebaut. Danke Dir vielmals. Du hast mir einen äusserst erfolgreichen Jahresstart beschert.

    Freut mich, dass ich helfen konnte.
    Danke für die Rückmeldung. 🌻

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)
  • Das Thema „PulQuote nicht neben Text“ ist für neue Antworten geschlossen.