Verwendung: Text mit Bild: Bildausrichtung umfliessen links – Icons/Aufzählungen sind falsch eingezogen

D. Truninger's Avatar

D. Truninger

14 Sep, 2018 06:51 AM

Produkt: Oneo Contao
Contao-Version: 4.4.x

Sobald Bullets oder ein Download-Icon rechts neben einem Bild floatet, erscheinen die Aufzählungszeichen oder das Icon für ein Download Elemente «hinter» dem Bild, somit falsch eingezogen. Unter dem Bild ist natürlich alles wieder OK.

Ich vermute einen Zusammenhang mit dieser Regel und ob wir mit dem Attribut list-style-position: inside arbeiten sollten? Aber es klappt leider nicht sauber …

.oneo-no-sidebar .image_container.float_left { margin: 0.53333em 3.84615% 1.06667em 0; margin-top: 0.53333em; margin-right: 3.84615%; margin-bottom: 1.06667em; margin-left: 0px; }

  1. Support Staff 1 Posted by RockSolid Theme... on 14 Sep, 2018 12:19 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Sie können die Darstellung korrigieren indem Sie folgenden CSS-Code in die Datei files/oneo/css/custom.css einfügen:

    .ce_download .download-element {
        display: inline-block;
    }
    
  2. 2 Posted by D. Truninger on 14 Sep, 2018 01:30 PM

    D. Truninger's Avatar

    Dankeschön, klappt prima für die Download-Elemente!

    Bei den Aufzählungen innerhalb eines .ce_text gehts damit nicht ganz analog, haben Sie diesen evtl. auch gleich, damit es vollständig ist? Merci.

  3. Support Staff 3 Posted by RockSolid Theme... on 14 Sep, 2018 02:55 PM

    RockSolid Themes's Avatar

    Die Aufzählungszeichen in Ihrem Screenshot sehen korrekt aus. Können Sie genauer beschrieben wie sich der Fehler zeigt?

    Damit wir Ihnen zielgerichteter weiterhelfen können, schicken Sie uns bitte einen Link zur betroffenen Seite.

  4. 4 Posted by D. Truninger on 27 Sep, 2018 06:03 AM

    D. Truninger's Avatar

    Grüezi, die Site ist noch nicht public, aber in diesem Screenshot sehen Sie die Problematik gut: wenn umflossen links stehen die Aufzählungszeichen über der Randlinie, wenn unten weiterlaufend sind die Einzüge bündig mit dem Bild resp. übrig folgendem Text. Das ist typografisch nicht korrekt … gibt es eine einfache Lösung?

  5. Support Staff 5 Posted by RockSolid Theme... on 27 Sep, 2018 01:04 PM

    RockSolid Themes's Avatar

    Fügen Sie bitte folgenden CSS-Code in die Datei files/oneo/css/custom.css ein:

    .main-content ul,
    .main-content ol {
        list-style-position: inside;
        padding-left: 0.75em
    }
    

    Damit sollte sich das Darstellungsproblem beheben lassen.

  6. 6 Posted by D. Truninger on 27 Sep, 2018 01:57 PM

    D. Truninger's Avatar

    Super, das behebt die Sache, merci!

    Wenn ich darunter noch Spalten habe, die auch Aufzählungen haben können, dann gibt das bei mehrzeiligen Zeilen aber wiederum neue Probleme. Habe ich mal behoben mit einem «Reset», das klappt so bisher:

    .main-content  .rs-columns ul,
    .main-content  .rs-columns ol {
        list-style-position: inherit;
        padding-left: 1.46667em;
    }
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • Bildschirmfoto_2018-09-14_um_08.50.24.png 405 KB
  • Bildschirmfoto_2018-09-14_um_08.48.45.png 331 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac