Hyperlink

[stefan]

Hi,

kurze Frage an die Experten.
Ich würde gerne einen Link unter- und überstrichen machen.

a:hover { color:#DFE6F0; text-decoration:underline; text-decoration: overline; }

so funktioniert das leider nicht

könntet ihr mir helfen?

[dennisb]

Hallo,

kurze Frage an die Experten.
Ich würde gerne einen Link unter- und überstrichen machen.

könntet ihr mir helfen?

Ja man kann auch ein wenig Tricksen.
Probiere mal:

  
a {text-decoration:none;}  
a:hover { color:#DFE6F0; border-bottom:1px solid #000000; border-top:1px solid #000000; }  

Schönen Tag noch!

[RuD]

Seid gegrüßt!

Hallo,

kurze Frage an die Experten.
Ich würde gerne einen Link unter- und überstrichen machen.

könntet ihr mir helfen?

Oder eben so:

HTML:

  
<a href=".." style="text-decoration:underline;">Linktext</a>  

CSS:

  
a {text-decoration:overline;}  

[Gunnar Bittersmann]

Hello out there!

HTML:
<a href=".." style="text-decoration:underline;">Linktext</a>

CSS:
a {text-decoration:overline;}

Getestet hast du das aber nicht?! Geht so nämlich nicht. Kann auch nicht.

Das ist so ziemlich dasselbe* wie

HTML:
<a href=".." id="foo">Linktext</a>

CSS:

a {text-decoration:overline;}  
#foo {text-decoration:underline;}

Der Selektor '#foo' hat eine höhere Spezifität als 'a', folglich wird für das Element mi der ID 'foo' die 'text-decoration'-Eigenschaft überschrieben;  sie hat dann den Wert 'underline', nicht beides.

See ya up the road,
Gunnar

* nur dass die Variante ohne style-Attribut Markup und Darstellungsangaben sauber trennt und deshalb vorzuziehen ist.

[RuD]

Seid gegrüßt!

Hello out there!

HTML:
<a href=".." style="text-decoration:underline;">Linktext</a>

CSS:
a {text-decoration:overline;}

Getestet hast du das aber nicht?! Geht so nämlich nicht. Kann auch nicht.

Das ist so ziemlich dasselbe* wie

HTML:
<a href=".." id="foo">Linktext</a>

CSS:

a {text-decoration:overline;}

#foo {text-decoration:underline;}

>   
> Der Selektor '#foo' hat eine höhere Spezifität als 'a', folglich wird für das Element mi der ID 'foo' die 'text-decoration'-Eigenschaft überschrieben;  sie hat dann den Wert 'underline', nicht beides.  

Dann is das ein Bug, funktioniert schon. Allerdings nur im IE 4.\* getestet.  
  

-- 
Bis Später  
    ![](http://www.rudweb.de/RuD.gif)  
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_  
  
[[Testversion meiner Seite](http://www.rudweb.de/test2)] [[Zwei unterwegs in Australien](http://www.planlosontour.de.vu)]  

[RuD]

Seid gegrüßt!

Sorry kompletter Irrsinn. Ich meinte etwas anderes und zwar:
...
<style>
 a:text-decoration:overline;
</style>
<link rel="stylesheet" type="text/css" href="style.css">
...

und dann in der sytel.css
 a:text-decoration:undeline;

[Gunnar Bittersmann]

Hello out there!

Sorry kompletter Irrsinn. Ich meinte etwas anderes und zwar:
...
<style>
a:text-decoration:overline;
</style>
<link rel="stylesheet" type="text/css" href="style.css">
...

und dann in der sytel.css
a:text-decoration:undeline;

Selbst bei richtiger Schreibweise ;-) gilt dann nur eine Angabe. Bei gleicher Spezifität der Selektoren die letztere.

See ya up the road,
Gunnar

[RuD]

Seid gegrüßt!

OK, ich lass mich gerne eines besseren belehren, aber so habe ich das in der "Schule" damals noch bei "Einführung in CSS" gelernt.

Aber ihr habt recht, ich bevorzuge ebenfalls die border-top/-bottom - Methode, zumal die Farben der Linien auch bearbeitbar sind.

Also viel Geschwätz um wenig Inhalt, SORRY! Sollte das widererwartend nochmal vorkommen, so bitte ich um kurzen Hinweis ;-)

Bis Später
    
________________________________________________________________

[Testversion meiner Seite] [Zwei unterwegs in Australien]

[Længlich]

Hyvää päivää!

a:hover { color:#DFE6F0; text-decoration:underline; text-decoration: overline; }

So überschreibt die Angabe »overline« die Angabe »underline«. Du siehst also nur die obere Linie, richtig?
Du mußt beides zusammen angeben:

text-decoration:underline overline;

Viele Grüße vom Længlich

[stefan]

Vielen Dank für eure Mühen.

Ich hab jetzt diese Variante genommen -->
text-decoration:underline overline;

ist am saubersten ;)
obwohl die anderen auch nice waren :)

Danke
Stefan