Icon überlappt im Themenbereich

Hallo liebes Team,

ich habe folgendes Problem in meinem Forum:
Das Icon, welches vor meinen Beiträgen steht, ist 50x50 groß. Bei den Icon der Kategorien, Foren und Unterforen ist es genauso und auch optisch völlig in Ordnung. Im Beitragsbereich überlappt es jedoch mit den Überschriften der Beiträge und auch mit dem "von" vom Verfasser. Die Schrift müsste dort in dem bereich weiter nach rechts geschoben werden. Seltsamerweise nur dort, nicht in den anderen Bereichen. Ich habe nun schon eine ganze Menge an Beiträgen hier im Forum durch. Vielfach glaube ich auch, das dieses Problem schon angesprochen und gelöst wurde, doch ich hab etwas Angst, das einfach so auszuprobieren, wie zum Beispiel in diesem Beitrag:
https://hilfe.forumieren.com/t25065-breite-fur-das-icon-vor-den-beitragen?highlight=themen+icon
Leider weiß ich nie genau, ob die dort angesprochene Lösung auch auf mein Forum zutrifft.
Ich habe mal ein Bild zur Veranschaulichung meines Problems reingesetzt:

Zuckerpuppe hat ja schon oft etwas zu dieser Art von Fragen geschrieben. Vielleicht könnte sie mir hier auch liebenswerterweise helfen.
Danke schön und entschuldigung vorab. Ich bin mir sicher das die Lösung schon irgendwo genannt wurde.
Lieben hilfesuchenden Gruß
Damian
www.heimataerde-orden.com

Hallo

das kannst du mittels eines CSS-Codes ändern und es ist sogar der, den du gefunden hast.

Code:

dl.icon {
    background-position: 0 50%;
}

Ich habe das jetzt mal so eingestellt, dass es passen sollte.
Wenn du das Icon noch mehr nach links verschieben möchtest, dann musst du den Wert, der jetzt auf 0 steht, negativ verändern. Also z.B. -5
Du kannst es ja mal ausprobieren, wie es dir am besten gefällt

Danke schön Zuckerpuppe
Hat sehr gut geklappt. Das heisst also das der Text selber garnicht verschoben werden kann? Denn nun ist zwar das Problem an sich gelöst, nur das optische Bild leidet ein wenig unter dem Aussehen, da das Kreuz ganz an den linken Rand gerutscht ist und so etwas "eingeengt" wirkt. Aber wie gesagt, es hat definitiv schon mal funktioniert das sich das Icon und der Text nicht mehr überlappen und darauf kommt es ja auch hauptsächlich an
An sich kann der Beitrag somit geschlossen werden

Ich möchte hier noch mal einen Tipp geben.
Du solltest deine Icons mal entweder selber Überarbeiten oder dir von einem Grafiker hier bearbeiten lassen.
Wenn ich es richtig sehe, dann sind bei fast allen Icon's schwarze Hintergründe, die teilweise auch sehr groß sind.
Diese Schwarzen Hintergründe sollten Transparent sein und eventuell auch nicht so groß. Das würde schon einiges bringen.
Überleg dir das mal in Ruhe.

Hallo Frank,
Vielen Dank für deinen Ratschlag. Ich werde mir das mal überlegen.
Lieben Gruß
Damian

Damian schrieb:Danke schön Zuckerpuppe
Hat sehr gut geklappt. Das heisst also das der Text selber garnicht verschoben werden kann? Denn nun ist zwar das Problem an sich gelöst, nur das optische Bild leidet ein wenig unter dem Aussehen, da das Kreuz ganz an den linken Rand gerutscht ist und so etwas "eingeengt" wirkt.

Damian, man kann auch den Text ein wenig versetzen

Dazu musst du erstmal den o.g. Code wieder entfernen.
Dann setzt du stattdessen diesen hier ein:

Code:

ul.topics dd.dterm, ul.topics dt {   
    padding-left: 60px;   
}

li.header dl.icon dt {
    padding-left: 13px;
}

Du kannst den Text auch noch weiter nach rechts schieben. Dann musst du die Werte noch anpassen. Anstatt 60 und 13 Pixel müsstest du dann 70 und 25 Pixel eingeben. Musst es halt mal austesten. Kann ja nichts kaputt gehen.

noch ein Hinweis zum Verändern der Grafiken....wenn du, wie Frank es dir vorgeschlagen hat, den schwarzen Rahmen entfernen solltest, sodass die Grafik an sich kleiner wird (das Kreuz aber so in der Größe bliebe), dann würde das Icon noch mehr nach links, also an den Rand rutschen. Daher würde ich es so belassen, weil du ja genau das nicht möchtest

Hallo Zuckerpuppe
Irgendwas funktioniert nicht ganz. Habe den alten Code rausgenommen und den neuen Code reingesetzt. Nun ist die Optik wieder so wie im ersten Beitrag beschrieben. Habe auch mal mit anderen Daten durchprobiert und Cookies etc. gelöscht. Was kann ich denn noch falsch haben?
Ganz lieben Gruß
Damian

hm, kannst du mal bitte den Code posten, den du ins CSS eingesetzt hast?
Irgendwas stimmt da nicht...

Er funktioniert einwandfrei in meinem Testforum?
Hast du vielleicht ein Leerzeichen zuviel gesetzt?
Hast du den Code oben genauso kopiert, wie er angegeben ist (also auf den Link"Code kopieren" geklickt?)

hast du den Code vor dem Einsetzen noch in einem Editor bearbeitet?

Tausendfach mea culpa,

keine Ahnung wieso es vorhin 3 mal hintereinander nicht funktionierte. Irgendwo muss ich wohl doch einen Fehler bei der Übernahme des Codes reingebaut haben. Bei mir ging die "Diesen Code kopieren"-Funktion vorhin nicht und ich werde bestimmt dann ein Leerzeichen oder sowas bei der manuellen Übernahme zusätzlich reingesetzt haben. Du hast absolut recht.
Habe alles nochmal komplett neu gemacht und jetzt geht es
Vielen, vielen Dank, es ist perfekt

Super, freut mich, dass es nun klappt

dann mach ich hier mal zu...

-closed-