CSS-Frage wg. unterstrichenen Bilder-Links

dbln

Hallo,
ich habe das Problem, dass ich gern zwar unterstrichene Text-Links in meinen Beiträgen (Effekt: gepunktete Linie, bei Mouseover Farbhintergrundänderung) hätte, jedoch die darin enthaltenen Bilder (sofern sie auf einen Link zeigen) leider auch unterstrichen sind. Habe mal ein paar relevante Zeilen gepostet. Meist ist es ja eine Kleinigkeit. Vielleicht hat jemand einen Tipp, wie die verlinkten Bilder in Beiträgen völlig ohne Effekt angezeigt werden?

Vielen Dank.

PHP

.entry{
    line-height:20px;
    font-size:12px;
    padding:5px 20px 0 4px;
}
.entry img{
    border:0px solid #ccc;
}


.entry p{
    padding-bottom:15px;
}


.entry p a{
    border-bottom:2px #7AB138 dotted;
}


.entry p a:hover{
    background-color:#7AB138;
    }


(...)


a img {
    border: none;
    }

Alles anzeigen

Mit einer eigenen Bildklasse habe ich es auch schon versucht, hat aber nichts gebracht.
Siehe:

PHP

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

Werbepost

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

_Paul_

Du gibst den Links einen border-bottom- wohlgemerkt, den Links. Was bringt es dir da, den Bildern eine Klasse zuzuweisen, die diesen Border aufhebt?
Deine Klasse .bildnormal muss den Links zugewiesen werden (<a href="#" class="bildnormal"><img src="#" width="" height="" alt="" /></a>.

Dieses Problem könntest du umgehen wenn du an Stelle von border-bottom text-decoration: underline; verwendest; da das für Text gilt würden Bilder innerhalb von Links keinen Unterstrich haben.

dbln

Hallo,
bin leider absolut kein CSS-Spezi. Meine Kenntnisse beruhen eher auf Zufällen und viel Ausprobieren.

Ich nutze das Theme Hanging

Leider ist die CSS sehr lang und für mich kaum durchschaubar, ich hänge sie mal (aufgrund maximaler Upload-Dateigröße als ZIP) ran. Vielleicht erkennt ja jemand von Euch auf den ersten Blick, wo der Wurm drin ist?

Irgendwie bringt das mit der eigenen Klasse für Bilder nichts, vielleicht ist etwas in der CSS, was diese Klasse unwirksam macht?

Mein Ziel:
Links im Beitrag sollen gepunktet unterstrichen sein und bei Mouseover der Linkhintergrund eingefärbt werden. Habe ich soweit erreicht. Nur möchte ich, dass Bilder die einen Link darstellen neutral (ohne diesen Effekt) angezeigt werden.

Vielen Dank für Tipps.

gericoach

was meinst Du wohl, weshalb _Paul_ Dir geantwortet hat? Weil er Langeweile hatte und es liebt, total ignoriert zu werden? Befasse Dich doch erstmal mit seiner Antwort und stelle Deine Frage nicht nochmal.

_Paul_

Du musst dem Link, der das Bild umschließt, die Klasse geben. Nicht dem Bild.

FALSCH:
<a href="#"><img class="bildnormal" width="" height="" alt="" /></a>

RICHTIG:
<a class="bildnormal" href="#"><img width="" height="" alt="" /></a>

Zitat

Weil er Langeweile hatte

Jepp.

dbln

Meine Problemlösung

_Paul_:
Ich habe Dich nicht ignoriert, sondern viel mehr im Rahmen meiner Möglichkeiten versucht, Deinen Ratschlag (auch mit der Klasse für den bildumgebenden Link) zu befolgen. Die halbe Nacht habe ich damit verbracht. Ohne Erfolg hinsichtich der hier gegebenen Tipps, denn offenbar haut die CSS das (wieso auch immer) wieder auseinander.

Meine Lösung für mein Problem war:
Am Ende der CSS habe ich folgendes hinzugefügt:

Code

/* Start Links und verlinkte Bilder neutral darstellen */
#linkohne a:link, #linkohne a:visited { text-decoration: none; }
#linkohne a:hover, #linkohne a:active { text-decoration: none; }
/* Ende Links und verlinkte Bilder neutral darstellen */

Meine verlinkten Bilder, die ohne Effekt dargestellt werden sollen, sind nun wie folgt eingebunden:

Code

<div id="linkohne"><a href="http://"><img src="http://www.URLZUMBILD.jpg" alt="" /></a></div>

Ist das soweit ok, oder spricht etwas dagegen?:confused:

Schönes WE!

maxe

Lieber nicht mit IDs, sondern mit Classen, sonst wird's leicht mal invalide wenn man mehrere Links pro Seite damit ausstattet:

Code

/* Start Links und verlinkte Bilder neutral darstellen */
.linkohne a:link, .linkohne a:visited { text-decoration: none; }
.linkohne a:hover, .linkohne a:active { text-decoration: none; }
/* Ende Links und verlinkte Bilder neutral darstellen */

Und dann meine Empfehlung, wie Paul auch schreibt, keinen Div drum legen, sondern direkt so:

HTML

<a href="http://" class="linkohne"><img src="http://www.URLZUMBILD.jpg" alt="" /></a>

dbln

maxe:

Vielen Dank für Deine Antwort. Leider funktioniert es absolut nicht so bei mir. Habe es exakt genauso in die CSS am Ende eingetragen und das Bild nach Deiner Vorgabe eingebunden. Wieso auch immer, wird das Bild noch immer unterstrichen und die Angaben in der Class ignoriert. Ich kann es mir absolut nicht erklären...

Somit bleibt mir wohl leider nichts anderes übrig, wohl doch IDs zu nehmen, oder fällt Dir noch was dazu ein?

koslowski

Moin,

dann ändere doch mal die Spezifität deiner Formatierung.
Die geht nämlich vor der Reihenfolge der Notierung im Stylesheet. ;)

