Pseudoformate bei Grafik-Links

Status
Nicht offen für weitere Antworten.
hmm...Das scheint es nicht gewesen zu sein...also du meintest schon das background-color oder?...naja...habs auf jeden Fall mit beiden versucht, und in beiden Fällen war das Problem weiterhin da.
danke trotzdem!
gruss
 
Hier natürlich auch: :rolleyes:
HTML: 
a:hover {
    font-family:Verdana;
    font-size:10pt;
    color:#0000FF;
    text-decoration:none;
    background-color:#FFFFFF;
}
 
ja nein, das wollte ich nicht. Bei Textlinks wollte ich den weissen Hintergrund, einfach nicht bei Grafik-Links.
gruss
 
Dann musst du aber in der Klasse grafik eine explizite Hintergrundfarbe angeben, sonst wird das logischerweise auch für die Bilder übernommen.
 
Ok, habs geschafft! Wenn jemand wissen will, wie-->meldet euch! (Kann es mir zwar nicht vorstellen;-))

danke sehr
gruss
 
Hallo zusammen,

da sich Spescha offensichtlich mit seiner Antwort schwer tut, möchte ich mal alles ganz oberschlau zusammenfassen:

Normalerweise wird die Hintergrundfarbe nicht vererbt. Hier geht es aber darum, dass Text und IMG-Elemente (alles Inline-Elemente) über die Pseudoklasse "hover" eines Verweises (a-Tags) ein weisser Hintergrund zugewiesen wird. Die Grafik selbst hat einen transparenten Hintergrund (Initialwert) und liegt offensichtlich vor dem durchgängigen Zeilenhintergrund des Verweises. Das wird deutlich, wenn man innerhalb des Verweises Text und Grafik kombiniert.

Wenn nun die IMG-Elemente eine andere Hintergrundfarbe haben sollen, dann kann man natürlich diese Hintergrundfarbe den IMG-Elementen direkt zuweisen. Allerdings ergibt sich browserabhängig und in Abhängigkeit von der Grafik- bzw. Zeilenhöhe ein unterer weisser Rand, so dass es sicherlich besser ist für separate grafische Verweise den Hintergrund entweder durch das Style-Attribut (z.B. style="background-color:transparent;") oder durch eine Klasse neu festzulegen:
HTML: 
<html>
<head>
<!-- Quelle:
http://www.tutorials.de/forum/showthread.php?t=179254&page=2&pp=20
bzw.
http://tittlifotos.ti.funpic.de/problem/smileys.php
-->
<title>Pseudoformate bei Grafik-Links</title>
<style type="text/css">
<!--
body {
background-color: navy;
font-family: Verdana, sans-serif;
font-size: 10pt;
color: white;
}
a {
font-family: Verdana, sans-serif;
font-size: 10pt;
color: white;
}
a:link, a:visited {
text-decoration: underline;
}
a:hover, a:active {
color: blue;
background-color: white;
text-decoration: none;
}
/* Hier den weissen Hintergrund der hover-Pseudoklasse löschen:
--------------------------------------------------------------- */
a.grafik:hover, a.grafik:active {
background-color: transparent;
}
img {
border: none;
/* background-color: navy;
Hier entweder den Initialwert "transparent" belassen
oder gleiche Hintergrundfarbe wie im BODY festlegen.
*/
}
-->
</style>
</head>
<body>
<dl><dt>Spescha:</dt>
<dd>
also das hier ist das Problem.
Wenn ich hier mit der maus &uuml;ber die smileys
fahre, dann erscheint der Hintergrund weiss.
Was kann ich dagegen tun? danke!
</dd></dl>
<p>[<a href="#">
Klassenloser Verweis (Textverweis)
<img src="smileys/regular_smile.gif" style="width:15px;height:15px;"
		alt="regular_smile" />
</a>]</p>
<p>[<a href="#" class="grafik">
Verweis mit dem Klassennamen &quot;grafik&quot;
<img src="smileys/lach.gif" style="width:15px;height:15px;"
		alt="lach" />
</a>]</p>
<p>[<a href="#" class="a.grafik">
Verweis mit dem (falschen) Klassennamen &quot;a.grafik&quot;
<img src="smileys/ueberascht.gif" style="width:15px;height:15px;"
	 alt="ueberascht" />
</a>]</p>
<p>Und so sollte es offensichtlich aussehen:
[<a href="#"> Textverweis </a>]
[<a href="#" class="grafik">
<img src="smileys/wink.gif" style="width:25px;height:29px;"
	 alt="wink" />
</a>]</p>
</body>
</html>
Normalerweise reicht es, wenn man für den grafischen Verweis in der Stylesheet-Klasse
Code: 
a.grafik {background-color:transparent;}
formuliert, aber der IE will es genau in den entsprechenden Pseudoklassen haben.

Die Beispieldatei zeigt auch, dass es nicht möglich ist die Stylesheet-Klasse "grafik" in den HTML-Attributen unter dem Namen "a.grafik" aufzurufen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück