Icon für <img> ausstellen?

[Daniel]

Hi,

ich habe folgendes Problem: ich habe kleine Icons für Links vorgesehen, die in folgender Form im Stylesheet definiert sind:

<pre>
a {
  font-family: Trebuchet MS,Verdana,Arial,Tahoma,sans-serif;
  color:       rgb(0,0,102);
  text-decoration: none;
  font-weight:   bold;
  border-bottom: 2px dotted;
  background: transparent url('/images/bookicon.gif') left top no-repeat;
  padding-left:19px;
}</pre>

Jetzt möchte ich natürlich nicht, dass bei Bildern auch immer das Icon erscheint, das zerstört ja das Layout. Also habe ich folgende Wege versucht, um nicht jedem Bild eine Klasse zuweisen zu müssen:

<pre>a img, img a {
  color: white;
  background:transparent url('/images/leer.gif') left top no-repeat;
}</pre>

• funktioniert aber auch nicht...

Jemand eine Idee, wie ich das Problem umgehen kann?

Herzlichen Dank!

Daniel

[MudGuard]

Hi,

Jetzt möchte ich natürlich nicht, dass bei Bildern auch immer das Icon erscheint, das zerstört ja das Layout. Also habe ich folgende Wege versucht, um nicht jedem Bild eine Klasse zuweisen zu müssen:

Das würde auch nicht viel helfen - Du mußt dem a-Element, das ein Bild enthält, die Klasse zuweisen.

<pre>a img, img a {

Der zweite Selektor "img a" ist im Zusammenhang mit HTML unsinnig - img-Elemente können keinen Inhalt haben, also auch keine a-Elemente enthalten.

Der erste Selektor wählt Bilder in a-Elementen aus - für diese setzt Du dann ein transparentes Hintergrundbild.
Das ändert aber nichts daran, daß das a-Element sein Hintergrundbild behält.

Du müßtest a-Elemente auswählen, die ein img-Element enthalten. Dies ist aber in CSS (1, 2, 2.1, 3) nicht vorgesehen.
Es ist nicht möglich, ein Element anhand von Nachfahren-Elementen auszuwählen.

Jemand eine Idee, wie ich das Problem umgehen kann?

Klasse für die a-Elemente, die ein Bild enthalten. Oder, falls die Bild-Links nur in bestimmten Bereichen (<div id="content">) vorkommen, in denen keine Text-Links enthalten sind, dann für a-Elemente in diesen Bereichen das Hintergrundbild auf none setzen, also sowas wie

#content a { background-image:none; }

cu,
Andreas

[Daniel]

Hi,

danke für die Hinweise - werde es so machen, dass ich die Definition wirklich auf den Text-Layer beziehe und ggfs. einzufügende Bilder mit einer bestimmten Klasse versehe. Schade eigentlich, dass es nicht einfacher geht!

Daniel

[Cheatah]

Hi,

Schade eigentlich, dass es nicht einfacher geht!

stimmt.

[x] Für die Selektoren "<", "<<" und ">>" statt " ".

Cheatah