Imageslider und z-index

Einklappen
Das ist ein wichtiges Thema.
X
X
 
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
  • alphabeet
    Contao-Nutzer
    • 07.07.2009
    • 70

    #1

    Imageslider und z-index

    Hallo

    Ich verwende dem Imageslider mit TL 2.8.0. Es läuft auch alles super, bis auf die Positionierung auf der z-Achse.
    Ich verwende die Navigation mit dem Dropdown, den es in allen TL-Templates gibt. Die Navigation ist direkt über den Imageslider-Bildern. Die Dropdown-Layer droppen hinter das Bild und noch vorne.
    Ich habe mit z-index versucht, die #mainmenu und #submenu nach vorne zu bringen und den Imageslider #top_image nach hinten, aber es scheint nicht zu funktionieren.
    Hat jemand sowas schon mal gelöst? Wo ist der Haken?

    Code:
    #mainmenu{width:992px;height:22px;background-color:#5b4d41;z-index:200;}
    #submenu{z-index:200;}
    #top_image{float:right;margin:6px 0 0;padding:0;z-index:1;}
    #elements1{position:relative;z-index:1;}
    .mod_navigation,#mainmenu,#submenu{z-index:500;}
    Alexandra
  • Schlauchbeutelmaschine
    Contao-Fan
    • 16.06.2009
    • 668

    #2
    Hallo,

    das Problem hatte ich auch schon bei anderen Elementen, ich konnte es wie folgt lösen:

    - Die Navigation am besten in den Header legen und den Imageslider in den Main Bereich
    - Anschließend folgenden Wert im CSS hinzufügen:
    HTML-Code:
    #header .inside {z-index:999;}

    Kommentar

    • alphabeet
      Contao-Nutzer
      • 07.07.2009
      • 70

      #3
      Hallo!

      Danke für den Tipp. Es könnte so funktionieren, aber leider habe ich das Problem, dass ich im Main-Bereich 3 Spalten habe, das Imagerotation-Ding sich aber über 2 Spalten erstreckt.

      Muss ich jetzt tatsächlich auf den Imagerotator verzichten? Das wäre echt schade.
      Alexandra

      Kommentar

      • ph!L
        Contao-Fan
        • 04.11.2009
        • 470

        #4
        Hatte das gleiche Problem und auch schon den z-index des Submenüs (Suckerfish) erhöht, aber mit dem #header .inside ging es dann.

        Danke :-)

        Kommentar

        • heiko
          Gesperrt
          • 25.12.2009
          • 157

          #5
          Hallo.

          Ich rätsel auch schon die ganze Zeit herum. Auf der linken Seite über dem Banner soll das Suchformular liegen. Ohne Imageslider alles in Ordnung. Mit dem Einsatz des Imageslider als Modul verschwindet es aber in den Hintergrund.

          Trotz höherem z-index des Suchformulars

          #header .inside hat eigentlich gar keine Positionierung.

          .inside hat position: static; , worüber ich das Ausklappmenü über die main bekam.

          Das imageslider-Modul hat die Klasse .banner erhalten.
          Code:
          .banner { z-index: 10; }
          Die Klasse des Suchformulars:
          Code:
          .banner_suche { z-index: 50000; }
          Versuche ich .banner_suche und .banner zu positionieren zerschiesst es mir das Layout.

          heiko

          Kommentar

          • beta
            Contao-Nutzer
            • 18.05.2010
            • 30

            #6
            ein link wäre klasse

            Kommentar

            • heiko
              Gesperrt
              • 25.12.2009
              • 157

              #7
              Ach je, den hatte ich glatt vergessen. Sorry. Hier ist er: http://www.vietnam-kompakt.de/

              Hier eine andere Seite mit dem Suchformular im Banner: http://www.vietnam-kompakt.de/die-wi...-vietnams.html

              heiko
              Zuletzt geändert von heiko; 18.06.2010, 06:14.

              Kommentar

              • beta
                Contao-Nutzer
                • 18.05.2010
                • 30

                #8
                HTML-Code:
                .suche_css{
                [..]
                z-index:3;
                }
                ... würde bei mir das gewünschte Ergebniss auspucken.

                Kommentar

                • heiko
                  Gesperrt
                  • 25.12.2009
                  • 157

                  #9
                  Ich fasse es nicht. Den z-index in der falschen Klasse gesetzt. Danke für den Tip der zum Sieg führte.

                  heiko

                  Kommentar

                  • beta
                    Contao-Nutzer
                    • 18.05.2010
                    • 30

                    #10
                    @heiko - gern geschehen

                    @alphabeet - magst auch mal einen Link geben?

                    Kommentar

                    • alphabeet
                      Contao-Nutzer
                      • 07.07.2009
                      • 70

                      #11
                      @beta oh, ich war schon lange nicht mehr im forum und hab euere antworten gar nicht mehr verfolgt. danke dir für die nachfrage. (seltsam, warum werde ich nicht per email benachrichtigt, wenn es für diesen thread einen neuen post gibt...)

                      mein erstes problem hat sich erledigt. es war auf dieser startseite: http://www.altstadt-zug.ch/
                      gelöst habe ich es zwar nicht mit
                      Code:
                      #header { .inside: 999; }
                      sondern das hier hat mir gefehlt:
                      Code:
                      #mainmenu .level_1 ul { left:999em;position:absolute;z-index:999; }
                      jetzt hab ich aber ein ähnliches problem mit divs, die halb-transparent sind, also header und container sind mit opacity. die dropdown menüs verschwinden hinter dem halbtransparenten-container-div, unsichtbar.
                      das problem habe ich allerdings nur mit IE8 (wahrscheinlich mit IE7 auch). mit FF und safari läufts.
                      einen link darf ich leider nicht posten, weil ich das kunden-projekt nicht schon vor der online-schaltung zeigen darf. ich versuche mal, etwas ähnliches nachzubauen.

                      hatte jemand auch schon probleme mit opacity und IE und z-index?
                      Alexandra

                      Kommentar

                      • beta
                        Contao-Nutzer
                        • 18.05.2010
                        • 30

                        #12
                        Ohne beispiel kann ich dir da leider nicht weiterhelfen.
                        Aber Du kannst diese Frage mal im passendem Forum posten:Layout-Templates

                        Kommentar

                        Lädt...