Nicht mehr ganz neu hier
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: Meisterkonditorei Kirsch
Als Menüvorbild hab ich mir das Menü von Spruengli.ch.de genommen.
Vielleicht erst mal ein wenig Code.
Aufgerufen wird das Menü mittels mouseOver Event:
Die Funktion showMenu sieht derzeit so aus:
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
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:
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
Hier erst mal der derzeitige Status der Seite: Meisterkonditorei Kirsch
Als Menüvorbild hab ich mir das Menü von Spruengli.ch.de 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>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);
};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;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';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
