Verlinkte Grafiken anders als verlinkte Texte - ohne Klassen

[webconstructor]

Hallo zusammen,

Habe jetzt schon den ganzen Nachmittag damit verbracht zu versuchen Links mit Bilder, anders als Links ohne Bilder (nur Text) darzustellen.

Verlinkte Texte sollen eine Hintergrundgrafik haben (in meinem Fall ein Pfeil) und ein Padding-Left. Bilder (im gleichen DIV) sollen aber keine Hintergrundgrafik und auch keinen Padding haben. Und das alles ohne Klassen, da ich den Links der Grafik keine Klasse zuweisen kann, da diese vom CMS erstellt werden.

Ich habe mein Problem auf das Minimalste reduziert mit 8 Variationen, welche aber anscheinend alle nicht funktionieren.

Hier der Link zur Testseite:

http://www.webconstruction.ch/tests/test.html

Hier der CSS-Code:

Code: Alles auswählen

.Inhalt a, .Inhalt a:hover, .Inhalt a.hover, .Inhalt a:link, .Inhalt a:visited, .Inhalt a.visited
{
  text-decoration:none;
  color: #777;
  padding-left:10px;
  background:url(test_files/link.gif) no-repeat left center;
}

.Inhalt a:hover, .Inhalt a.hover
{
  color: #000;
}

/* variante 0 */

a img, img a {
      background-image:none !important;
      padding:0 !important;
}

/* variante 1 */

.Inhalt a img, .Inhalt a:hover img, .Inhalt a:link img, .Inhalt a:active img, .Inhalt a:visited img {
      background-image:none !important;
      padding:0 !important;
   }   

/* variante 2 */

.Inhalt img a, .Inhalt img a:hover, .Inhalt img a:link, .Inhalt img a:active, .Inhalt img a:visited {
      background-image:none !important;
      padding:0 !important;
   }   
   
/* variante 3 */

.Inhalt a>img, .Inhalt a:hover>img, .Inhalt a:link>img, .Inhalt a:active>img, .Inhalt a:visited>img {
      background-image:none !important;
      padding:0 !important;
   }   

/* variante 4 */

.Inhalt a>img, .Inhalt a:hover>img, .Inhalt a:link>img, .Inhalt a:active>img, .Inhalt a:visited>img {
      background-image:none !important;
      padding:0 !important;
   }   

/* variante 5 */

.Inhalt a+img, .Inhalt a:hover+img, .Inhalt a:link+img, .Inhalt a:active+img, .Inhalt a:visited+img {
      background-image:none !important;
      padding:0 !important;
   }   

/* variante 6 */

.Inhalt a+img, .Inhalt a:hover+img, .Inhalt a:link+img, .Inhalt a:active+img, .Inhalt a:visited+img {
      background-image:none !important;
      padding:0 !important;
   }   


Danke für eure Hilfe.

[ThomaZ]

Ist ENTWEDER ein Bild ODER eine Grafik drin in dem Div??

Eleganterweise sollten Texte immer in einem <p>-Element stehen.
Dann könntest du einfach sagen dein <p> hat einen hintergrund und fertig.
z.B:
Hier habe ich den div LINKS zwei mal. Einmal mit Bild, einmal mit text.

Code: Alles auswählen

<div class="links">
       <a href="#"><p>Linktext</p></a>
</div>
<div class="links">
   <a href="#"><img name="" src="" width="32" height="32" alt="" /></a>
</div>


Und folgendermaßen sage ich dem Browser per CSS des er nur dem <p>-tag einen hintergrund geben
soll, wenn es im <div class"links"> UND im dortigen <a> steckt.

Code: Alles auswählen

div[class="links"]   {
   position: relative;
   margin: auto;
   width:   10em;
   border: 1px solid red;
}

div[class="links"]  > a >  p  {
   display: block;
   top: 0;
   left: 0;
   right: 0;
   left: 0;     
   padding: 0;
   margin: 0;
   border: 1px solid black;
   background-color:   #06F;
}


MfG

Thomas