• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS in einem Teilbereich manuell aufheben

E

elmoandzoey

Neues Mitglied
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:

Code: 
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;
}

Funktioniert auch nicht. Der Pfeil ist immer noch da. Hilfe?
 
Zuletzt bearbeitet:
Werbung:
elmoandzoey schrieb:
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:

Code: 
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.
Zum Vergrößern anklicken....

background-image:none….
 
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.
 
Werbung:
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.
 
Tronjer schrieb:
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.
Zum Vergrößern anklicken....

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.
 
So sollte es funktionieren.
Code: 
div.infobox a.no_arrow  { background: transparent;}

<a class="no_arrow" href="#"><img src="bild.gif"></a>
 
Werbung:
Werbung:
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:
Code: 
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 ^^
 
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!
 
Interessanterweise würde auch diese Variante funktionieren:
Code: 
.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)
 
  • Like
Reaktionen: pax
Werbung:
Das ist mir total neu. Aber eigentlich logisch. Danke, das könnte mal nützlich sein :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben