Reihe in bestehenden Container einfügen

  • Kann ich in einen Container, z.B. 3-spalter mit Bildern, eine zusätzliche Reihe zwischen die Bilder und die Texte legen?

    Zweck: wenn die Bilder nicht gross genug sind, eine leere Reihe erstellen um den Text unterhalb auf übereinstimmender Höhe zu haben.


    Wenn nämlich die 3 Bilder nicht exaxt gleich gross (Höhe und Breite) sind, verzieht es mir das immer.

  • Hallo Pete,

    das geht auch noch einfacher und zwar mittels einem CSS-Befehl. Diesen Befehl müssen Sie einfach nur in das jeweilige Inline-Fenster eingeben. Das müssen Sie in dem Fenster des Artikels eingeben, wo das Bild deutlich kleiner ausfällt und der Text daurch nach oben gerutscht ist. Kopieren Sie sich den Befehl via dem Dokumenten-Symbol heraus und fügen es in dem jeweiligen Artikel ein.

    Code
    margin-bottom: 30px;


    Klicken Sie dazu den zu bearbeitenden Artikel an (doppelklick) und gehen danach auf das Mischpult > Mehr > Inline-CSS > Befehl einfügen > Ok

    Passen Sie nur noch den Befehl nach Ihren eigenen Wünschen an. Entweder die Px-Zahl erhöhen oder verringern, bis die gewünschte höhe des Artikels mit den anderen Text-Widgets übereinstimmen.

    MfG der Wölfe-Man

  • Kann ich in einen Container, z.B. 3-spalter mit Bildern, eine zusätzliche Reihe zwischen die Bilder und die Texte legen?

    Hallo Pete,

    ja auch das ist möglich. Sie können eine neue Reihe zwischen den Bildern und den Texten rein legen.

    Ich füge hier einmal zwei Links vom Online-Handbuch ein. Zum einen geht es um das Grid-System (Container, Reihe, etc.) und zum anderen wird Ihnen erklärt, wie Sie einen Artikel verschieben müssen. Damit können Sie eine neue Reihe zwischen den Bildern und den Texten bilden. Alle 3 Texte müssen Sie via Drag & Drop verschieben. Dadurch bilden Sie die gewünschte neue Reihe (in einem neuen Container).

    Den allzu großen Abstand können Sie via einem CSS-Befehl wieder verringern. Dazu müssen Sie den folgenden CSS-Befehl bei allen 3 Bildern via dem Inline-CSS einfügen, sonst wird der Abstand nicht verringert. Auch hier müssen Sie die Px nur nach Ihren eigenen wünschen einrichten. Gehen Sie so vor, wie Ich es im Beitrag Nr. 2 beschrieben habe.

    Code
    margin-bottom: -30px;


    MfG der Wölfe-Man

    4 Mal editiert, zuletzt von Woelfe-Man (27. März 2016 um 19:07)

  • Leider habe ich mit meinem Container immer noch Probleme.

    Sehe ich das richtig, dass die Bilder exakt die gleiche Grösse haben müssen, sonst "verreisst" es mir den schönen Container?

    Entweder werden die Bilder verkleinert/vergrössert oder der Text darunter ist nicht gleichmässig.

    Ist der obige Vorschlag von Manni umsetzbar oder gibt es eine bessere Lösung?

    Habe ich da was übersehen?

  • Hallo Pete,

    die Bilder werden ja immer abhängig von der Spaltenbreite proportional skaliert. Wenn also alles super aussehen soll, dann ist es zu empfehlen, dass die Bilder alle im gleichen Ausgangsformat vorliegen.

    Den Abstand nach unten vom Bild zum Text kannst Du über Inline-CSS steuern. Dazu einfach das Bild-Widget öffnen, unten links auf das Regler-Icon klicke, dann auf "mehr" klicken und dann bei Inline-CSS folgendes eintragen:

    Code
    margin-bottom: 30px;

    Anstatt den 30px kannst Du natürlich auch einen anderen Wert nehmen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!