CSS – Rollover-Navigation unter float-Objekten

[heldausberlin]

Ich bin gerade am Erstellen einer Website, bei der das Untermenü per CSS als „Rollover“ erscheint.

Das Problem ist, dass das Menü unter Windows hinter gefloateten Objekten verschwindet, wie z. B. eingebettete Videos oder beim Kontaktformular.

Auf dem Mac ist es ok. Sogar im Firefox, der das unter Windows dann anders darstellt.

Kann mir da einer weiterhelfen?


Hier die Links:

http://axxel24.de/test2/index.php?page=kontakt
http://axxel24.de/test2/index.php?page=video

 

[tulix]

Versuch mal, das aufpoppende Untermenü mittels z-index in eine höhere Ebene zu legen...

 

[heldausberlin]

Das hab ich schon. Es geht aber nicht. Es liegt schon über allen.
Aber es ist ja abhängig vom Elternelement und der Seiteninhalt (mittlerer Bereich) ist ein DIV-Container, der außerhalb der Navigation liegt.
Somit scheinen dort gefloatete Elemente grundsätzlich über den vorangegangenen Boxen zu liegen.

 

[dms]

Da muss ich Dich lieder enttäuschen. Das ist ein leidiges Thema im IE. Mit Formularelementen ist da nix zu machen, die liegen grundsätzlich über allem drüber. Seit dem ich das weiss, wird das im Layout von Anfang an berücksichtigt. Die einzige (hässliche) Lösung die ich kenne ist es die Formularelemente per CSS-Expression beim :hover auszublenden. Sieht bescheiden aus, aber besser als über der Navigation.

Das mit dem Movie kann man fixen, die Lösung ist aber nicht optimal.

Erst mal muss der wmode-Wert auf "transparent" gesetzt werden. In deinem Aufruf folgendes hinzufügen:

s1.addVariable("wmode","transparent");

Wenn Du Glück hast ist es damit gefixt. Das Problem fängt meiner Erfahrung nach aber spätestes wieder an sobald in dem Flash-Film "etwas passiert". Sobald sich darin etwas bewegt legen sich die entsprechenden Elemente wieder oben über alles drüber.
Ursache dafür scheint die Art und Weise zu sein wie der Film per SWFObject eingebunden wird. Bindet man den Film ganz normal per object/embed/whatever ein funktioniert alles. Auch wenn man den Film dann manuell aktiviert. Dafür suche ich aktuell auch noch eine Lösung. Habe das gleiche Problem bei einem Projekt. Das mit dem manuellen aktivieren wäre ja nur halb so schlimm, wenn dieser dämliche Rahmen um den Flash-Film sich dann nicht über der Navigation breit machen würde.

Edit: Ich sehe gerade dass Du schreibst dass das Problem bei allen Win-Browsern auftaucht? Ich kenne dieses Phänomen nur vom IE.

 

[Hilarious]

Das Problem, welches Du beschreibst, hat mit der Eigenart aller Microsoft Internet Explorer zu tun, Formularelemente ganz zu oberst im Z-Index zu führen. Der Effekt ist also schlicht so, als würdest Du dem Formular die Eigenschaft zuweisen, in einem höheren Z-Index zu residieren als die Menü-Elemente. Dieser Effekt tritt mit allen Formular-Elementen auf, die mit einer Eingabe zu tun haben, also <input>, <select>, <textarea> aber auch, wie bei Dir hübsch sichtbar, mit dem Element <fieldset> (vermutlich noch mit weiteren Objekten), und bei eingebetteten Objekten (Flash).

Hier bist Du wirklich in eine böse Falle getappt, denn dies lässt sich meines Wissens nur mit einem hässlichen Work-Around lösen: Um dem Window-Objekt abzuringen, solche Formular-Elemente nicht in den unendlichen Vordergrund zu schieben, muss man über diesen Elementen ein weiteres Window-Objekt erzeugen. Und das geht mit einem (leeren) iFrame, der mit Hilfe Deiner »menu.js« den einzelnen Menü-Elementen »untergeschoben« wird. Ja, es ist schmutzig, aber es funktioniert. Ich habe den fertigen Code gerade nicht zur Hand, aber es sollte grob so aussehen:

var ieULs = nav.getElementsByTagName('ul');
for (j=0; j<ieULs.length; j++) {
    ieULs.innerHTML = <iframe id="iebug"></iframe>' + ieULs[j].innerHTML);
}

Wie Du siehst, das ist nicht so knusprig. Andere Lösung: Layout verändern

 

[heldausberlin]

@dms:

Danke. Hab es eingebaut. Aber leider bewirkt das nichts.

Die Unter Firefox (Windows) überdecken die Flashfilme das Menü. Im Kontaktformular wird dort aber alles korrekt angezeigt.

Ist ja echt ***, dass sogar der IE7 das falsch darstellt. Da kann man ja nicht mal darauf warten, den IE6 zu überleben.

 

[dms]

Sorry, hab mich in der Eile eben vertan:

s1.addParam('wmode','transparent');

 

[Hilarious]

Danke. Hab es eingebaut. Aber leider bewirkt das nichts.

Die Unter Firefox (Windows) überdecken die Flashfilme das Menü. Im Kontaktformular wird dort aber alles korrekt angezeigt.

Ist ja echt ***, dass sogar der IE7 das falsch darstellt. Da kann man ja nicht mal darauf warten, den IE6 zu überleben.

Jahaa...

Wenn Du nicht aufgeben möchtest, ich habe es 2006 für diese Buchhändler da eingebaut:

http://www.buch.de/

Du findest die relevante »menu.js«, die übrigens nur für die MSIEs geladen wird hier:

Viel Erfolg,
Hendrik.

 

[heldausberlin]

@dms: Danke Das tut’s erstmal vollkommen.

@Hilarious: Werd's gleich mal testen...

 

[heldausberlin]

Und das geht mit einem (leeren) iFrame, der mit Hilfe Deiner »menu.js« den einzelnen Menü-Elementen »untergeschoben« wird. Ja, es ist schmutzig, aber es funktioniert.

Wo genau soll ich da den iFrame einbauen?

 

[dms]

Soweit ich das verstanden habe um die Subnavigation herum. Theoretisch müsste es so zumindest funktionieren.

Edit: Also dynamisch (und für IE only!) per JS die Subnavigation ausschneiden, ein iFrame erzeugen und den ausgeschnittenen Schnipsel in das document des iFrame einfügen.

 

[Hilarious]

Der iFrame wird ohne Inhalt per JavaScript dynamisch in den Hintergrund des <UL>-Elementes gelegt, aus dem das aktuell sichtbare Menü besteht. Also nicht »drumherum«, sondern »dahinter«.

 

[heldausberlin]

Ok. Das mach ich die Tage. Muss jetzt mal aufhören. Erstmal vielen Dank euch beiden!

Hab die Seite jetzt direkt im Homeverzeichnis, falls ihr nochmal nachschauen wolltet: www.axxel24.de/index.php

 

[dms]

Interessant dieser Ansatz. Habe mal eine Frage dazu: Funktioniert das nur unter bestimmten Voraussetzungen oder theoretisch immer? Ich meine der Hintergrund eines leeren iFrames ist ja in der Regel weiss und nicht transparent. Bei der Variante von heldausberlin sind die Untermenüs ja mit einer Teiltransparenz ausgestattet und mit "runden Ecken" versehen. Funktioniert das dann theoretisch trotzdem oder ist das dann die Grenze des Machbaren?

 

[heldausberlin]

@dms: Also ich habe dem dem IE<6 eh statt der alphatransparenten PNG eine GIF-Datei zugeordnet und das Menü ist dort nicht durchsichtig.

Ich mag diese PNG-Workarounds für den IE nicht, und lieber ein reduziertes Design als gar keines.


@Hilarious: Ich habe das jetzt mit der menu.js ausprobiert. Das setzt mir jetzt einen weißen iFrame mit Rand, wobei das Navigations-Menü samt Text verschwindet.

Der iFrame bleibt aber trotzdem hinter den gefloateten Objekten.

 

[kennytb]

Hi,

ich habe da noch eine nette Seite in meinen Bookmarks
link
hat mir auch weiter geholfen


Grüße kennytb