Hyperlinks unterschiedlich formatieren

[Lachgummy]

Hallo Leute,

ich hab mir jetzt hier alle Beiträge dazu durchgelesen, aber entweder verstehe ich sie nicht oder es klappt meistens auch nicht...

Also zu meinem Problem:

Ich will auf einer Seite meine Links unterschiedlich formatieren. In der Menüleiste sollen sie Rot sein und sich beim Drüberfahren nicht verändern, in einer Tabelle sollen sie blau sein und beim Drüberfahren Unterstrichen werden, und im Text sollen sie schwarz sein und beim Drüberfahren schwarz unterstrichen werden.... So weit , so schlecht....

Ich hab bei CSS Stile alles ausprobiert was nur geht. Aber was ich auch ändere, immer wird diese Veränderung auf alle Links der Seite angewandt.

1.Frage: kann man a:hover nur einmal pro seite definieren ?
- anscheinden ja nicht, denn auf anderen seiten im internet klappt das ja.
Ich habe auch schon a.extra:hover angewandt aber auch hier verändert die Eigenschaft immer alle Links...


Zum leichteren Verständnis hab ich mir jetzt eine Probeseite gebastelt mit nur zwei Links. Link1 soll Rot und nicht unterstrichen sein und beim Drüberfahren soll er so bleiben - Link2 soll blau, nicht unterstrichen sein und beim Drüberfahren blau und unterstrichen werden...

Vielleicht könnt ihr mir Eure Lösung an diesem leichten Beispiel erklären. Vielen Dank im Voraus...

Lachgummy

[Lizzy99]

Du musst für verschiedenen Links in CSS verschiedenen Klassen definieren:

.a1:link {color: #FFFFFF; text-decoration: underline;}
.a1:visited {color: #C0C0C0; text-decoration: underline;}
.a1:hover {color: #FFFFFF; text-decoration:underline;}
.a1:active {color: #FFFFFF; text-decoration: underline;}

.a2:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; line-height: 16px; text-decoration: none; font-weight: bold;}
.a2:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; line-height: 16px; text-decoration: none; font-weight: bold;}
.a2:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; line-height: 16px; text-decoration:none; font-weight: bold;}
.a2:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; line-height: 16px; text-decoration: none; font-weight: bold;}

-> Dies sind jetzt zwar nicht die Farben/Attribute, die Du Dir vorstellst, aber ich gehe mal davon aus, dass Du das entsprechend selbst anpassen kannst. Die Reihenfolge link - visited - hover - active solltest Du nicht verändern, sonst kann es komische Effekte geben...
Im <a>-TAG gibst Du dann die jeweilige Klasse an, also <a class="a1" href="...">

Gruß
Lizzy

[Lachgummy]

Vielen Dank,

ich hab gerade deinen Tipp eingefügt und nach einigem Rumprokeln klappt es jetzt.

Vielleicht interessiert andere User was bei mir schief gelaufen ist:

In Dreamweaver gebe ich eigentlich nie HTML COde ein sondern arbeite mit den Arbeitsflächen usw.

Und da scheint bei CSS Stile irgendwas unschlüssig zu sein.
So kann man da Stile definieren (.name ect), aber wenn man da hover, link ect definieren will wird man auf den selector verwiesen. Bei diesem definiert man nun sein a:hover, aber anders als bei stile wird da kein Punkt vor dem a gesetzt.
Mir scheint das der Grund zu sein, warum bei den Defenitionen immer alle Links verändert wurden...

Ich hab jetzt einfach einen Stylesheet benannt und Deine (Lizzys) Tipp reinkopiert,bei dem -anders als es im Dreamwever Menü geschieht - ein Punkt jeweils vor dem a Tag steht,dann noch in meinem Sinne bei Bearbeiten die Attribute geändert und es klappt.

Vielen Dank

[Lizzy99]

Hm, wie man das mit Dreamweaver macht, habe ich auch nie herausgefunden...
Der Unterschied "mit Punkt" und "ohne Punkt" ist: ohne Punkt weist Du dem <a>-TAG Attribute zu, mit Punkt definierst Du Klassen, deshalb auch das class="..." im TAG.