Auf Thema antworten 2026

Beitrag

<blockquote data-quote="daimonion" data-source="post: 1307592" data-attributes="member: 188756">Ich bin gerade dabei für eine Bekannte eine Internetseite zu gestalten und hänge ein wenig an der korrekten Positionierung des Menüs.Hier erst mal der derzeitige Status der Seite: <a href="http://www.kirsch-konditor.de" target="_blank">Meisterkonditorei Kirsch</a>Als Menüvorbild hab ich mir das Menü von <a href="http://www.spruengli.ch" target="_blank">Spruengli.ch.de</a> genommen.Vielleicht erst mal ein wenig Code.Aufgerufen wird das Menü mittels mouseOver Event:[code]&lt;div id=&quot;menupoint1&quot; class=&quot;menupoint&quot; onMouseOver=&quot;showMenu(&#039;menupoint1&#039;,&#039;Menu1&#039;)&quot;&gt;Torten&lt;/div&gt;[/code]Die Funktion showMenu sieht derzeit so aus:[code]function showMenu(mpoint, menu) {&nbsp; &nbsp; var menupoint = document.getElementById(mpoint);&nbsp; &nbsp; //neue Elemente generieren&nbsp; &nbsp; var MenuBox = document.createElement(&quot;div&quot;);&nbsp; &nbsp; MenuBox.id = &quot;Menubox1&quot;;&nbsp; &nbsp; &nbsp; &nbsp; for (i = 0 ; i &lt; Menu1.length ; i++) {&nbsp; &nbsp; &nbsp; &nbsp; MenuBox.appendChild(document.createTextNode(Menu1[i]));&nbsp; &nbsp; &nbsp; &nbsp; MenuBox.appendChild(document.createElement(&quot;br&quot;));&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; //Eigenschaften vergeben&nbsp; &nbsp; MenuBox.style.width = 150 + &quot;px&quot;;&nbsp; &nbsp; MenuBox.style.backgroundColor = &quot;#4a2910&quot;;&nbsp; &nbsp; MenuBox.style.color = &quot;#FFFFFF&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //menubox positionieren&nbsp; &nbsp; MenuBox.style.position = &quot;absolute&quot;;&nbsp; &nbsp; &nbsp; &nbsp; MenuBox.style.left = menupoint.style.left;&nbsp; &nbsp; MenuBox.style.top = menupoint.style.top;&nbsp; &nbsp; &nbsp; &nbsp; //Event für das MouseOut Ereignis hinzufügen&nbsp; &nbsp; if (MenuBox.addEventListener) {&nbsp; &nbsp; &nbsp; &nbsp; MenuBox.addEventListener(&quot;mouseout&quot;, hideMenus, false);&nbsp; &nbsp; &nbsp;&nbsp; } else if (MenuBox.attachEvent) {&nbsp; &nbsp; &nbsp; &nbsp; MenuBox.attachEvent(&quot;onmouseout&quot;, hideMenus);&nbsp; &nbsp; &nbsp;&nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Objekt im Dom einfügen&nbsp; &nbsp; menupoint.parentNode.insertBefore(MenuBox,menupoint.nextSibling);&nbsp; &nbsp; };function hideMenus() {&nbsp; &nbsp; var Menubox = document.getElementById(&quot;Menubox1&quot;);&nbsp; &nbsp; Menubox.parentNode.removeChild(Menubox);&nbsp; &nbsp; };[/code]Die Funktion ist lange noch nicht fertig, daher kann es sein, dass die ein oder andere Codezeile noch nicht sauber implementiert ist. Momentan liefert dieses Stück Code folgendes Ergebnis in eigentlich allen Browsern:Nun könnte man meinen, dass die beiden Zeilen[code]&nbsp; &nbsp; MenuBox.style.left = menupoint.style.left;&nbsp; &nbsp; MenuBox.style.top = menupoint.style.top;[/code]für dieses Ergebnis verantwortlich sind, aber das ist nur im ersten Moment so, da die Eigenschaft top bzw. left beim CSS Layout für menupoint gar nicht vergeben sind, diese Felder unter JS somit quasi leer sind. Die derzeitige Position ist somit eine Interpretation der Browser.Wenn ich nun anstelle:[code]MenuBox.style.top = 225 + &#039;px&#039;;[/code]in der Funktion schreibe, dann zeigt mir mein Opera das zwar mit korrektem Abstand an, aber die anderen Browser interpretieren die Massangabe natürlich anders und es kommt wieder zu Verschiebungen. Ganz schlimm ist der IE7, der die Eigenschaft left völlig versaut (Über den Kompatibilitätsmodus angeschaut.)Nun mein Frage an euch. Wie kann ich denn die Positionierung bewerkstelligen, dass sie Konform mit CSS ist und auch in allen relevanten Browsern (Opera, FF &gt; 3, IE &gt; 7, Safari, Chrome) gleich dargestellt werden kann?Danke für eure Hinweise.GrüßeDaimonion</blockquote>

[QUOTE="daimonion, post: 1307592, member: 188756"] Ich bin gerade dabei für eine Bekannte eine Internetseite zu gestalten und hänge ein wenig an der korrekten Positionierung des Menüs. Hier erst mal der derzeitige Status der Seite: [url=http://www.kirsch-konditor.de]Meisterkonditorei Kirsch[/url] Als Menüvorbild hab ich mir das Menü von [url=http://www.spruengli.ch]Spruengli.ch.de[/url] genommen. Vielleicht erst mal ein wenig Code. Aufgerufen wird das Menü mittels mouseOver Event: [code]<div id="menupoint1" class="menupoint" onMouseOver="showMenu('menupoint1','Menu1')">Torten</div>[/code] Die Funktion showMenu sieht derzeit so aus: [code]function showMenu(mpoint, menu) { var menupoint = document.getElementById(mpoint); //neue Elemente generieren var MenuBox = document.createElement("div"); MenuBox.id = "Menubox1"; for (i = 0 ; i < Menu1.length ; i++) { MenuBox.appendChild(document.createTextNode(Menu1[i])); MenuBox.appendChild(document.createElement("br")); } //Eigenschaften vergeben MenuBox.style.width = 150 + "px"; MenuBox.style.backgroundColor = "#4a2910"; MenuBox.style.color = "#FFFFFF"; //menubox positionieren MenuBox.style.position = "absolute"; MenuBox.style.left = menupoint.style.left; MenuBox.style.top = menupoint.style.top; //Event für das MouseOut Ereignis hinzufügen if (MenuBox.addEventListener) { MenuBox.addEventListener("mouseout", hideMenus, false); } else if (MenuBox.attachEvent) { MenuBox.attachEvent("onmouseout", hideMenus); } //Objekt im Dom einfügen menupoint.parentNode.insertBefore(MenuBox,menupoint.nextSibling); }; function hideMenus() { var Menubox = document.getElementById("Menubox1"); Menubox.parentNode.removeChild(Menubox); };[/code] Die Funktion ist lange noch nicht fertig, daher kann es sein, dass die ein oder andere Codezeile noch nicht sauber implementiert ist. Momentan liefert dieses Stück Code folgendes Ergebnis in eigentlich allen Browsern: Nun könnte man meinen, dass die beiden Zeilen [code] MenuBox.style.left = menupoint.style.left; MenuBox.style.top = menupoint.style.top;[/code] für dieses Ergebnis verantwortlich sind, aber das ist nur im ersten Moment so, da die Eigenschaft top bzw. left beim CSS Layout für menupoint gar nicht vergeben sind, diese Felder unter JS somit quasi leer sind. Die derzeitige Position ist somit eine Interpretation der Browser. Wenn ich nun anstelle: [code]MenuBox.style.top = 225 + 'px';[/code] in der Funktion schreibe, dann zeigt mir mein Opera das zwar mit korrektem Abstand an, aber die anderen Browser interpretieren die Massangabe natürlich anders und es kommt wieder zu Verschiebungen. Ganz schlimm ist der IE7, der die Eigenschaft left völlig versaut (Über den Kompatibilitätsmodus angeschaut.) Nun mein Frage an euch. Wie kann ich denn die Positionierung bewerkstelligen, dass sie Konform mit CSS ist und auch in allen relevanten Browsern (Opera, FF > 3, IE > 7, Safari, Chrome) gleich dargestellt werden kann? Danke für eure Hinweise. Grüße Daimonion [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?