mehrfache class-vergabe ??

[C4T]

hi

habe vorhin in der suchfunktion zwar massig posts zu klassen gefunden, aber irgendwie habe ich nichts gefunden das mein problem löst.

folgendes problem.
ich habe eine externe css datei die auch wunderbar funktioniert.
darin sind auch links in einer bestimmten farbe definiert.
jetzt brauch ich aber bei diversen links eine andere farbformattierung.
nun wollte ich eine class vergeben, aber irgendwas stimmt da nicht.
weis nicht wo der fehler liegt.

die class definition habe ich in meine html datei gepackt.
das sieht so aus:

<style>
	.slink
	a:link {
		font-weight: bold;
		color: black;
		text-decoration: none;
	}
	a:visited {
		font-weight: bold;
		color: Gray;
		text-decoration: none;
	}
	a:hover {

		color: black;
		font-weight: bold;
		text-decoration: underline ;
	}
	a:active {
		font-weight: bold;
		color: black;
		text-decoration: none;
	}
</style>

das steht zwischen dem head und body bereich.
nun formattiert er mir aber alles in diesen style um. er übergeht quasi meine externe css datei. ich will aber lediglich diesen style da oben für nur eine klasse verwenden.

wie definiere ich denn das richtig ?
gruss
c4t

 

[SilentWarrior]

so geht's:

<style>
    a:link.slink {
        font-weight: bold;
        color: black;
        text-decoration: none;
    }
    a:visited.slink {
        font-weight: bold;
        color: Gray;
        text-decoration: none;
    }
    a:hover.slink {

        color: black;
        font-weight: bold;
        text-decoration: underline ;
    }
    a:active.slink {
        font-weight: bold;
        color: black;
        text-decoration: none;
    }
</style>

 

[C4T]

hmm funktioniert leider noch nicht.
es liegen 4 verlinkte texte in einem <td> .
dann muss ich doch dem <td> die class zuweisen, damit er mir die links eben so anpasst wie ich's will.
macht er aber nicht.
hier nochmal der quelltext.

<td height="50" bgcolor="#DEDEDE" class="slink"> 
            <div align="center"><a href="index.html">Home</a> | <a href="html/consulting.html">Consulting</a> | <a href="html/business.html">Business</a> | <a href="html/training.html">Training</a> | <a href="html/net.html">.net</a></div>
          </td>

 

[SilentWarrior]

ich würd's mal so probieren:

<td height="50" bgcolor="#DEDEDE">
<div align="center"><a href="index.html" class="slink">Home</a> |
<a href="html/consulting.html" class="slink">Consulting</a> |
<a href="html/business.html" class="slink">Business</a> |
<a href="html/training.html" class="slink">Training</a> |
<a href="html/net.html" class="slink">.net</a></div>
</td>

wüsste auch nicht, wie's anders geht.

 

[C4T]

super, so funktionierts.
vielen dank für den tipp.
man muss also quasi jeden link für sich bearbeiten.
hatte mir das leichter vorgestellt. dachte da die links ja eh im TD liegen, checkt er das automatisch.
anscheinend nicht.

gruss
c4t

 

[Marvin]

geht auch einfacher... Du lässt deinen Quellcode wie er vorher war, und änderst deine CSS Definitionen so um:

<style>
    .slink a:link, .slink a:active {
        font-weight: bold;
        color: black;
        text-decoration: none;
    }
    .slink a:visited {
        font-weight: bold;
        color: Gray;
        text-decoration: none;
    }
    .slink a:hover {
        color: black;
        font-weight: bold;
        text-decoration: underline ;
    }
</style>

Mit ".slink a:wasauchimmer" definierst die Eigenschaften aller Links innerhalb des Elementes dem die Klasse "slink" zugewiesen ist.
".slink a:link, .slink a:active { ...." bewirkt, dass die folgende Definition auf beides zutrifft, und da a:link und a:active ja gleich sind, kann man so auch code sparen.