Hallo zusammen, ich entwickle für einen Modeshop ein neues Template auf Basis des Emotion-Templates. Soweit komme ich auch gut voran - allerdings habe ich Probleme bei der Breadcrumb Navigation. Ich habe die breadcrumb Navigation folgendermaßen abgeändert: [code]
[/code] Zu den Links gehört folgende CSS: [code] .main-navigation .navigation a:after { content: ""; background: url(../images/arrow-5.png) 14px 7px no-repeat; padding: 0 0 0 26px; } [/code] Shopware ignoriert den Style komplett. Sobald ich :after entferne wird der Style angewendet. Ich habe als Doctype html angegeben... Hat jemand hierzu eine Idee bzw. Erfahrungen? Danke Jens
Das CSS macht nicht viel Sinn. Hänge nichts an und packe ein Background-image hinter nichts. Es muss Content generiert werden, damit man an diesen noch Attribute übergeben kann. Aber auch dann ist es doch viel sinnvoller dem a-tag direkt ein Background-image zuzuweisen. Shopware hat mit der CSS-Interpretation nichts zu tun, dass ist Sache des Browsers und deren Unterschiede sind zu beachten. Außerdem die W3C-Standards zu CSS2
Außerhalb von Shopware funktioniert das problemlos und macht auch Sinn - d.h. auf meinem HTML-Muster sieht das alles wie gewünscht aus - btw. der W3 Validator meldet keine Probleme beim CSS3 check…
Von mir aus, des Menschen Wille ist sein Himmelreich, dann macht das halt Sinn. Aber es muss schon mal so korrigiert werden: a:after { content: ""; background: url(../images/arrow-5.png); background-repeat: no-repeat; background-position: 14px 7px; padding: 0 0 0 26px; } Man kann auch direkt das Bild als content: url(); einfügen.
Vielen Dank, dass Sie sich bemühen mein Problem zu lösen. Leider ist es völlig egal was in a:after steht - shopware ignoriert es einfach. Erst wenn ich in z.b.: den Chrome Entwicklertools das :after entferne passiert überhaupt etwas. Ansonsten wird noch nicht einmal das Padding angewendet… Ich stehe vor einem Rätsel… Ich habe zum Verständnis mal 2 Bilder angehängt…
Ja, da muss ich jetzt doch erneut auf die sinnlose Idee vom ersten Post zurückkommen. Der generierte Content ist leer und das funktioniert einfach nicht in jedem Setting und in diesem auch nicht. Ich habe das gerade auf der Originalseite getestet. Wird ein Content generiert und steht dort nicht einfach nur “” oder " ", funktioniert es prinzipiell. Und die Shorthand funktioniert bei generiertem Content auch nicht in jedem Fall und Browser. Daher hatte ich es in der langen Form gepostet. Die funktioniert in der Regel. In diesem Fall ist es wirklich simpel zu lösen: .main-navigation .navigation a:after { content: url(../images/arrow-5.png); padding-left: 26px; } Wenn man die background-color des generierten Content auf white setzt, kann man die Auswirkungen der einzelnen Änderungen im CSS wirklich leicht verfolgen.
Vielen Dank für den neuerlichen Hinweis. Es lag tatsächlich am leeren Content. Mich wunder t nur, dass es als reine html-lösung funktioniert. Ich habe nun in content per url ein leeres Bild eingefügt, dann klappt es wie gewünscht. Der von Ihnen bereitgestellte Code erzeugt zwar auch die Pfeile - aber leider zu nah an den Menüpunkt (was man durch 14px padding-right umgehen kann), aber auch hinter das letzte Element. Natürlich kann ich das mit .last abfangen. Vielen Dank für die Denkanstösse!
