Link Indication

    Hallo

    Ich hab das Link Indication Plugin installiert und folgendes Problem damit.

    [Blockierte Grafik: http://i3.tinypic.com/6q25l6c.jpg]

    Die Grafik bei den Links wird nicht korrekt gesetzt.
    In meiner style.css habe ich z.B. für externe Links folgende Angabe:

    Code
    a.liexternal { padding-right: 12px; background: url(images/link-indication/link-icon_external.gif) no-repeat right; }

    Wenn ich das padding right ändere passiert nichts.
    Ich nehm mal an ich habe in meiner style.css irgend etwas anderes das hier reinfunkt, deshalb hänge ich mal die ganze Datei dran in der Hoffnung mir kann jemand helfen. Vielen Dank

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Danke für den Tip, hat aber leider nicht geklappt. Hab beides ausprobiert, also komplett gelöscht und ein "padding-left: 12px"


    Hat sonst noch jemand eine Idee?:confused:

    padding ist der Abstand nach Innen.

    jetzt braucht so ein Abstand nach Innen eine äußere Grenze, sonst weiß er ja nicht wo Innen ist ;)

    solange die Links keine Breite haben, kann padding nicht so recht wirken.

    width:auto; zu den Links müßte das Problem an und für sich und so beheben,

    ob es bei Dir reicht kann ich so nicht sagen, weil Du keine generellen Angaben hast, sondern eben sehr soezifische, wo die css Hierarchie also die Cascade von dem Cascading Style Sheet so richtig gut zu tragen kommt ;)


    lg


    Also ich bin nicht sicher ob ich dich richtig verstehe.
    Du meinst ich sollte es folgendermassen machen?

    Code
    a.liexternal { padding-right: 12px; background: url(images/link-indication/link-icon_external.XXgifXX) ; width:auto; no-repeat right; }

    Das hat leider auch nicht funktioniert aber danke für die Hilfe.
    Ich hab mich auch bei CSS4You ein bisschen durchgearbeitet und habe mal ein paar Dinge probiert aber es hat auch nicht geholfen. Zum Beispiel mit dem Margin statt Padding oder Prozentangabe statt Pixel etc... :???:


    Ich nehm mal an dass es in meiner style.css irgendwo eine Codezeile gibt die da reinfunkt oder? An etwas anderem kann es ja nicht liegen denn mit dem Standard Theme (Kubrick oder wie das heisst) funktioniert es perfekt.

    Ich nutze das gleiche Plugin und generell ist der gepostete CSS-Schnipsel richtig. Es reicht, das Hintergrundbild und den passenden Paddingwert zu definieren. Das Padding sorgt dafür, dass rechts neben dem Text Platz für das Bild stehen bleibt.

    Ich habe mal in Dein Stylesheet geschaut, aber ohne die tatsächliche Seite kann ich das wohl nicht mit Gewissheit sagen, woran es liegt. Vermutung: Es liegt an der Reihenfolge, in der CSS-Definitionen abgearbeitet werden. Du kannst z.B. nicht die Deklaration "#eine-id .eine-klasse" mit ".eine-klasse" überschreiben, weil die ID später verarbeitet wird, unabhängig davon in welcher Reihenfolge es im Stylesheet steht.

    In Deinem Fall hast Du für ".entry a" den Paddingwert auf 0 gesetzt, was sich eventuell mit "a.liexternal" nicht überschreiben lässt. Du könntest entweder mal in Zeile 59 und 60 die Padding-Angabe entfernen (ist die dort nötig?) oder eben aus "a.liexternal" mal ".entry a.liexternal" machen (bzw falls es noch woanders solchermaßen ersetzte Links gibt, einfach beide Angaben hinschreiben).

    Für den IE brauchst Du übrigens noch die Angabe "display: inline-block;", damit diese Links "Layout haben". Sonst ergeben sich komische Effekte, wenn der Link auf zwei Zeilen umgebrochen wird. Man kann sehr schön ein Extra-Stylesheet mit dieser Angabe nur für den IE importieren, mittels Conditional Conmments.

    Zitat von Ammaletu


    In Deinem Fall hast Du für ".entry a" den Paddingwert auf 0 gesetzt, was sich eventuell mit "a.liexternal" nicht überschreiben lässt. Du könntest entweder mal in Zeile 59 und 60 die Padding-Angabe entfernen (ist die dort nötig?) oder eben aus "a.liexternal" mal ".entry a.liexternal" machen (bzw falls es noch woanders solchermaßen ersetzte Links gibt, einfach beide Angaben hinschreiben).

    Super, genau daran lag es. Ich hab nun das "padding:0;" gelöscht und nun sieht alles ok aus. Vielen Dank für die Hilfe ;)

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden