CSS in einem Teilbereich manuell aufheben

html.de-Forum HTML, XHTML & CSS
1

Hallo,

ich hoffe, mir kann hier einer weiterhelfen. Ich arbeite in einem fertigen Projekt, dass in einer mit CSS definierten Infobox vor jeden Link einen kleinen Pfeil setzt mit folgendem CSS:

div.infobox a:link,div.infobox a:active,div.infobox a:visited { background:url(/img/arrow_dunkelgruen.gif) 0 5px no-repeat; color:#009682; padding-left:6px; }

Generell möchte ich den Code auch so weiterbehalten. Heißt: Ich werde den oben genannten Code nicht abändern können. Das Problem ist jetzt nur, wenn ich ein Bild in die Box setze und dies verlinke, erscheint davor auch immer der kleine grüne Pfeil. Das ist absolut suboptimal und will ich auch nicht, da es mir z. B. bei zusammengesetzten Bildern alles zerschießt.

Hat jemand eine Idee, wie ich den Code für Bilder aufheben kann? Ich habe schon versucht, eine separate div Formatierung zu erstellen (quasi eine Kopie des oberen ohne das Bild und mit anderem div Namen und ein div mit dem neuem Elementnamen vor das Bild zu stellen. Hat allerdings nicht funktioniert.

Ich habe auch eine neue a.ohnepfeil Klasse erstellt und dem Link dann zugewiesen.

[CODE]
a.ohnepfeil:link{
background:none;
}

a.ohnepfeil:active{
background:none;
}

a.ohnepfeil:visited{
background:none;
}

a.ohnepfeil:hover{
background:none;
}[/CODE]

Funktioniert auch nicht. Der Pfeil ist immer noch da. Hilfe?

2

background-image:none….

3

Das funktioniert auch nicht. Hatte ich als erstes probiert, aber da das Bild oben im div nur mit background eingebunden ist, bin ich auf das umgeschwungen um es quasi aufzuheben.

4

Das kann schon deshalb nicht funktionieren, weil das CSS in deinem ersten Snippet eine viel höhere Gewichtung besitzt als das im zweiten.

Google mal nach CSS Specifities.

5

An sowas hatte ich schon gedacht. Deshalb habe ich wie oben geschrieben zuerst auch einen identischen DIV benutzt und nur den Namen umgeändert. Dann sollte ja eigentlich das letzte immer benutzt werden. Das ging aber nicht, weshalb ich den unteren Code auch ausprobiert habe.

6

So sollte es funktionieren.

div.infobox a.no_arrow  { background: transparent;}

<a class="no_arrow" href="#"><img src="bild.gif"></a>
7

Das funktioniert auch nicht, der Pfeil ist immer noch da :frowning:

8

Schon klar, a:link etc sind auch genauer definiert als a.no_arrow…
Einfach ein background: transparent !important.
Ist zwar nicht schön, aber ich habe jetzt keine Lust genauer darauf einzugehen.

9

Es klappt! :):):):slight_smile:

DANKE!!!

Das !important tag kannte ich noch gar nicht. Werd ich mir für so Situationen mal merken!

10

Nein, vergiss das gleich wieder! Jeder der css schreibt benutzt das aus Bequemlichkeit ab und an. Aber jeder regt sich auch regelmäßig über andere auf, wenn er deren css mit anderem css manipulieren muss und „!important“ drinsteht. Es macht langfristig meist mehr Mühe als es kurzfristig Zeit spart.

Der richtige Weg ein css zu überschreiben ist, einen selector anzuwenden der genauer definiert ist, als der andere. In deinem Fall also zum Beilspiel:

div.infobox a.no_arrow:link, div.infobox a.no_arrow:active, div.infobox a.no_arrow:visited {
    background-image: none;
}

Der einzige legitime Grund, important zu benutzen ist inlinestyles zu überschreiben.

… nach diesem Vortrag bin ich ziemlich froh, dass hier niemand in MEIN css gucken kann ^^

11

Super, das hilft jetzt ohne !important! Jetzt sehe ich auch, welchen Denkfehler ich am Anfang gemacht habe - ich hätte dem a tag einen neuen Namen geben sollen, nicht dem div!

12

Interessanterweise würde auch diese Variante funktionieren:

.no_arrow.no_arrow.no_arrow.no_arrow { ... }
Das nur so am Rande, ist auch keinesfalls eine Variante, die man regelmäßig einsetzen sollte… (aber immernoch ein klein wenig besser als !important)

13

Das ist mir total neu. Aber eigentlich logisch. Danke, das könnte mal nützlich sein :slight_smile: