nicht angemeldet
<html>
<head>
<title>Beispiel</title>
<style type="text/css">
<!--
/*Link allgemein, (Farbe) Angaben, die für ALLE Links gelten sollen*/
a:link{
background-color:#000000;
color:#FFFFFF
background-repeat: no-repeat;
}
a:visited{
background-color:#333333;
color:#cccccc
background-repeat: no-repeat;
}
a:hover{
background-color:#FF0000;
color:#00FFFF
background-repeat: no-repeat;
}
/*Buttons (jeder Button bekommt eine eigene Klasse
/* der Punkt zeigt eine Klasse (letztlich ein <tag> )
in dem sich der Link befindet */
.button1 a:link{
background-image: url(../img/Rechteck1h.png);
}
.button1 a:visited{
background-image: url(../img/Rechteck1v.png);
}
.button1 a:hover{
background-image: url(../img/Rechteck1h.png);
}
a:hover{
background-color:#FF0000;
color:#00FFFF
background-repeat: no-repeat;
}
/*Buttons*/
.button2 a:link{
background-image: url(../img/Rechteck2h.png);
}
.button2 a:visited{
background-image: url(../img/Rechteck2v.png);
}
.button2 a:hover{
background-image: url(../img/Rechteck2h.png);
}
-->
</style>
</head>
<body>
<div class="button1"><a href="../index.html">Inhalt</a></div>
<div class="button2"><a href="../index.html">Inhalt</a></div>
</body>
</html>
Ob du die Links jetzt in einem <div> oder in einem <span> oder in einem <li> oder in einem <p>-Tag verschachtelst bleibt dir überlassen.
Natürlich kannst du auch nur den a:link a:visited mit dem gleichen Bild hinterlegen, und für a:hover allen Buttons das gleiche Bild hinterlegen oder aber nur die Schrift, den Rahmen oder sonst was ändern. Aber es sollten alle drei Formen a:link, a:visited und a:hover in genau der Reihenfolge auftauchen. Zur Not alle mit den gleichen Angaben. Dann hat man die wenigsten Probleme mit den verschiedenen Browsern.
Ich hoffe das hilft dir weiter.