Links mit CSS differenzieren?

[Jens Pielawa]

Hallo an alle,

ich habe eine Webseite, auf der normale Links und externe Links verschieden gekennzeichnet werden sollen, wie fast üblich externe mit einer kleinen Grafik. Frage: im TinyMCE kann ich für die Links nirgendwo CSS-Klassen angeben, sondern nur CSS-Formatierungen. Wie löse ich das?
Und wie kann man ALT- und TITLE-Tags dafür eingeben?
Es gibt ja auch eine Erweiterung "tweaklinks" (https://community.contao.org/de/showthread.php?p=10271), aber wie und wo soll das funktionieren?

[Friedhelm]

Hallo an alle,
ich habe eine Webseite, auf der normale Links und externe Links verschieden gekennzeichnet werden sollen, wie fast üblich externe mit einer kleinen Grafik. Frage: im TinyMCE kann ich für die Links nirgendwo CSS-Klassen angeben, sondern nur CSS-Formatierungen. Wie löse ich das?
Und wie kann man ALT- und TITLE-Tags dafür eingeben?

CSS-Klassen eingeben funktioniert:
Das normale Link-Symbol nutzen, da kannst Du eine Klasse eingeben, oder wenn vorhanden, aus der Auswahlliste wählen -> siehe Screenshot.
Üblicherweise werden die Icons per CSS-Hintergrundgrafik eingebunden, da gibt es keinen alt-Text.
tweaklinks kann ich nix zu sagen, kenne ich nicht.

[Jens Pielawa]

Alles klar, Friedhelm, das hat es genau so gebracht wie gewünscht. Manches erschließt sich auf den ersten Blick nicht genau.

[Andreas]

Hallo Jens,

das kannst du einfacher haben, wenn du allgemein in deine CSS-Datei dieses einfügst:

/** * externe Links */
a[href^="http:"], a[href^="https:"] {
  background-image: url(images/sprite_external.png);
  background-position: right top;
  background-repeat: no-repeat;
  padding-right: 13px;
}
a[href^="http:"]:hover, a[href^="https:"]:hover {
  background-image: url(images/sprite_external.png);
  background-position: right -30px;
}

Die Formatierung und das Icon bleibt natürlich dir überlassen, ich hab dir mal das sprite_external.png beigefügt.

Andreas

[Sebastian]

HI

es gibt außerdem eine Erweiterung tweakLinks, die mit Javascript arbeitet. Und was ist mit dem LinkExtender?

Sebastian

[Friedhelm]

Hallo Jens,

das kannst du einfacher haben, wenn du allgemein in deine CSS-Datei dieses einfügst:

/** * externe Links */
a[href^="http:"], a[href^="https:"] {
  background-image: url(images/sprite_external.png);
  background-position: right top;
  background-repeat: no-repeat;
  padding-right: 13px;
}
a[href^="http:"]:hover, a[href^="https:"]:hover {
  background-image: url(images/sprite_external.png);
  background-position: right -30px;
}

Das angegebene CSS ist natürlich eine elegante Lösung, die aber für IE <=7 nicht funktioniert.
Wer Rücksicht auf diese Browser nehmen muss/will sollte über eine andere Lösung nachdenken ;-)

[Andreas]

Nur IE<7 nicht <=7. Das Überlegen würd ich mir im Ansatz schon verkneifen, oder macht sich hier wirklich jemand Gedanken darüber, dass jemand mit IE6 kein Icon hinter externen Links sieht?

[Friedhelm]

Hi Andreas,

Nur IE<7 nicht <=7. Das Überlegen würd ich mir im Ansatz schon verkneifen, oder macht sich hier wirklich jemand Gedanken darüber, dass jemand mit IE6 kein Icon hinter externen Links sieht?

Du hast selbstverständlich vollkommen recht mit IE < 7! ;-)
Zu IE6: mich kratzt es nicht, aber wir haben glaube ich alle schon Kunden erlebt, die wollen, dass Ihre Website auf Ihrem Browser (IE6) in allen Details aussieht wie der grafische Entwurf. Und wehe da fehlen die Icons ;-) Meist, aber nicht immer ist mir die Überzeugungsarbeit gelungen.

[lucina]

Zu IE6: mich kratzt es nicht, aber wir haben glaube ich alle schon Kunden erlebt, die wollen, dass Ihre Website auf Ihrem Browser (IE6) in allen Details aussieht wie der grafische Entwurf. Und wehe da fehlen die Icons ;-) Meist, aber nicht immer ist mir die Überzeugungsarbeit gelungen.

Ein Argument, dem ich mit dem Einbau von etwas wie http://divitodesign.com/css/let-ie6-behave-like-ie7/ begegnen würde.

Carolina.