Texteinzug bei Bullet-Listen neben Bildern

zeta-omis

Hallo miteinander, meiner Meinung nach funktioniert der Texteinzug bei Bullet-Listen neben einem Bild nicht korrekt.

Anschauungsbeispiel siehe https://www.omrun.ch/de/was-wir-tun.html

In der dritten Box von oben funktioniert der Einzug bei den Bullets wie gewünscht.

Im Block "Prüfen & überwachen" https://www.omrun.ch/de/was-wir-tun.html#a3891 als Beispiel, ist der Einzug nicht korrekt und sieht unschön aus, die Bullets hängen sogar links über den Text hinaus und sind viel zu nah am Bild. Gibt es einen Workaround, bis dieser Darstellungsfehler korrigiert werden kann? Besten Dank und Gruss, M. Keller

Stefan S

Hallo,

da das Bild nicht über das Grid-System, sondern inline im Texteditor platziert wurde, ist es ein "float" und der verdrängt anscheinend die Liste nicht korrekt nach rechts. Da fällt mir aktuell leider kein CSS-Workaround ein.

Da es sich bei dem Bild aber um ein PNG handelt, könnte man dem Bild ggf. auf der rechten Seite einen transparenten Bereich hinzufügen, der sozusagen den Fehlenden Abstand ersetzt.

zeta-omis

Hallo Stefan, herzlichen Dank für Deine schnelle Antwort, ich schätze das sehr!

Das mit dem transparenten Rand des Bildes ist eine Idee zur Annäherung, würde aber im besten Fall bedeuten, dass die Bullets auf gleicher Höhe (Einzug) sind wie der Fliesstext.

Korrekt wäre es aber, wenn die Bullets (wie in den Absätzen ohne Bild) nach innen zurückversetzt sind, und das kriege ich mit einem transparenten Bildrand nicht hin.

Ich komme deshalb nicht darum herum, zu glauben, dass das ein kleiner Programmfehler ist, der korrigiert werden sollte...:-)

Herzlichen Dank für Eure Bemühungen und liebe Grüsse, Marc

Stefan S

Die Ursache des Problems liegt in HTML/CSS. Ich vermute, da werden wir nicht viel machen können.

zeta-omis

Alles klar, schade!

Stefan S

Einen Workaround hab ich doch noch. Sie nutzen ja bereits eigene CSS-Klassen für Elemente.

Definieren Sie bitte folgende neue CSS-Klasse:

CSS

.ulfloatfix {
    -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
            transform: translateX(20px);
     padding-right: 20px;
}

Nun können Sie diese Klasse den <ul> zuweisen, die sich rechts von Bildern befinden und momentan nicht korrekt dargestellt werden. Die Klassendefinition verschiebt die URLs einfach um 20px nach rechts (der Abstand rechts der Bilder ist auch 20px)…

Ihre Listen würden dann z.B. so aussehen:

Code

<ul class="ulfloatfix">
<li>Erster Listeneintrag</li>
</ul>

zeta-omis

Wow, genial, vielen Dank, das probiere ich grad mit meinem Entwickler-Kollegen aus!!!

Und schon umgesetzt, Deine CSS-Klasse hat absolut wunschgemäss funktioniert, perfekt, ein grosses Dankeschön!

Texteinzug bei Bullet-Listen neben Bildern

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?