Erweitertes Menü mit Grafiken - wo kommt die Linie her?

Hallo liebes Forum, ich habe das Plugin “Erweitertes Menü mit Grafiken” im Einsatz und in der CSS-Datei rumgeschraubt, um das Design unserer Seite anzupassen. Als ich fertig war, habe ich eine schwarze Linie unten an der Kante, von der ich nicht weiß, wo sie herkommt. Unter www.ck-naturstein.de kann man sie sehen, ganz zart, fällt kaum auf, aber stört mich, vor allem kann ich es nicht nachvollziehen. In der CSS-Datei gibt es dafür keinen Wert, zumindest hab ich ihn nicht gefunden :frowning: Wer kann mir weiterhelfen? Siehe Code: #mainNavigation { margin: 0 auto; height: 38px; padding: 0; width: 1020px; line-height: 38px; border:0px;} #mainNavigation a {padding:0px 0px 0px 0px; height: 38px; cursor: pointer; border:0px;} #mainNavigation a span {background:transparent; display: block;margin: 0;padding: 0 15px 0px;height: 38px;line-height: 38px; border-right: 1px solid #666;} #mainNavigation a:hover {background: #fff; text-decoration: none; color: #666;} #mainNavigation a:hover span { color: #fc9d27; margin: 0px 0; height: 38px; line-height: 38px; font-weight: normal; background-color: #FFFFFF; border-right: 1px solid #666; } #mainNavigation a.active {background:transparent; color: #fff; height: 38px; border:0px;} #mainNavigation a.active span { background-color: #FFF; color: #666; height: 38px; font-weight: normal; } #mainNavigation a.active:hover span {height: 38px; margin: 0; line-height: 38px;} #mainNavigation ul li.dropactive:hover a { color: #666; border: 0px; height:38px; } #mainNavigation ul li.dropactive:hover a span {height: 38px; color: #fc9d27; background:#fff; border-right: 1px solid #666; } #mainNavigation ul li.dropactive:hover ul.dropdown li a {height:180px; width:155px; float:inherit; background:#fff; display:block; padding-bottom: 5px; padding-top:5px; margin-top:0; margin-left:0; text-align:center;} #mainNavigation ul li.dropactive a:hover span { height: 38px; border-right: 1px solid #666; background-color: #FFFFFF;} #mainNavigation ul li.dropactive:hover ul.dropdown li.sub ul {margin: 0; padding:0;color: #fff;float:none} #mainNavigation ul li.active.dropactive:hover a {color: #fff;} #mainNavigation li:hover ul.dropdown, #mainNavigation li:hover ul.droplevel {margin-bottom:5px; padding-bottom:0; width:945px; -moz-box-shadow: -2px 2px 5px #999; -webkit-box-shadow: -2px 2px 5px #999; box-shadow: -2px 2px 5px #999; margin-top:10px; background-color:#fff;left:6px;} #mainNavigation li.active:hover ul.dropdown {margin-left: 0;} #mainNavigation ul li.dropactive:hover ul.dropdown li:hover a { color: #fc9d27; font-weight: normal; background-color: #F5F5F5; } /** Kategorieinfo */ #graadkatinfo { width: 166px; height: 160px; background-color: #f5f5f5; float: right; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 4px; display: block; -moz-box-shadow: 2px 2px 5px #999; -webkit-box-shadow: 2px 2px 5px #999; box-shadow: 2px 2px 5px #999; opacity: 0.7; } #graadkatinfo p { line-height:18px; margin: 2px; } #mainNavigation ul li.dropactive ul.dropdown div#graadkatinfo div.seemorebutton a { color: #FFFFFF; background-color: #fc9d27; border: 0 none; margin-bottom: 3px; margin-top: 6px; width: 150px; display: block; height: 20px; line-height: 20px; padding: 1px 4px; position: relative; } #mainNavigation ul li.active ul.dropdown div#graadkatinfo div.seemorebutton a { background-image:none; } /** Added in Version 1.2.1 **/ /** set the line-height for long categorie-names **/ #mainNavigation ul li.dropactive:hover ul.dropdown li a { line-height:12px; } /** change the image to background - better product-link on facebook **/ #mainNavigation ul li.dropactive:hover ul.dropdown li a div { margin-left: 5px; background-repeat:no-repeat; } #mainNavigation ul li div { float:none; margin:5px; background-repeat:no-repeat; background-size:contain; background-position:center; } div.TopIcon { margin-right: 8px !important; } /** delete the hover-fidget of main-categories**/ #mainNavigation ul li.dropactive:hover a {height: 28px; position: relative; z-index: 3000;} #mainNavigation ul li.dropactive:hover ul.dropdown li a {color: #606060;} #mainNavigation ul li.dropactive:hover ul div#graadkatinfo { float:right; margin-top: 10px; margin-right: 14px; margin-left: 9px; margin-bottom:9px; } Was ist da verkehrt? Bin um jede Hilfe dankbar. Lg nadja

