[GastForen Web allgemein HTML und CSS / Stylesheets CSS: Wie kann ein Link in einer Klasse definiert werden?

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

CSS: Wie kann ein Link in einer Klasse definiert werden?

Corinne
Beiträge gesamt: 111

10. Aug 2004, 15:08
Beitrag # 1 von 7
Bewertung:
(4262 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo...

Ich habe folgendes Problem...ich möchte die Links auf meiner Website verschieden formatieren, das heisst die Links in der Navigation sollen anders aussehen als diejenigen im Text.

Kann ich das mit Klassen lösen? Und wie kann ich die Links innerhalb einer Klasse definieren? Ich kenne nur diese Variante Links zu definieren (diese kann ich jedoch nicht einfach einer Klasse unterstellen):

a:link
{
}


Vielen Dank schon in Voraus für eure Hilfe

Greez
Corinne
X

CSS: Wie kann ein Link in einer Klasse definiert werden?

Voegie
Beiträge gesamt: 104

10. Aug 2004, 16:42
Beitrag # 2 von 7
Beitrag ID: #102124
Bewertung:
(4262 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
mach dir einfach verschiedene klassen und gib die dann einfach an die links wo du sie haben willst, die class-Anweisung in den open-TAG des Links rein, dann gehts, kuck mal hier

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Dein Titel</title>
<style type="text/css">
<!--
.hauptmenu {
color: #0033CC;
font-size: 18px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}
.footerlink {
color: #CCCCCC;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}
.textlink {
color: #666666;
font-family: Arial, Helvetica, sans-serif;
}
-->
</style>
</head>

<body>
<p><a href="#" class="hauptmenu">Hauptmen&uuml;</a></p>
<p><a href="#" class="textlink">Textlink</a></p>
<p><a href="#" class="footerlink">Footerlink</a></p>
</body>
</html>

mfg, der Voegie


als Antwort auf: [#102095]

CSS: Wie kann ein Link in einer Klasse definiert werden?

Corinne
Beiträge gesamt: 111

10. Aug 2004, 16:48
Beitrag # 3 von 7
Beitrag ID: #102126
Bewertung:
(4262 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Voegie

Vielen Dank für deine Hilfe...ich habe da jedoch noch ein Problem...wie kann ich denn so ein hover oder activ Effekt einfügen?

Greez
Corinne


als Antwort auf: [#102095]

CSS: Wie kann ein Link in einer Klasse definiert werden?

Voegie
Beiträge gesamt: 104

10. Aug 2004, 16:56
Beitrag # 4 von 7
Beitrag ID: #102129
Bewertung:
(4262 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Einfach den Stil duplizieren und „:hover“ dahinterschreiben, dann gehts, ob das mit den active auch geht weis ich gar nicht, kannst ja mal ausprobieren, ... bis denne

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Dein Titel</title>
<style type="text/css">
<!--
.hauptmenu {
color: #0033CC;
font-size: 18px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}
.hauptmenu:hover {
color: #000000;
font-size: 18px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.footerlink {
color: #CCCCCC;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}
.footerlink:hover {
color: #333333;
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
}
.textlink {
color: #666666;
font-family: Arial, Helvetica, sans-serif;
}
.textlink:hover {
color: #CC0000;
font-family: Arial, Helvetica, sans-serif;
}
-->
</style>
</head>

<body>
<p><a href="#" class="hauptmenu">Hauptmen&uuml;</a></p>
<p><a href="#" class="textlink">Textlink</a></p>
<p><a href="#" class="footerlink">Footerlink</a></p>
</body>
</html>


als Antwort auf: [#102095]

CSS: Wie kann ein Link in einer Klasse definiert werden?

Voegie
Beiträge gesamt: 104

10. Aug 2004, 16:59
Beitrag # 5 von 7
Beitrag ID: #102130
Bewertung:
(4262 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
ja, „:active“ geht auch, siehe .textlink:active

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Dein Titel</title>
<style type="text/css">
<!--
.hauptmenu {
color: #0033CC;
font-size: 18px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}
.hauptmenu:hover {
color: #000000;
font-size: 18px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.footerlink {
color: #CCCCCC;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}
.footerlink:hover {
color: #333333;
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
}
.textlink {
color: #666666;
font-family: Arial, Helvetica, sans-serif;
}
.textlink:hover {
color: #CC0000;
font-family: Arial, Helvetica, sans-serif;
}
.textlink:active {
color: #FF0000;
font-family: Arial, Helvetica, sans-serif;
}
-->
</style>
</head>

<body>
<p><a href="#" class="hauptmenu">Hauptmen&uuml;</a></p>
<p><a href="#" class="textlink">Textlink</a></p>
<p><a href="#" class="footerlink">Footerlink</a></p>
</body>
</html>


als Antwort auf: [#102095]

CSS: Wie kann ein Link in einer Klasse definiert werden?

Corinne
Beiträge gesamt: 111

11. Aug 2004, 08:07
Beitrag # 6 von 7
Beitrag ID: #102207
Bewertung:
(4262 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
a cool...danke...probiers gleich mal aus :-)


als Antwort auf: [#102095]

CSS: Wie kann ein Link in einer Klasse definiert werden?

loethelm
Beiträge gesamt: 6029

13. Aug 2004, 10:59
Beitrag # 7 von 7
Beitrag ID: #102771
Bewertung:
(4262 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hi Corinne,

noch eleganter gehts auch, indem du eine Klasse für die navileiste erstellst, also .navi und dann ".navi a:link" , ".navi a:hover", ".navi a:active" etc. Dann ".text" und ".text a:link" etc. Dann nur dem navi Bereich die Klasse navi zuweisen und dem Textbereich die Klaqsse Text. Die links erkennt er dann ja automatisch. Das erpart die die Klassenzuweiserei bei Links.

Grüße

Loethelm


als Antwort auf: [#102095]
X