✔ Unterschiedliche Farbe für verlinkten Text

D

diogenuss

Mitglied
Guten Tag aus Lanzarote,

ich möchte innerhalb einer Tabelle ein paar Textstücke mit diversen links versehen
und habe einen entsprechenden css-Stil angelegt für den mouseover und die Farbe eines hyperlinks.
Nun sind allerdings drei "Überschriften" dabei, die auch auf andere Seiten verlinken, jedoch anfänglich eine andere Farbe haben sollen,
eben um sie als Überschriften zu kennzeichnen.
Da ich das Attribut a in meinem stylesheet definiert habe, besitzen jedoch alle Texte, die als links identifiziert werden, dieselbe Farbe,
obwohl ich den Überschriften einen eigenen Stil ("textkleinlinksrot") zugewiesen habe. Der Stil für die links ("a") setzt sich wohl darüber hinweg?!

hier der relevante Auszug aus dem CSS:
CSS: 
.textkleinlinks{ 
	color: #030; 
	font-size: 10pt; 
	text-align: left; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
 }
 
 .textkleinlinksrot{ 
	color: #CC0000; 
	font-size: 10pt; 
	text-align: left; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
 }
		
.textnormalcenter { 
	color: #030; 
	font-size: 12pt; 
	text-align: center; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
 }
	
a			{
 	color: #003300;
 	font-family: Verdana, Arial, Helvetica, sans-serif; 
 	text-decoration: none
	}

a:hover, a:visited			{
	color: #0033CC; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	text-decoration: none
	}	
a:active			{
	color: #0033CC; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	text-decoration: none
	}	
	
.ueberschriftrot { 
	color: #CC0000; 
	font-size: 11pt; 
	text-align: left; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-weight: 600; }

Die im Rohbau befindliche Seite befindet sich hier:

http://www.cyberculture.de/Psychologisches Forum Neu/index.html

Probehalber habe ich im linken Navigationsblock zwei Elemente mit hyperlinks versehen:
"individuell" und "sport-psychologie"

und der Überbegriff "individuell" möge eben auch in rot erscheinen so wie die weiteren Überbegriffe weiter unten "in der Gruppe" usw.
und nicht in meinem als Standard definierten olivgruen erscheinen (wie richtigerweise bei "sport-psychologie").

Vermutlich ist dies lösbar, wenn ich direkt vor dem betreffenden Textstück eine einzelne Definition in den .html-code einfüge?

Mit sonnigen Grüssen aus Lanzarote und in der Hoffnung auf etwas Hilfe beim korrekten code!

ketama gold
 
Zuletzt bearbeitet von einem Moderator:
Hi,

da hat wohl jemand nicht zuvor hier im CSS-Forum in meinen "Sticky-Thread" geschaut.

Maik hat gesagt.:
4. Wie können Links in einer Seite unterschiedliche Schriftfarben erhalten?
Zum Vergrößern anklicken....

diogenuss hat gesagt.:
Die im Rohbau befindliche Seite befindet sich hier:

http://www.cyberculture.de/Psychologisches Forum Neu/index.html
Zum Vergrößern anklicken....
Leider nein.

Not Found

The requested URL /Psychologisches was not found on this server.
Zum Vergrößern anklicken....

Und via http://www.cyberculture.de/ finde ich keinen Link zu dem Forum.

mfg Maik
 
Tja, da wird sich in dem URL wohl ein Wortschnipsel verstecken, den unser Forensystem herausfiltert ;-)

mfg Maik
 
Nochmals Hallo -

ja. die FAQ ist mir, trotz EIngabe diverser Suchbegriffe, durch die Lappen gegangen.
Asche auf mein Haupt.

Dennoch für alle die es lesen wollen oder müssen, hier die Lösung, die ich dank der Anleitung
von Maik schnell realisieren konnte:

Im CSS für meinen roten Text jenseits des Normalen eine zusätzliche Klasse für den link ("a") definiert:
Code: 
 .textkleinlinksrot{ 
	color: #CC0000; 
	font-size: 10pt; 
	text-align: left; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
 }
 
  a.textkleinlinksrot:{ 
	color: #CC0000; 
	font-size: 10pt; 
	text-align: left; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
 }

...und im <body> die entsprechende Textstelle zusätzlich mit der Angabe der Klasse versehen:
Code: 
<div class="textkleinlinksrot">
<a title="psychologisches forum firma und beruf" href="firma.html" class="textkleinlinksrot" target="_self">
In Firma und Beruf</a></div>

Ich danke für die schnelle HIlfe zur Selbsthilfe! :)

don d.

Ich schliesse das Thema noch nicht, falls meine Lösung Macken hat, die andere mir so nicht nachmachen sollen... ;-)
 
Zuletzt bearbeitet von einem Moderator:
diogenuss hat gesagt.:
Code: 
  a.textkleinlinksrot:{ 
	color: #CC0000; 
	font-size: 10pt; 
	text-align: left; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
 }




Ich schliesse das Thema noch nicht, falls meine Lösung Macken hat, die andere mir so nicht nachmachen sollen... ;-)
Zum Vergrößern anklicken....
Jo, den Doppelpunkt nach dem Klassennamen.

Übrigens lassen sich die beiden Selektoren gruppieren, sofern der erste noch benötigt wird ;-)
CSS: 
 .textkleinlinksrot,  a.textkleinlinksrot{ 
	color: #CC0000; 
	font-size: 10pt; 
	text-align: left; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
 }

mfg Maik
 
*grins*
Hat aber dennoch geklappt,
wie kann denn DAS sein?

Maik hat gesagt.:
J

Übrigens lassen sich die beiden Selektoren gruppieren, sofern der erste noch benötigt wird ;-)
CSS: 
 .textkleinlinksrot,  a.textkleinlinksrot{ 
	color: #CC0000; 
	font-size: 10pt; 
	text-align: left; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
 }
Zum Vergrößern anklicken....

Prima. Noch eleganter.
VIelen Dank.
Ich schliesse!
Und falls ein Urlaub auf Lanzarote geplant ist, bitte Bescheid sagen, dann gibts ein Dankeschön vor Ort.

http://www.magic-lanzarote.net

Diogenuss
 
diogenuss hat gesagt.:
*grins*
Hat aber dennoch geklappt,
wie kann denn DAS sein?
Zum Vergrößern anklicken....
Weiß ich nicht, bei mir klappt damit garnüscht :-)

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-03-03" />

<title>tutorials.de</title>

<style type="text/css">
/* <![CDATA[ */
a.textkleinlinksrot:{
        color: #CC0000;
        font-size: 30pt;
        text-align: left;
        font-family: Verdana, Arial, Helvetica, sans-serif;
 }
/* ]]> */
</style>

</head>
<body>

<p><a href="#" class="textkleinlinksrot">test</a></p>

</body>
</html>


Außer man hängt die Pseudoklassen hinten an:
CSS: 
a.textkleinlinksrot:link,a.textkleinlinksrot:visited{
        color: #CC0000;
        font-size: 30pt;
        text-align: left;
        font-family: Verdana, Arial, Helvetica, sans-serif;
 }

mfg Maik
 
Kapiert, daher stammte auch der Doppelpunkt, da ich später die Pseudoklasse rausnahm, nicht aber den Punkt.
Geklappt hatte es dennoch! *kopfschüttel*

Nun habe ich den Schlawiner entfernt und es geht immernoch.

Der Tag nimmt ein gutes Ende!

Danke nochmals.

D.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück