CSS – Rollover-Navigation unter float-Objekten

Dieses Thema im Forum "Web-Design" wurde erstellt von heldausberlin, 31.03.2008.

  1. heldausberlin

    heldausberlin Thread Starter MacUser Mitglied

    Beiträge:
    13.862
    Zustimmungen:
    302
    Mitglied seit:
    01.05.2004
    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
     
  2. tulix

    tulix MacUser Mitglied

    Beiträge:
    129
    Zustimmungen:
    9
    Mitglied seit:
    02.01.2008
    Versuch mal, das aufpoppende Untermenü mittels z-index in eine höhere Ebene zu legen...
     
  3. heldausberlin

    heldausberlin Thread Starter MacUser Mitglied

    Beiträge:
    13.862
    Zustimmungen:
    302
    Mitglied seit:
    01.05.2004
    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. :confused:
     
  4. dms

    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:
    Code:
    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.
     
  5. Hilarious

    Hilarious MacUser Mitglied

    Beiträge:
    2.161
    Zustimmungen:
    5
    Mitglied seit:
    25.11.2004
    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:

    Code:
    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 ;)
     
  6. heldausberlin

    heldausberlin Thread Starter MacUser Mitglied

    Beiträge:
    13.862
    Zustimmungen:
    302
    Mitglied seit:
    01.05.2004
    @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. :heul:
     
  7. dms

    dms

    Sorry, hab mich in der Eile eben vertan:
    Code:
    s1.addParam('wmode','transparent');
     
  8. Hilarious

    Hilarious MacUser Mitglied

    Beiträge:
    2.161
    Zustimmungen:
    5
    Mitglied seit:
    25.11.2004
    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.
     
  9. heldausberlin

    heldausberlin Thread Starter MacUser Mitglied

    Beiträge:
    13.862
    Zustimmungen:
    302
    Mitglied seit:
    01.05.2004
    @dms: Danke :thumbsup: Das tut’s erstmal vollkommen.

    @Hilarious: Werd's gleich mal testen... :)
     
  10. heldausberlin

    heldausberlin Thread Starter MacUser Mitglied

    Beiträge:
    13.862
    Zustimmungen:
    302
    Mitglied seit:
    01.05.2004
    Wo genau soll ich da den iFrame einbauen?
     
Die Seite wird geladen...
Ähnliche Themen - Rollover Navigation unter
  1. muplo
    Antworten:
    5
    Aufrufe:
    1.095
  2. Spaceranger
    Antworten:
    1
    Aufrufe:
    944
  3. Hackpod
    Antworten:
    1
    Aufrufe:
    1.111
  4. Brutto
    Antworten:
    0
    Aufrufe:
    1.175
  5. recall
    Antworten:
    5
    Aufrufe:
    652

Diese Seite empfehlen