Hi, unter: http://s369189542.online.de baue ich gerade einen Shop, der soviele Punkte in der Navigation hat, dass die obere Navileiste übder 2 Zeilen geht. Funktioniert zwar, das blöde ist nur, dass sich die 2te Zeile der Navigation oft nach rechts verschiebt. Das Problem gibt es auch im Standart Template und über CSS konnte ich den Fehler nicht finden. Weiss jemand Rat? LG Timo
Niemand?
hi, es liegt am border bei hover. du könntest beim normalzustand den border mal auf hintergrund rot setzen. dann sollte die breite immer gleich bleiben auch bei hover. oder du beeinflusst margin links und rechts bei normal und hover. das springen tritt übgrinds nur bei punkten mit subnav auf.
Was mir als erstes einfaellt ist, den Homebutton zu entfernen, sieht fuer meinen Geschmack auch besser aus.
ok danke dir, das werde ich mal versuchen. aber wenn ich oben einen menüpunkt anklicke, verschiebt sich die untere reihe auch „dauerhaft“ nach rechts ohne hover
ja, weil bold. #mainNavigation a.active {font-weight: 700;height:31px;border: 1px solid; border-bottom: 0 none;background: url("../images/backgrounds/bg\_navigation\_top\_active.jpg") repeat-x;}
hier kann font-weight: 700; weg oder font-weight: normal;
ja fast #mainNavigation a.active {font-weight: 700;height:31px;border: 1px solid; border-bottom: 0 none;background: url("../images/backgrounds/bg\_navigation\_top\_active.jpg") repeat-x;}
Die Zeile stimmt aber das height ist zuviel. Ich habs jetzt in 25 geändert und es hat funktioniert also: #mainNavigation a.active {font-weight: 700;height:25px;border: 1px solid; border-bottom: 0 none;background: url("../images/backgrounds/bg\_navigation\_top\_active.jpg") repeat-x;}
und wer auch das advanced menu benutzt für die dropdowns muss dasselbe nochmal unter hier machen: #mainNavigation ul li.dropactive:hover a {background-image: none;background-color: #fff;border-color: #000;border-bottom-color: #c7c7c7;color: #000; height: 25px;}
endlich…ich danke euch
hallo, ich habe genau das selbe problem. mein navi menu ist auf 2 zeilen, soll auch so sein, aber wenn ich auf eine kategorie hover die unterkategorien hat, dann verschiebt sich die 2 zeile immer nach recht. sie wird praktisch vom dropdown nach rechts verschoben. wenn ich darauf klicke dann verschiebt die 2 zeile sich permanent nach rechts obwohl das dropdown dann ja verschwindet. ich habe versucht am css rumzuschrauben aber ohne erfolg. währe sehr dankbar wenn jemand mir einen tipp geben könnte was ich an dem folgenden css ändern muss damit es richtig funktioniert und das dropdown die 2 zeile nicht mehr verschiebt, sich also praktisch darüber visualisiert ohne konsequenzen in der formatierung zu verursachen. liegt das eventuell an einem fehlenden position: absolute; css? vielen dank im voraus. vg, paul /* SHOP NAVIGATION ------------------------ */ #topbar input {color: #999;border-color:#fff;} #topbar input:hover {border-color: #c7c7c7} #topbar .currency {border-color: #c7c7c7} #topbar select {color: #999;} .my_options a {color: #009ee0} #mainNavigation {background-color: #009ee0;} #mainNavigation a {color:#fff;border-left-color: #009ee0;border-right-color:#36b2e6;font-size:14px;} #mainNavigation .dropactive:hover a {color: #009ee0;} #mainNavigation a.first {border-left-color: #36b2e6;} #mainNavigation a.active {color: #009ee0; font-weight: normal;height:30px;border: 1px solid;border-bottom: 0 none;} #mainNavigation {height: 60px;} /* Drop down menu */ #mainNavigation ul li.dropactive:hover a {background-image: none;background-color: #fff;border-color: #000;border-bottom-color: #c7c7c7;color: #000;height:30px;} #mainNavigation ul li.dropactive:hover ul.dropdown li:hover a {color: #fff;background-color: #009ee0;} #mainNavigation ul li.dropactive:hover ul.dropdown li:hover li a {color: #009ee0; background-color: #fff;} #mainNavigation ul li.dropactive:hover ul.dropdown li:hover li:hover a {color: #fff;background-color: #009ee0;} #mainNavigation ul li.dropactive:hover ul.dropdown li:hover li:hover li a {color: #009ee0;background-color: #fff;} #mainNavigation ul li.dropactive:hover ul.dropdown li:hover li:hover li:hover a {background-color: #009ee0;color:#fff;} #mainNavigation ul li.dropactive:hover ul.dropdown li li:hover a {color: #fff;} #mainNavigation ul li.dropactive:hover li:hover a {color: #fff;background-color: #009ee0;} #mainNavigation li:hover ul.dropdown, #mainNavigation li:hover ul.droplevel {background-color: #fff; border-color: #000;} #mainNavigation ul li.dropactive:hover ul.droplevel {background-color: #fff;border-color: #000;} #mainNavigation ul li.dropactive:hover ul.dropdown li.sub {background-color: #fff;} #mainNavigation ul li.dropactive:hover ul.dropdown li.sub:hover {background-color: #009ee0;} #mainNavigation ul li.dropactive:hover ul.dropdown li a {color:#009ee0;border-color: #c7c7c7;}