Zusätzliches Linkverhalten erzwingen!

Aufgabe: Seit kurzem hat sich in meinem [COLOR=YellowGreen]CONCARS Blog[/COLOR] die Möglichkeit ergeben gesponserte Wort-Verlinkung anzubieten. Dazu muss man einfach das Wort mit der betreffenden Seite des Sponsors verlinken. So weit so gut! Als sinnvoll empfinde ich es zwecks der optischen Unterscheidung gesponserte Wort-Verlinkungen in einem anderen Linkverhalten anzeigen zu lassen als im Blog üblich. Das habe ich auch vergeblich folgendermaßen versucht zu erreichen:

Lösungsversuch:

1) In der style-Datei meines eigenen WP-Themes Green concepts habe ich unter den CSS-Code fürs übliche Linkverhalten

/* <-- beginn Spezifikationen für Linkverhalten ;-) */
a {
 text-decoration: none;
 color: #99cc00;
 border-bottom: none; /* erzeugt einen dünnen Linkunterstrich */
}


a:hover {
 text-decoration: none;
 color: #000000;
 background: #f8f8f8;
 border-bottom: none; /* verändert den Linkunterstrich bei Mausaktion */
}

noch für das Verhalten des gesponsorten Links mit dem namen sponsilink folgenden CSS-Code eingefügt

.post .sponsilink a {
 text-decoration: bold;
 font-size: 14px;
 color: #000000;
 border-bottom: none; /* erzeugt einen dünnen Linkunterstrich */
}


.post .sponsilink a:hover {
 text-decoration: bold;
 color: #000000;
 background: #99cc00;
 border-bottom: none; /* verändert den Linkunterstrich bei Mausaktion */
}

2) Dann habe ich im WP-Plugin @ Add Qucktag den Code-Schnipsel

<span id="sponsilink"> und </span> erstellt.

3) Wenn ich jetzt im WP-HTML-Texteditor den betreffenden Link im Post durch meinen sponsilink-Code einschließe, z.B.

Ein <span id="sponsilink"><a href="http://www.clickandprint.de/druck/auto-aufkleber.html" title="Auto-Aufkleber preiswert und qualitativ drucken lassen bei clickandprint.de">Aufkleber</a></span> auf dem Armaturenbrett informiert den Fahrer über die gültige Höchstgeschwindigkeit.

sollte eigentlich im Browser ein neues Linkverhalten für diesen Sponsorlink erzwungen werden. Sollte .. aber leider tut es das nicht.

Wo liegt der Programmier- bzw. Verständnisfehler? Kann mir bitte da jemand helfen oder auf nützliche Lösungsquellen/-ansätze hinweisen?

Euer
ccliver

Id, span und andere Mißverständnisse

Danke marX für die prompte Hilfe, ich werde das in den nächsten Tagen gleich mal ausprobieren.

Wieso ein zusätzliches <span>?
Weil ich nicht weiß, wie ich im WP-Plugin @ Add Quicktag den Code-Schnipsel anders definieren soll. Okay, die direkte Zuweisung dem <a>-Element leuchtet mir ein, aber wie erkennt der Browser im HTML-Strang des jeweiligen Beitrags wann der sponsilink kommt bzw. wie müsste dann der HTML-Code lauten? :confused:

Weder noch

Die Katastrophe ist, daß weder die eine Möglichkeit noch die andere funzt.

Weder das direkte Ansprechen des <a>-Elements durch
<a class="sponsilink" href="..."> in Kombination mit dem CSS-Style-Schnipsel

.post a.sponsilink {
 text-decoration: bold;
 font-size: 14px;
 color: #000000;
 border-bottom: none; /* erzeugt einen dünnen Linkunterstrich */
}


.post a.sponsilink:hover {
 text-decoration: bold;
 color: #000000;
 background: #99cc00;
 border-bottom: none; /* verändert den Linkunterstrich bei Mausaktion */

funktioniert, noch über das indirekte <span>-Element über @ Add Quicktag und dem CSS-Style-Codeschnipsel

.post .sponsilink a {
 text-decoration: bold;
 font-size: 14px;
 color: #000000;
 border-bottom: none; /* erzeugt einen dünnen Linkunterstrich */
}


.post .sponsilink a:hover {
 text-decoration: bold;
 color: #000000;
 background: #99cc00;
 border-bottom: none; /* verändert den Linkunterstrich bei Mausaktion */
}

Beides wird herrlich ignoriert! Ich sag nur "Code is poetry!" :mrgreen:

Stimmt, da ist mir im WP-HTML-Editor ein " zuviel reingerutscht. Obwohl ich es korrigiert habe, wird aber nur das <a:hover>-Element ausgeführt, das <a>-Element ist weiterhin gleich, obwohl der Link

[size=14][COLOR=Black]14 px[/COLOR][/SIZE] breit mit dicker Schrift und [COLOR=YellowGreen]grünem Hintergrund[/COLOR]

.post #unibox a.sponsilink {
 text-decoration: bold;
 font-size: 14px;
 color: #99cc00;
 border-bottom: none; /* erzeugt einen dünnen 


Linkunterstrich */
}


.post #unibox a.sponsilink:hover {
 text-decoration: bold;
 color: #000000;
 background: #99cc00;
 border-bottom: none; /* verändert den 


Linkunterstrich bei Mausaktion */
}

dargestellt werden soll.

Sooooo klappts und net anders!

Huuuuuuuuuuuuuuuuuurrrrrrrrrrraaaaaaaaaaaaaaaa! :-D:-D:-D

Jetzt hammos endlich! [COLOR=YellowGreen]So soll es aussehen![/COLOR]
Ich war einfach zu schlampig, dachte ich könnte nur über die tags text-decoration und color das Aussehen beeinflußen, aber da muss schon mehr Code hin.

Hoffe, daß das dem Sponsor als optischer Verlinkungsverweis ausreicht.
Danke marX für die prompten Antworten und die gezielten Verweise auf die selfhtml-Seiten. Hab da zwar viel rumgelesen, aber anscheinend immer das Falsche.