dbln

koslowski:

Da ich in Sachen CSS alles andere, als ein Profi bin, ist das etwas zu speziell für mich, zumal meine CSS des Themes auch sehr umfangreich ist.
Habe es mal mit dem auf der von Dir genannten Seite Zusatz-Attribut

Code

!important

versucht, leider wieder ohne Erfolg.

koslowski

Zitat von dbln
koslowski:
Habe es mal mit dem auf der von Dir genannten Seite Zusatz-Attribut
Code
!important
versucht, leider wieder ohne Erfolg.

ähem..., ich hab doch gar nix von !important gesagt. :roll:

Wenn es mit id's klappt, mit Klassen aber nicht ist das ein Hinweis das ich mit fehlender Spezifität richtig lag.

Hol dir Firebug , (deutsches Tut dazu) dann siehst für welche Elemente welche styles gelten und wo die stehen. ;)

dbln

Die Sache mit dem !important kam mir am naheliegendsten vor, sorry, wenn ich mangels Profi-Wissen auf dem Holzweg war.

Habe mich mit dieser Spezifität befasst und mir das Firefox-Plugin zugelegt. Leider habe ich keine Idee, wie ich die von mir gewünschte Sache (verlinkte Bilder völlig ohne Unterstreich/Mouseover-Effekt) erreichen kann, da ich keine Ahnung habe, wie ich die "Punktwerte" dahingehend beeinflussen soll.

Habe mal Screenshots aus dem Firefox-Tool angefertigt:
Nr. 1 ist das verlinkte Bild
Nr. 2 ist das verlinkte Bild bei Mouseover
Nr. 3 zeigt normalen Textlink und Textlink bei Mouseover

Auf jeden Fall wird die Klasse "linkohne" vom Rest der CSS völlig übergangen und verlinkte Bilder wie normale Textlinks gem. CSS (wie bei Screenshot 3) unterstrichen.

Vielleicht erkennt ja jemand, was ich ändern muss?
Vielen Dank!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

CSS-Frage wg. unterstrichenen Bilder-Links

Jetzt mitmachen!