Hover Button Funktionieren nicht richtig

[Seniorenzivi]

Hallo folgendes Problem:

Wenn ich einen Link erstelle, aber noch kein Verlinkung anwende wird der Hover Effekt dargestellt, wenn ich jetzt allerdings einen Link erstelle verschwindet wird das geänderte Hintegrundbild nicht dargestellt, aber die anderen Formatierungen übernommen.

Hier der Code:

zuerst der CSS Datei:

a#men:hover          { color: #000; font-size: 12px; font-family: verdana; font-weight: bold; line-height: 20px; text-decoration: none; background-image: url(../images/hover4.gif); display: table-cell; padding-left: 30px; width: 150px }
a#men       { color: #000; font-size: 12px; font-family: verdana; line-height: 20px; text-decoration: none; background-image: url(../images/normal2.gif); display: table-cell; padding-left: 30px; width: 150px }
a#men:visited        { color: #000; font-size: 12px; font-family: verdana; line-height: 20px; text-decoration: none; background-image: url(../images/normal2.gif); display: table-cell; padding-left: 30px; width: 150px }
a#men:active        { color: #000; font-size: 12px; font-family: verdana; line-height: 20px; text-decoration: none; background-image: url(../images/normal2.gif); display: table-cell; padding-left: 30px; width: 150px }

jetzt vom einem unformatierten Link

<a id="men" href="(EmptyReference!)">Men&uuml;punkt</a>

und von einem verlinkten Link

<a id="men" href="../linkvorlage/test.php">Test</a>

Danke für eure Hilfe

 

[mh1001]

Hallo,

zuerst einmal solltest du die entsprechenden Eigenschaften in folgender Reichenfolge definieren:

a:link
a:visited
a:hover
a:active
a:focus

Um Quellcode zu sparen, kannst du gleichbleibende Eigenschaften gleich direkt dem Link zuweisen, statt diese für jedes Stadium seperat zu definieren.
Ein Hintergrundbildwechsel ist so nicht ohne weiteres möglich.
Alternativ kannst du jedoch einfach die verschiedenen Hintergrundbilder zusammenfassen und aneinander hängen und dann je nach Status dieses entsprechend verschieben.
Eine weitere Alternative, sofern obiges nicht möglich ist, stellt die Verwendung von JavaScript dar.

MfG mh1001

 

[Seniorenzivi]

das Problem scheint zu sein, das besuchte Links nicht wieder als Hover Buttons gesehen werden, und nur die "vistited" Formatierung bekommen. Gibt es irgend einen Trick das zu umgehen?

 

[mh1001]

Wie gesagt musst du dabei auch die Reihenfolge der Definitionen beachten. Wenn du a:visited nach a:hover definierst wird a:hover bei als besucht gekennzeichneten Links immer ignoriert (zumindest von allen standardkonformen Browsern ).

Daneben solltest du noch das "display: table-cell;" gegen ein "display: block;" oder eine andere deinem Anwendungsbereich equivalente Alternative ersetzen, da dieses Attribut die ganze Internet-Explorer-Reihe mal wieder nicht interpretiert.

MfG mh1001

 

[Seniorenzivi]

wenn ich table-cell rausmache, dann funzt das Menü im Fire Fox wieder nicht richtig....

Hab jetzt mal die Anordnung geändert: es hat sich im Internet Explorer nichts geändert, aber im FireFox funzt es einmandfrei.....(IE is hallt Microschrott....)

Ich glaub ich lass das jetzt so stört nicht allzu sehr, danke für deine Hilfe