CSS-Klasse hinzufügen für einzelne Links

  • Hallo,
    vielleicht kann mir jemand helfen. Ich nutze derzeit das Theme "Blossom". Die CSS-Datei habe ich schon (soweit ich kann) an meine Bedürfnisse angepasst, bleibe aber bei einem Punkt hängen und auch die Suchfunktion hier brachte mir nichts.

    Ich möchte gern bestimmte Links oder Bilder die einen Link darstellen, im Bedarfsfall anders darstellen. Derzeit werden alle Links und Bilder die ein Link sind unterstrichen, zusätzlich sind die Bilderlinks umrandet. Dies soll auch grundsätzlich so bleiben. Dennoch möchte ich hin und wieder genau dies verhindern, also Links und Bilder die ein Link sind, sollen nicht unterstrichen und nicht umrandet werden, also ohne jede Hervorhebung (auch beim Überfahren mit der Maus).

    Ich denke, dies könnte man über eine eigene Klasse in der CSS lösen, oder?
    Da ich keine Ahnung habe und mir nicht alles komplett zerschiessen will, wäre es super, wenn mir hier ein Profi kurz weiterhelfen kann.

    Die derzeitige CSS ist zu finden unter http://home.arcor.de/egal0815/wpforum/style.css

    Vielen Dank für die Hilfe.

    • 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

  • Verrätst Du mir noch, wo ich das einfügen soll? Habe nämlich nicht wirklich Ahnung davon.

    Aber wäre das Einfügen dieses Codes nicht generell auf alle Grafiken (die zugleich ein Link sind) bezogen?

  • Verrätst Du mir noch, wo ich das einfügen soll? Habe nämlich nicht wirklich Ahnung davon.

    Aber wäre das Einfügen dieses Codes nicht generell auf alle Grafiken (die zugleich ein Link sind) bezogen?

    Generell in einer neuen Zeile in deiner CSS Datei, und ja: davon sind alle Grafiken betroffen. Wenn du nur einzelne ändern möchtest, schau dir mal im Editor -> Bild hinzufügen / bearbeiten die erweiterten Einstellungen an. Dort kannst du jedem Bild eigene Einstellungen zuweisen.

  • Ich habe den von Dir genannten Code in eine neue Zeile der CSS eingefügt, es hat aber nichts gebracht.

    Nochmal zum Verständnis:
    Lieber wäre mir eine eigene Klasse (sofern es sich so lösen lässt), wo ich im Bedarfsfall den Link oder das Bild individuell drauf beziehen kann. Die generelle Änderung bezogen auf den ganzen Blog oder jegliche Links und Bilder mit Link möchte ich ja gar nicht.

  • Das mit den erweiterten Einstellungen ist zwar ganz nett (wenn ich denn mal wüsste, WAS ich da WO genau eintragen soll, um den erwünschten Effekt zu erzielen), aber offenbar bezieht sich diese Einstellungsmöglichkeit nur auf hochgeladene Grafiken und nicht auf im Blog von externen Servern eingebundene Grafiken. Trotzdem danke ich Dir für Deine Mühe.

    Falls noch jemand von Euch eine Idee hat, wie ich mein Problem z.B. durch eine eigene Klasse in der CSS lösen kann, bitte einfach posten ;-)

  • Super, das hat mir schonmal geholfen. Hättest Du jetzt noch ne Lösung, wie ich durch Eintrag in die Klasse verhindere, dass der Link mit dem das Bild unterlegt wird unterstrichen wird? Normale Textlinks sollen davon nicht betroffen sein.

    Code
    border:none;text-decoration:none;

    hat zwar den Rahmen um das Bild entfernt, aber das Bild bleibt noch unterstrichen, wenn es einen Link darstellt.

    Einmal editiert, zuletzt von dbln (26. September 2008 um 00:42)

  • Hallo,
    ich habe jetzt folgendes ans Ende der CSS meines Themes gepackt:

    Code
    .deinbild { border:none }
    a .deinbild { border-style: none; }
    a .deinbild:hover { border-style: none; }

    Leider wird das Bild (welches ich auf die Klasse bezogen habe) noch immer unterstrichen, wenn es gleichzeitig einen Link darstellt. Die Umrandung ist jedoch jetzt verschwunden. Beim Mouseover verschwindet die Unterstreichung, dies ist aber wohl eher dem Rest der CSS zu verdanken und war schon immer so. Gibt es eine Lösung, durch Zuordnung der Klasse "deinbild" noch zu verhindern, dass Bilder die Links sind unterstrichen sind, wenn keine Interaktion mit der Maus stattfindet?

    Vielen Dank.

  • Ersetze doch mal das "border-style" durch "border: none". Das waren nur Beispiele die ich auf die schnelle kopiert habe.

    Edit: Überprüfe doch auch mal, ob dem übergeordneten "a href: (...)" eine bestimmte Klasse zugeordnet wurde. Im übrigen empfehle ich dir dieses Addon für den Firefox. Damit kannst du schnell überprüfen, welcher Teil deines CSS für die einzelnen Elemente zuständig ist.

  • Ich hab es nun fast hinbekommen.
    In der CSS steht nun:

    Code
    .deinbild { border: none; }
    a .deinbild { border-style: none; }
    a .deinbild:hover { border-style: none; }

    Das Bild mit dem Link ist nicht mehr unterstrichen, jedoch "zappelt", bzw. "springt" der darunterliegende Text, sobald ich mit der Maus über dieses Bild fahre. Hättest Du dazu auch noch ne Idee?

    EDIT:
    Mit

    Code
    .deinbild { border: none; border-bottom: 1px solid #F2F2F4; text-decoration: none; color: #5B5A5A; }
    a .deinbild { border-style: none; }
    a .deinbild:hover { border-style: none; }


    hat es geklappt. Nichts zappelt mehr, alles ist so, wie ich es mir vorstelle.

    Ist meine Konstruktion noch CSS-valide, oder völliger Murks?

    Vielen Dank auf jeden Fall für die Tipps!

    Einmal editiert, zuletzt von dbln (26. September 2008 um 20:14)


  • EDIT:
    Mit

    Code
    .deinbild { border: none; border-bottom: 1px solid #F2F2F4; text-decoration: none; color: #5B5A5A; }
    a .deinbild { border-style: none; }
    a .deinbild:hover { border-style: none; }

    hat es geklappt. Nichts zappelt mehr, alles ist so, wie ich es mir vorstelle.

    Ist meine Konstruktion noch CSS-valide, oder völliger Murks?

    Vielen Dank auf jeden Fall für die Tipps!

    Na ja, diese Konstruktion ist schon eher heikel. Zumindest das border: none kannst du entfernen, bzw. durch border-top, border-left usw. ersetzen.

  • "border: none" ist nun raus und es klappt noch immer.

    Sofern die CSS deswegen nicht valide ist, wäre ein Tipp von Dir oder anderen Könnern nett ;-)

Jetzt mitmachen!

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