style.css --> Zeile: #mainNavigation ul li.dropactive:hover ul.dropdown li a { border: 0 none; background: 0 none; display: block; height: 30px; line-height: 30px; border-bottom: 1px solid; width: 220px; } Gruß

Ja, aber da bitte nichts ändern - Systemdatei ! In der menustyle.css, ab Zeile 10 (#mainNavigation ul li.dropactive:hover ul.dropdown li a) noch ein border:none; einfügen. Gruß vom Entwickler :wink:

Hallo bluewolf, ich hatte nicht vor, deine Entwicklung zu schänden, sorry :wink: Aber klär mich bitte mal auf, was an einer css „Systemdatei“ ist? Gruß

Die style.css ist eine Systemdatei aus dem Shopware Grundgerüst. Header: /\*\* Shopware 3.5 Template default stylesheet http://shopware.de This stylesheet contains all styled elements which are used in the default template. Please notice that we've placed all color codes in a different stylesheet called colors.css. Anpassungen sollten doch immer über das eigene Template erfolgen, oder?

Verstehe, danke! Aber in diesem Fall liegt die css im eigenen Template Ordner emotion_ck-rock-orange und sofern das nicht der Ordner des Plugins ist, sind Änderungen kein Problem und auch updatesicher, oder sehe ich das gerade irgendwie völlig falsch? Gruß

Jain - wenn die styles.css komplett ins eigene Template übernommen wird, nimmt man Shopware ja die Möglichkeit, bei einem Update diese Datei zu verändern. Durch die Kopie im eigenen Template greift die Originaldatei nicht mehr. Wenn sich die styles.css aufgrund einer neuen Funktion des Frontend verändert / erweitert wird, gehen diese Anpassungen in diesem Falle am Template vorbei und werden nicht eingefügt. Die Framework.css ist hier ebenfalls in das Template übernommen worden… Änderungen und Ergänzungen von Shopware greifen hier auch nicht mehr. Durch die Vererbungs-Struktur sollten alle Anpassungen immer nur über die eigene Template-CSS vorgenommen werden. Das erleichtert wie in diesem Fall auch die Fehlersuche. Ich habe schon einige Shops gerichtet, in denen durch die falsche Bearbeitung Fehler aufgetreten sind. Es gibt aber auch Agenturen, die ein Template so extrem verändern, dass jedes Plugin angepasst werden muss: Blöcke umbenannt, Variablennamen verändert…

Hallo bluewolf, vielen Dank für Deine Hilfe, hat wunderbar geklappt. Jetzt wüsste ich gerne noch, aufgrund Deiner Antwort, ob ich das denn richtig gemacht habe mit dem Override des Templates? Ich bin jetzt etwas irritiert. Man soll doch die css-style in das eigene Template kopieren und bearbeiten anstatt der Original-Datei, oder? Habe ich dabei etwas falsch gemacht? Lg nadja

Hallo Nadja, die styles.css soll eben nicht ins eigene Template übernommen werden. Alle Anpassungen werden in der zum Template gehörenden CSS-Datei gemacht (emotion_ck-rock-orange.css). Wenn in der styles.css die Klasse “.Beispiel” mit 10 Werten versehen wird, man aber nur einen Wert ändern will, wird dieser dann in der eigenen CSS angegeben. Durch die Vererbung bleiben alle anderen Werte erhalten.