Hover underline

[Sebastian Becker]

Hallo,

vielleicht kann mir jemand bei folgendem Problem(chen) helfen:

das Aussehen meiner Links wird so definiert:

body a:link {
color : #0066CC;
text-decoration : none;
}
body a:visited {
/*#CC66CC*/
color : #0066CC;
text-decoration : none;
}
body a:hover {
color : #FF9933;
text-decoration : underline;
}
body a:active {
color : #CCCCCC;
text-decoration : none;
}

Vor allen Links positioniere ich innerhalsb des <a href=...> ein Bild mit einem Symbol und ein Leerzeichen. Das Leerzeichen macht nun natürlich auch den hover-underline-Effekt mit und das sieht nicht so schön aus.

Wenn ich jetzt extra für das Leerzeichen einen neuen Style ohne underline definiere, wird dieser nicht angewendet und Dreamweaver zeigt mir an: Style not available.

Was habe ich falsch gemacht?

Danke für alle Tips,

Grüße

Sebastian

[csx]

Vor allen Links positioniere ich innerhalsb des <a href=...> ein Bild mit einem Symbol und ein Leerzeichen. Das Leerzeichen macht nun natürlich auch den hover-underline-Effekt mit und das sieht nicht so schön aus.

Als workaround faellt mir nur ein: Mach das Bild doch einfach ein paar Pixel laenger auf der rechten Seite, und lass den neun gewonnenen Platz durchsichtig. Anders gesagt: inkluiere das Leerzeichen in das Bild (Linkssymbol).

:o)

[stefan(klein geschrieben)]

moin,

Vor allen Links positioniere ich innerhalsb des <a href=...> ein Bild mit einem Symbol und ein Leerzeichen. Das Leerzeichen macht nun natürlich auch den hover-underline-Effekt mit und das sieht nicht so schön aus.

wenn das bild unbedingt auch verlinkt sein soll, fällt mir nur ein:
<a href="deinLink1.htm"><img....></a> <a href="deinLink1.htm">ich bin ein link</a>

ansonsten halt wie mein vorschreiber sagte(schrieb) bild größer und die stelle transparent.

gruß stefan

[Thomas Meinike]

Wenn ich jetzt extra für das Leerzeichen einen neuen Style ohne underline definiere, wird dieser nicht angewendet und Dreamweaver zeigt mir an: Style not available.

Setze nach dem Bild ein SPAN ein, welches im CSS diese Eigenschaften erhaelt:

a:hover SPAN.leer
{
Text-Decoration: none;
}

<A HREF="xyz.htm">Text<SPAN CLASS="leer"> </SPAN></A>

Dieser Link ohne Bild, aber mit einem Leerzeichen nach dem Text, zeigt das Prinzip. Bei Bedarf kannst Du noch mit der Farbe transparent experimentieren.

HTH & Gruss, Thomas

[Thomas Meinike]

Nachtrag:

<A HREF="xyz.htm">Text<SPAN CLASS="leer"> </SPAN></A>

Das sollte heissen:
<A HREF="xyz.htm">Text<SPAN CLASS="leer"> </SPAN></A>

MfG, Thomas