"Top Kategorien" verschieben sich bei Zoom

m@heuer · September 29, 2015

Hallo,

ich habe folgendes Problem, auf unserer Website haben wir "Top Kategorien" zu sehen unter: (https://www.heuer-gmbh.com/store/)...

das Problem ist, wenn ich weiter "rauszoome" egal ob mit ff oder chrome (ie funktioniert komischerweise), dann springt die Kategorie Sale auf die nächste Zeile (aufgefallen bei surface benutzung)..

Ich bin mit meinem Rat echt am Ende, aber vielleicht kann mir jemand weiterhelfen...

Hier der betroffene css code

/* Mainnavi Top */
#mainnav_wrapper { position: absolute; bottom: 25px; width: 100%; }

#navigation_top_main { float: left; width: 100%; }


/* Nur Internet Explorer 10 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #navigation_top_main { float: left; width: 980px; }
}
/*Nur Firefox*/
@-moz-document url-prefix() {
    #navigation_top_main {

	float: left;
	width: 100%;
  
	

    }
}


#navigation_top_main ul { list-style-type: none; }
#navigation_top_main li { float: left; }
#navigation_top_main li { display: none; }
#navigation_top_main li.level1 { display: block; }
#navigation_top_main li a { display: block; padding: 0 10px; text-transform: uppercase; font-size: 14px; font-weight: 700; color: #fff; line-height: 30px; }
#navigation_top_main li a:hover { text-decoration: none; background: #0f5078 !important; border: 1px solid #0f5078 !important; }
#navigation_top_main li a.main_cat_haushaltwohnen {
    background: rgb(189, 214, 27); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(189, 214, 27, 1) 0%, rgba(163, 184, 25, 1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(189, 214, 27, 1)), color-stop(100%, rgba(163, 184, 25, 1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(189, 214, 27, 1) 0%, rgba(163, 184, 25, 1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(189, 214, 27, 1) 0%, rgba(163, 184, 25, 1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(189, 214, 27, 1) 0%, rgba(163, 184, 25, 1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(189, 214, 27, 1) 0%, rgba(163, 184, 25, 1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdd61b', endColorstr='#a3b819', GradientType=0); /* IE6-9 */
    border-top: 1px solid #9eb217;
    border-bottom: 1px solid #acc319;
    border-left: 1px solid #a3b818;
    border-right: 1px solid #99ad16;
}
#navigation_top_main li a.main_cat_gartenheimwerker {
    background: rgb(244, 67, 17); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(244, 67, 17, 1) 0%, rgba(205, 56, 14, 1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(244, 67, 17, 1)), color-stop(100%, rgba(205, 56, 14, 1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(244, 67, 17, 1) 0%, rgba(205, 56, 14, 1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(244, 67, 17, 1) 0%, rgba(205, 56, 14, 1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(244, 67, 17, 1) 0%, rgba(205, 56, 14, 1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(244, 67, 17, 1) 0%, rgba(205, 56, 14, 1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f44311', endColorstr='#cd380e', GradientType=0); /* IE6-9 */
    border-top: 1px solid #c1350d;
    border-bottom: 1px solid #d73b0f;
    border-left: 1px solid #c9370e;
    border-right: 1px solid #cb370e;
	
}

#navigation_top_main li a.main_cat_freizeithobby {
    background: rgb(0, 175, 203); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(0, 175, 203, 1) 0%, rgba(0, 140, 162, 1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 175, 203, 1)), color-stop(100%, rgba(0, 140, 162, 1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(0, 175, 203, 1) 0%, rgba(0, 140, 162, 1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(0, 175, 203, 1) 0%, rgba(0, 140, 162, 1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(0, 175, 203, 1) 0%, rgba(0, 140, 162, 1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(0, 175, 203, 1) 0%, rgba(0, 140, 162, 1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00afcb', endColorstr='#008ca2', GradientType=0); /* IE6-9 */
    border-top: 1px solid #008ca2;
    border-bottom: 1px solid #009eb7;
    border-left: 1px solid #0094ac;
    border-right: 1px solid #008ca2;
}
#navigation_top_main li a.main_cat_technikmultimedia {
    background: rgb(220, 0, 82); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(220, 0, 82, 1) 0%, rgba(177, 3, 67, 1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(220, 0, 82, 1)), color-stop(100%, rgba(177, 3, 67, 1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(220, 0, 82, 1) 0%, rgba(177, 3, 67, 1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(220, 0, 82, 1) 0%, rgba(177, 3, 67, 1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(220, 0, 82, 1) 0%, rgba(177, 3, 67, 1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(220, 0, 82, 1) 0%, rgba(177, 3, 67, 1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dc0052', endColorstr='#b10343', GradientType=0); /* IE6-9 */
    border-top: 1px solid #b10243;
    border-bottom: 1px solid #c7004b;
    border-left: 1px solid #c7004b;
    border-right: 1px solid #a2342e;
}
#navigation_top_main li a.main_cat_schuhekleidung {
    background: rgb(221, 166, 36); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(221, 166, 36, 1) 0%, rgba(191, 144, 31, 1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(221, 166, 36, 1)), color-stop(100%, rgba(191, 144, 31, 1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(221, 166, 36, 1) 0%, rgba(191, 144, 31, 1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(221, 166, 36, 1) 0%, rgba(191, 144, 31, 1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(221, 166, 36, 1) 0%, rgba(191, 144, 31, 1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(221, 166, 36, 1) 0%, rgba(191, 144, 31, 1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dda624', endColorstr='#bf901f', GradientType=0); /* IE6-9 */
    border-top: 1px solid #a67d1b;
    border-bottom: 1px solid #b98b1d;
    border-left: 1px solid #af831c;
    border-right: 1px solid #916d17;
}
#navigation_top_main li a.main_cat_sale {
    background: rgb(000, 000, 000); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(000, 000, 000, 1) 0%, rgba(000, 000, 000, 1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(000, 000, 000, 1)), color-stop(100%, rgba(000, 000, 000, 1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(000, 000, 000, 1) 0%, rgba(000, 000, 000, 1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(000, 000, 000, 1) 0%, rgba(000, 000, 000, 1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(000, 000, 000, 1) 0%, rgba(000, 000, 000, 1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(000, 000, 000, 1) 0%, rgba(000, 000, 000, 1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dda624', endColorstr='#bf901f', GradientType=0); /* IE6-9 */
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
	
	
	}
	


	
#navigation_top_main li:last-child, #navigation_top_main li a.main_cat_angebote, #navigation_top_main li a.main_cat_neuheiten {
    display: none;
}

m@heuer · October 1, 2015

Hat niemand eine Idee =(

EigenArt · October 1, 2015

Hallo,

Dein Problem kann ich im FF und Chrome nicht nachvollziehen. Wird ohne Umbruch angezeigt.

Du kannst ja mal mit einer festen Breite von 960px (anstatt 100%) vesuchen, ob das besser klappt. Für den IE ist das ja schon so.

m@heuer · October 1, 2015

hey, ja das hab ich schon versucht, doch leider gibt es keine Besserung..wenn ich FF und Chrome teste und dort rauszoome, als die Ansicht verkleinere...dann tritt das Problem auf...habe auch schon den Cache geleert...das Problem tritt allerdings z.B. auf dem Ipad oder einem China Android Tablet nicht auf.

alexsm · October 1, 2015

vielleicht addons mal deakt. ?

kann das problem auch nicht nachvollziehen, weder FF oder Chrome..

edit: viellleicht macht dein letztes element probleme, was auf display:none ist..

Alex@4tfm · October 1, 2015

Die Breite des Menüs ergibt sich aus der Breite der Knöpfe + padding + borders + margin. Die Breite der Knöpfe aus der Breite des Schriftzugs.

Ich weiß nicht genau wie die verschiedenen Browser den Zoom umsetzen, aber Ihr habt teilweise skalierende Werte und teilweise fixe Werte verwendet, was generell zu solchen Problemen führt.

Ich würde empfehlen den Hintergrund des Menüs schwarz zu machen und das padding left/right von jedem Button um ein paar Pixel zu reduzieren. Dadurch hätte es rechts mehr "Luft"(, was aber nicht auffallen würde, da der Hintergrund in der gleichen Farbe des Buttons ist.)

Keine Lösung, aber sollte das auftreten des Problem um 99% verringern.

Alternativ, abreißen und richtig neu bauen:

Media querys nutzen: ausschließlich "screen max/min-width" und auch nur, wenn es anders nicht geht...
nicht die Browser abfragen, ist doch nicht mehr 2008...
Den IE-CSS Müll am besten generell nicht nutzen...

homer1 · October 1, 2015

Komisch das so viele das Problem nicht nachvollziehen können.

Vermutlich nicht richtig gelesen? Ihr müsst nur rauszoomen.

Strg + Mausrad nach unten rollen.

m@heuer · October 2, 2015

Ich würde empfehlen den Hintergrund des Menüs schwarz zu machen und das padding left/right von jedem Button um ein paar Pixel zu reduzieren. Dadurch hätte es rechts mehr "Luft"(, was aber nicht auffallen würde, da der Hintergrund in der gleichen Farbe des Buttons ist.)

Okay, das werde ich mal testen, zwar keine saubere Lösung aber besser als nix:P

Media querys nutzen: ausschließlich "screen max/min-width" und auch nur, wenn es anders nicht geht...
nicht die Browser abfragen, ist doch nicht mehr 2008...
Den IE-CSS Müll am besten generell nicht nutzen...

Ich hab leider nicht soo viel Ahnung von Webdesign..^^ aber ich gebe mir größte Mühe

Komisch das so viele das Problem nicht nachvollziehen können.
Vermutlich nicht richtig gelesen? Ihr müsst nur rauszoomen.
Strg + Mausrad nach unten rollen.

Ich weiss es nicht, aber hier in der Firma tritt es bei jedem auf, wenn er "rauszoomt" am privaten PC auch

Edit: Das komplette Template wurde im Übrigen von einer "Agentur!" erstellt und angepasst...das ist ja das schlimme..da sind teilweise sachen drin, da fass ich mir selber an den kopf...und wie gesagt die mega Ahnung habe ich nicht

Alex@4tfm · October 2, 2015

Also, dass beim Zoomen schon mal was verschoben wird ist leider relativ normal. Man kann es nur minimieren, nicht vollständig ausschließen.

m@heuer · October 2, 2015

Also, dass beim Zoomen schon mal was verschoben wird ist leider relativ normal. Man kann es nur minimieren, nicht vollständig ausschließen.

Mit minimiert bin ich voll und ganz zufrieden!:D

Edit: schönes Wochenende

m@heuer · October 5, 2015

Ich würde empfehlen den Hintergrund des Menüs schwarz zu machen und das padding left/right von jedem Button um ein paar Pixel zu reduzieren. Dadurch hätte es rechts mehr "Luft"(, was aber nicht auffallen würde, da der Hintergrund in der gleichen Farbe des Buttons ist.)

Hat leider keine änderung erwirkt =(

m@heuer · October 8, 2015

Komisch ist nur, dass sich ja nur der "Sale" Button verschiebt, der rest widerrum nicht

homer1 · October 8, 2015

Ich denke das Sale würde sich nicht mehr verschieben wenn du andere kategorien kürzt.

Zb. "Garten & Heimwerker" umbenennen in "Heim & Garten"

m@heuer · October 12, 2015

Ich denke das Sale würde sich nicht mehr verschieben wenn du andere kategorien kürzt.
Zb. "Garten & Heimwerker" umbenennen in "Heim & Garten"

Danke für den Tipp, aber das ist keine Option, aufgrund der Corporate Identity und der SEO optimierungen.

"Top Kategorien" verschieben sich bei Zoom

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived