Problem mit CSS und Grafiken

[Rigo]

Hallo.

Habe ein Problem: Ich habe mittels CSS Links formatiert, und zwar so:

a:link 				{ color:#F00; text-decoration:none } 
a:visited			{ color:#FFF; text-decoration:none } 
a:active 			{ color:#FFF; text-decoration:none } 
a:hover 			{ color:#FFF; border-top:solid 1px #FFF; border-bottom:solid 1px #FFF; }

Leider wird der hover effeckt auch auf Grafiken meiner Navigation übertragen. Somit habe ich dort unten auch einen unterstrich, was doof aussieht.

Versucht habe ich nun folgendes:

.navimg				{ text-decoration: none; }
.navimg a:link,
.navimg a:visited, 
.navimg a:active,
.navimg a:hover		{ text-decoration: none; }

Die Grafik sieht nun so aus:

<img class="navimg" src="img/hofcam.gif" width="73" height="26" alt="" border="0">

Allerdings will das nicht so recht klappen, ich vermute einfach ich mach da was nicht richtig (bin nicht so der css freak )

[em-!x]

a.navlink:hover { ... }

und so?

[Rigo]

Danke für die schnelle Antwort, aber auch so funktioniert das leider nicht, immernoch der dumme Hover effeckt...

[em-!x]

Scheinbar weil du genauso schlecht abgeschrieben hast wie ich

[Rigo]

Wieso? Also ich habe das "navlink" schon in "navimg" geändert, das war mir schon aufgefallen

[derHund]

OffTopic:

---

ihr macht sachen

---

.navimg a:hover

wird wohl nicht greifen, immerhin ist die struktur ja ... a navimg ... oder nicht?

spontan fällt mir nix besseres ein,

<a class="navi" href=""><img /></a>

a.navi {
  yours_here;
}
a.navi img {
  again;
}

[Rigo]

Danke, habs mal so geändert, leider auch ohne erfolg.

Dabei muss ich noch sagen: Im IE hab ich das Problem garnicht, da wird bei den Grafiken kein Hover angezeigt, im Firefox allerdings schon

[sebyz]

Probier mal so:

.linknavi a:link { color:#F00; text-decoration:none }
.linknavi a:visited { color:#FFF; text-decoration:none }
.linknavi a:active { color:#FFF; text-decoration:none }
.linknavi a:hover { color:#FFF; border-top:solid 1px #FFF; border-bottom:solid 1px #FFF; }

Jetzt muss du nach die formatierungen für die Standartlinks entfernen.
Also die für
a:link
a:visited
a:active
a:hover.

Jetzt würde ein link in deiner Navigation so aussehen:
<div class="linknavi"><a href="index.php">TEXT</a></div>

Gruss SebyZ

[Rigo]

Dieser Code:

a:link 				{ color:#F00; text-decoration:none } 
a:visited			{ color:#FFF; text-decoration:none } 
a:active 			{ color:#FFF; text-decoration:none } 
a:hover 			{ color:#FFF; border-top:solid 1px #FFF; border-bottom:solid 1px #FFF; }

ist allerdings nicht für die Navigation zuständig, sondern für den Kompletten Text der Homepage.

Und die Navigation besteht aus Grafiken...

[sebyz]

Achso, sorry... hab etwas zu "schnell" gelesem
Dann wäre der richtige Code so:

.linknavi a:link	{text-decoration:none } 
.linknavi a:visited	{ text-decoration:none } 
.linknavi a:active	{ text-decoration:none } 
.linknavi a:hover	{ text-decoration:none } 

a:link 		{ color:#F00; text-decoration:none } 
a:visited	{ color:#FFF; text-decoration:none } 
a:active 	{ color:#FFF; text-decoration:none } 
a:hover 	{ color:#FFF; border-top:solid 1px #FFF; border-bottom:solid 1px #FFF; }

Link in der Navi

<div class="linknavi"><a href="index.php"><src="bild.jpg" width="xx" height="xx"></a></div>

[derHund]

Danke, habs mal so geändert, leider auch ohne erfolg.

klar geht das! du mußt natürlich in den a.navi die globale formatierung wieder aufheben ...

darum: formatier das globale a neutral, ... also so, daß du jedes andere a einigermaßen davon ableiten kannst ... und schreib dir für sonderfälle ne eigene def ...

[Rigo]

Hmm, das mit dem DIV will auch nicht klappen.

@derHund: Sorry, weiss leider nicht wie du das meinst.

Der einfacherkeitshalber habe ich die Dateien mal kurz angehängt. Das Problem bezieht sich wie gesagt NUR auf Firefox, im IE wird der hover effekt auf den Grafiken ohnehin nicht angewendet.

Und das globale:

a:link 				{ color:#F00; text-decoration:none } 
a:visited			{ color:#FFF; text-decoration:none } 
a:active 			{ color:#FFF; text-decoration:none } 
a:hover 			{ color:#FFF; border-top:solid 1px #FFF; border-bottom:solid 1px #FFF; }

sollte schon bestehen bleiben

Vielleicht hat ja jemand eine Funktionierende Lösung, so das auch der oben genannte globale Link kram bestehen bleiben kann.

[derHund]

@derHund: Sorry, weiss leider nicht wie du das meinst.

du mußt _alle_ formatierungen, die du für das globale a festgelegt hast, in den speziellen bereichen wieder aufheben ... sofern du sie dort nicht haben möchtest ... wenn du dich also an den beiden bordern störst, mußt du sie für das a, welches img enthält, auf 0 setzen ...

[Rigo]

Dankeschön, wieder was gelernt Funktioniert Super!