a:link ?!

Hallo

Aso ich hab momentan ein kleines Problem im meiner Navigation, auf meiner (Web)site. ich habe zwei Buttonvorlagen entworfen, einen unangeklickten und einen angeklickten Button.Nun will ich über diese Buttonvorlage den Text darüber legen lassen. Wenn man auf einen Button klickt soll sich der Buttonhintergrund (vom unangeklickten zum angeklickten Button) ändern.

Button in der HTML Datei:

HTML:

<div id="unbutton"><a href="index2.html">ZK-Clan</a></div>

CSS Code

Code:

#unbutton {
  width: 164px;
  height: 25px;
  background-image: url(../pic/unbutton.bmp);
}

a:link { font-size:8pt; color:#ed7518; text-decoration:none; font-family: Arial; }
a:visited { font-size:8pt; color:#ed7518; text-decoration:none; font-family: Tahoma; }
a:focus { background-image: url(../pic/anbutton.bmp); font-size:8pt; font-weight: bold; color:#f25b18; text-decoration:none; font-family: Arial; }
a:hover { font-size:8pt; font-weight: bold; color:#f25b18; text-decoration:none; font-family: Arial; }
a:active { font-size:8pt; color:#f25b18; text-decoration:none; font-family: Arial; }

Leider wird es nicht so angezeigt wie ich will. Also der Text liegt über dem
Buttonhintergrund, nur wird dieser nicht so wirklich gewechselt wenn man drauf klickt.

Was muss ich noch verändern damit das geht?

Danke im Voraus für eure Antworten.

MfG

olaH

PS: SELFHTML is nee sehr gute Seite, aber ich hab nix gefunden was mir helfen könnte.

 

mit a:focus formatiert man Anker, wenn diese mit der Tastatur angesprungen werden. In deinem Fall müßtest du die Formatierungen in a:active reinschmeißen, dieser ist für angeklickte Anker zuständig.

Ps.: Hier mal der Link zu Selfhtml, wo es steht:
http://de.selfhtml.org/html/verweise/definieren.htm#gestalten

 

ok
,das beantwortet meine Frage aber nur teilweise. Denn das Hintergrundbild
welches zusehen sein soll, wenn man auf den Button draufgeklickt hat is nur
im Bereich des Textes zu sehen, nicht aber über die ganze Buttongröße.

So sieht es aus:
View attachment $Bild.bmp

Was kann ich da machen?

helft mir.

 

...ich würde das div durch ein a {display:block;} ersetzen. Ansonsten bekommst du den Hintergrund des divs nur per JavaScript-Eventhandler geändert.