CSS-Dateien in TL - Wo Wie Warum - incl. suckerfish, TinyMCE

Einklappen
X
 
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
  • Andreas
    Contao-Urgestein
    • 19.06.2009
    • 7709

    #16
    Hallo hangover,

    du wirst lachen, ich habe selber gar kein Dropdown-Menü im Einsatz. Sollte ja zur Seitenstruktur passen, damit es auch Sinn macht und nicht nur einfach da sein, weil es so schön ist, dass bei mouseover was aufklappt.

    Aber du hast Recht, ich hatte mir zwischendurch auch schon mal des öfteren Gedanken über eine Lösung für deaktiviertes Javascript gemacht. Sowas mit so vielen CCs und Tabellen (ich möchte keine Tabellen, welche keine tabellarischen Daten enthalten) mag ich aber nicht.

    Da das Anzeigen der versteckten Menüpunkte ja nur in IE<=7 auch an Javascript gebunden ist, müsste man in das bereits eingefügte Javascript irgendetwas hinzufügen, das diese spezielle Formatierung der Menüliste nur dann greift, wenn das JS auch geladen wird, und im anderen Fall eine einfache unformatierte[*1] Menüliste ausgeben (evtl. plus noscript Hinweis). Vielleicht könnte man in das Element UL eine ID generieren (z.B. ie_suckerfish), dann die suckerfish_h.css so umschreiben, dass für IEs <=7 die Formatierung nicht greift, und anschließend über den ID-Selektor #ie_suckerfish (welcher dann ja nur vorhanden ist, wenn JS aktiviert ist) die Dropdown-Formatierung doch zuweist.

    Müsste aber irgendwie noch einfacher gehen. Zusätzlichen HTML-Quellcode möchte ich nicht. Im Moment hab ich keine Zeit dafür, werde ich aber sicherlich demnächst machen, wie ich mich kenne. Vielleicht lass ich die suckerfish_h.css so und schreibe eine suckerfish_h_ielte7.css, welche dann über eine CC eingebunden wird und die Formatierung so überschreibt, dass alles sichtbar wird. Erst über Javascript wird dann die eigentliche Formatierung zugewiesen. Am besten dadurch, dass das Einbinden der suckerfish_h_ielte7.css verhindert wird.

    Wenn du eine einfache vorläufige Lösung hast, würde ich sie gerne hier veröffentlichen, damit alles an einer Stelle vorhanden ist.

    Gruß Andreas

    *1 Grundsätzlich lege ich nicht so viel Wert darauf das Design mit alten Browsern so darzustellen wie es vorgesehen ist, da ich der Meinung bin, wenn man IE6 bei Höchststrafe verbieten würde, würde jeder im Nu eine Möglichkeit finden im Netz zu surfen. Straßen werden auch nicht mehr für Pferdefuhrwerke gebaut, ein Toningenieur macht sein Mastering auch nicht mehr für Röhrenradios. Je mehr Mühe wir uns geben, desto länger werden sich die alten Browser halten. Wie ich schon mal gesagt hatte, Benutzer von alten Browsern sind es gewöhnt nur die Hälfte zu sehen .
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

    Kommentar

    • bird
      Contao-Fan
      • 08.07.2009
      • 535

      #17
      Hallo Andreas,

      in Bezug auf den IE6 und ältere Browser gebe ich Dir absolut recht :-)
      Ich habe trotzdem schon einige (mehr oder weniger) abwegige Gründe gehört und gesehen, warum diese Browser trotzdem noch im Einsatz sind.

      Ich werde heute oder morgen noch zu meiner Lösung ohne JS kommen und veröffentliche diese dann gerne hier. Ich bin auch kein Freund reiner Layout-Tabellen aber in diesem Fall scheint es mir das kleinere Übel, da ja JS nicht nur an älteren Browsern hängt sondern besonders bei Institutionen wie Banken etc. oftmals "global" deaktiviert ist.
      Leider wird es sich wahrscheinlich nicht ganz vermeiden lassen, die Navi-Templates etwas zu erweitern.

      Trotzdem finde ich es für alle Suchenden eine gute Lösung, wenn man die technischen Möglichkeiten hier gleich auf einen Blick sieht und sich dann für eine Option entscheiden kann.

      Bis dahin LG
      hangover
      Zuletzt geändert von bird; 09.11.2009, 20:53.

      Kommentar

      • Graf Typo
        Contao-Nutzer
        • 25.08.2009
        • 70

        #18
        Hallo,

        auch wenn's immer mehr Off Topic wird: Warum Tabellen? Ich empfehle die Menüs von Stu Nicholls bzw. Timo Huovinen. Keine Tabellen, keine Hacks, kein Javascript und keine Conditional Comments. Und, wie der Autor schreibt:
        Tested and working in IE6, IE7, IE8 (a little buggy), Firefox, Opera, Safari(PC) and Google Chrome. Should also work in Mac browsers. Can be made to work in IE5.5 by adding the usual box model hacks to the widths.
        Es gibt bei CSSplay viele Varianten dieser Menü-Technik, zum Beispiel hier.

        Gruß,
        der Graf

        Kommentar

        • Andreas
          Contao-Urgestein
          • 19.06.2009
          • 7709

          #19
          @Graf
          Das werde ich mir auf jeden Fall ansehen, und wenn das besser ist, werde ich den Suckerfishkram oben rausschmeißen und dadurch ersetzen, denn wir wollen ja nur das beste Danke schonmal für den Hinweis. Da ich selber keine Dropdowns im Einsatz habe hatte ich nie wirklich im Netz gesucht, ich hatte immer nur überall suckerfish-suckerfish gelesen und dann versucht darauf aufzubauen.

          @hangover
          Ich würde das Tutorial hier gerne behalten, so dass alle wesentlichen Resourcen in dem ersten Post zu finden sind. Du kannst mir aber gerne etwas schicken was du entwickelt hast, wenn es mir gefällt und es zum Threadthema passt werde ich es oben veröffentlichen mit einem Hinweis auf dich. Wenn nicht, kannst du gerne einen Thread in Benutzertutorials starten. In diesem Thread geht es mir hauptsächlich um die Basis der CSS-Dateien in TL, dem Grundgerüst also. Da immer wieder an allen Ecken und Enden Probleme mit Dropdowns auftauchten wollte ich mal eine Dropdown-CSS entwickeln, und hier veröffentlichen, die out-off-the-box mit TL standard Seiten funktioniert. Ich guck jetzt erstmal was der neue Hinweis so bringt, dann würde sich Javascript ja erübrigen, ansonsten ist das natürlich wichtig, dass es auch ohne JS läuft.

          Gruß Andreas
          Bitte!
          Vor Anfragen im Forum HTML validieren.
          Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

          Vielen Dank an alle Wunschlistenerfüller
          Andreas Burg, Web Solutions

          Kommentar

          • bird
            Contao-Fan
            • 08.07.2009
            • 535

            #20
            Ja, ich werde mir den neuen Hinweis auch mal anschauen, da ich ja nicht neue Engpässe schaffen will sondern eine saubere Lösung finden, die Browserübergreifend und ohne Scripts funktioniert.

            LG
            hangover

            Kommentar

            • bird
              Contao-Fan
              • 08.07.2009
              • 535

              #21
              @Graf

              Hast Du zufällig schon mal eines dieser Menüs bei TL eingesetzt?
              Ich bin gerade dabei, die Komponenten zusammenzutragen, habe aber noch ein paar Hürden zu nehmen, bis es sauber läuft.

              Kommentar

              • Andreas
                Contao-Urgestein
                • 19.06.2009
                • 7709

                #22
                Mach ich, sobald ich dazu komme. Im Moment hab ich zu tun.

                Andreas
                Bitte!
                Vor Anfragen im Forum HTML validieren.
                Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

                Vielen Dank an alle Wunschlistenerfüller
                Andreas Burg, Web Solutions

                Kommentar

                • Thomas
                  Contao-Urgestein
                  • 16.08.2009
                  • 1947

                  #23
                  IE8 (a little buggy)
                  Das suggeriert mir schon wieder, dass man dennoch nicht ohne auskommt.
                  Gruß Thomas
                  "Zuerst ignorieren sie dich, dann lachen sie über dich, dann bekämpfen sie dich und dann gewinnst du." Mahatma Gandhi

                  Kommentar

                  • bird
                    Contao-Fan
                    • 08.07.2009
                    • 535

                    #24
                    Ja, das befürchte ich auch...
                    Daher mein erster Ansatz mit den Tabellen. Das ist bislang die einzige mir bekannte Lösung, die browserübergreifend und ohne Bugs eingesetzt werden kann.

                    Kann mir evtl. jemand von euch sagen, wo im Core die Klassenangaben (($item['class']) bzw. die Untermenüpunkte <?php echo $item['subitems']; ?> generiert werden? Mit dem TL-Stadardtemplate hab ich bei einer rein CSS basierenden Lösung irgendwie Probleme.
                    Zuletzt geändert von bird; 11.11.2009, 14:10.

                    Kommentar

                    • Graf Typo
                      Contao-Nutzer
                      • 25.08.2009
                      • 70

                      #25
                      Zitat von hangover Beitrag anzeigen
                      @Graf

                      Hast Du zufällig schon mal eines dieser Menüs bei TL eingesetzt?
                      Ich bin gerade dabei, die Komponenten zusammenzutragen, habe aber noch ein paar Hürden zu nehmen, bis es sauber läuft.
                      Nein, ich habe diese Menüs nicht im Einsatz. Aber schon oft von Stus Lösungen profitiert. So ganz doof wird das nicht sein, was er da macht ...

                      Wie du ja auf der Seite sicher gelesen hast, bittet der Autor um eine Spende. Dann wird er dir sicher alle Komponenten (und möglicherweise auch Support?) zukommen lassen.

                      Gruß,
                      der Graf

                      Kommentar

                      • Thomas
                        Contao-Urgestein
                        • 16.08.2009
                        • 1947

                        #26
                        @Andreas
                        Vergib Deinen Ebenen ab Level 2 mal einen 1px breiten Border und teste damit mal ein wenig rum!

                        Ich bekomme es nicht hin, dass keine Versätze unter den IEs ab 7 abwärts entstehen. Wobei ich den IE 5.5 sträflich und vollkommen vernachläßige.

                        EDIT:
                        @Andreas
                        Die Lösung ist eine Browserweiche und die Verhinderung, der Verdopplung von margins, paddings und borders im IE6.
                        Im IE6 darf man nur mit der hälfte von Marginwerten arbeiten, damit er die Positionen richtig definiert.

                        @Graf Typo
                        Die CSSplay Lösung gestaltet sich in der Umsetzung unter TL recht schwierig.

                        Ich halte immer noch diese Lösung für die Bessere, auch wenn sie etwas umständlicher umgestzt wird.
                        Zuletzt geändert von Thomas; 14.11.2009, 23:22.
                        Gruß Thomas
                        "Zuerst ignorieren sie dich, dann lachen sie über dich, dann bekämpfen sie dich und dann gewinnst du." Mahatma Gandhi

                        Kommentar

                        • bird
                          Contao-Fan
                          • 08.07.2009
                          • 535

                          #27
                          Hallo,

                          ich habe leider auch kein browserübergreifed gutes Ergebnis mit den rein CSS-basierenden Lösungen erreicht, zudem müsste dann im TL Core bzw. der Navi doch manches grundlegend verändert werden.

                          Ich habe mich deshalb dazu entschieden, eine entsprechende HTC-Datei (csshover.htc) zur Manipulation des DHTML Behaviours im IE einzubinden.
                          So kann alles bequem über CSS gesteuert werden, es wird nur gezielt der IE angesprochen und soweit ich bisher gesehen habe, funktioniert die Methode auch bei deaktiviertem Active Scripting.

                          Das ist m.E. auch eine passable Lösung neben Suckerfish und reinem CSS.
                          Evtl. kann man dazu auch einen Beitrag oder ein Tut verfassen, da die Implementierung im TL-Standardaufbau relativ einfach möglich ist.

                          LG
                          hangover

                          Kommentar

                          • Thomas
                            Contao-Urgestein
                            • 16.08.2009
                            • 1947

                            #28
                            Dann mach das doch mal!

                            Eine Lösung ohne ist immer besser.
                            Gruß Thomas
                            "Zuerst ignorieren sie dich, dann lachen sie über dich, dann bekämpfen sie dich und dann gewinnst du." Mahatma Gandhi

                            Kommentar

                            • bird
                              Contao-Fan
                              • 08.07.2009
                              • 535

                              #29
                              Ok, mach ich gerne
                              Ich wollte evtl. erst mal Rückmeldungen einholen, wie es mit möglichen Vor-und Nachteilen dieser Methode aussieht... Ich konnte bisher keine Nachteile entdecken, vielleicht sprechen aber manche Aspekte gegen diese Lösung.

                              Kommentar

                              • Andreas
                                Contao-Urgestein
                                • 19.06.2009
                                • 7709

                                #30
                                Zitat von Thomas Beitrag anzeigen
                                @Andreas
                                Vergib Deinen Ebenen ab Level 2 mal einen 1px breiten Border und teste damit mal ein wenig rum!

                                Ich bekomme es nicht hin, dass keine Versätze unter den IEs ab 7 abwärts entstehen. Wobei ich den IE 5.5 sträflich und vollkommen vernachläßige.

                                Ich halte immer noch diese Lösung für die Bessere, auch wenn sie etwas umständlicher umgestzt wird.
                                Hallo Thomas,

                                ich hab mal Screenshots von den 7 Browsern beigefügt. Ich habe NUR diese CSS aus der ZIP im Layout übers Head-Feld eingefügt:
                                HTML-Code:
                                <link rel="stylesheet" href="tl_files/css/basic.css" type="text/css" media="screen, projection" />
                                <link rel="stylesheet" href="tl_files/css/gridpc.css" type="text/css" media="screen, projection" />
                                <link rel="stylesheet" href="tl_files/css/elements.css" type="text/css" media="screen, projection" />
                                <link rel="stylesheet" href="tl_files/css/form.css" type="text/css" media="screen, projection" />
                                <link rel="stylesheet" href="tl_files/css/navigation.css" type="text/css" media="screen, projection" />
                                <link rel="stylesheet" href="tl_files/css/suckerfish_h.css" type="text/css" media="screen, projection" />
                                <link rel="stylesheet" href="tl_files/css/print.css" type="text/css" media="print" />
                                Die einzige Modifikation habe ich in der suckerfish_h.css vorgenommen. (BTW Ich lade gleich eine neue ZIP hoch, in welcher die Eigenschaften für das Debugging in der suckerfish_h um !important erweitert wurde).

                                line-height, margin-left und font-size habe ich auf 16px verkleinert. Die Breiten habe ich alle 4 auf 160px vergrößert (vorher 140px, margin-left nicht vergessen). Dann habe ich ein wenig formatiert - NUR (wichtig!) in den A/SPANs. Ein padding von 4px und einen border von 1px. Deswegen muss ich jetzt die Breite (nur vom A/SPAN) um 10px verkleinern auf 150px (1+4+4+1). Auch das negative margin-top, welches bisher den gleichen Wert hatte wie line-height und font-size, musste ich um 10px (1+4+4+1) von -16px auf -26px ändern. Zum Schluss musste ich noch den background-color auch in dem A/SPAN angeben.

                                Das Ergebnis siehst du in den Screenshots.

                                In der Kopfzeile h82px habe ich eine Überschrift H1 ohne umschließende DIVs und darunter das Menü mit der ID suckerfish.

                                In left b:300px und main m-l:300px habe ich einen über ein Modul-HTML mit {{insert_article::1}} eingebundenen Artikel mit Dummytext, welchem deshalb der DIV mod_article fehlt (nur "ce_text block").

                                Im footer h:60px einen nackten DIV mit ein wenig Text.

                                Nur damit habe ich es getestet, ich kann ja nicht alle möglichen Konstellationen testen. Alle davon abweichenden Formatierungen müssen individuell gecheckt werden. Wenn man nicht klar kommt, solle man sich rückwärts Stück für Stück an diese Formatierung annähern, oder direkt damit starten und sein Design langsam wieder aufbauen. Wenn man nicht genau weiß, was man da macht (so wie ich ) muss man zwischendurch immer mal wieder mit allen Browsern testen. Bevor man um Hilfe bittet (das meine ich jetzt allgemein) sollte das Dropdown zumindestens einmal mit dieser Ausgangssituation in allen Browsern funktioniert haben. Wenn man alleine das nicht hinbekommt, sollte man natürlich hier fragen. Und bei Fehlern im eigenen Design versuchen die Unterschiede zwischen dieser Vorlage hier und dem eigenen Desing zu analysieren.

                                Der von dir empfohlene Link zeigt genau das, was ich hier umgesetzt habe. Ich habe nur die Selektoren umgeschrieben, damit man an den TL-Templates nichts ändern muss und sofort das Nav-Modul richtig anspricht. Desweiteren habe ich die Maßeinheit em in px abgeändert, damit man padding, border, line-height, margin und font-size aufeinander abstimmen kann (bis jetzt keine Probleme dadurch). Und dem UL auf erster und zweiter Ebene einen z-index von 9999 gegeben.

                                Über dem eigentlichen Suckerfish-CSS musste ich noch ein paar von TL gesetzte Werte überschreiben, bzw. anpassen, da das original Suckerfish im Gegensatz zu TL in einem UL liegt, welchem direkt ein DIV mit dem Inhalt folgt. Das Original hat im Gegensatz zu TL keine weiteren CSS-Formatierungen. Der Umstand mit den vielen Containern, den Floats und den Browserhacks in TL (YAML auch) macht diese Anpassungen nötig.

                                Leider bin ich immer noch nicht dazu gekommen die Lösung von Stu Nicholls umzusetzen und zu testen. Auch auf die Lösung mit HTC bin ich gespannt, das hatte ich mal im Rahmen von rounded corners ausprobiert und bin daran gescheitert. Irgendwie war mir auch nicht klar, was da eigentlich passiert.

                                Gruß Andreas
                                Angehängte Dateien
                                Bitte!
                                Vor Anfragen im Forum HTML validieren.
                                Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

                                Vielen Dank an alle Wunschlistenerfüller
                                Andreas Burg, Web Solutions

                                Kommentar

                                Lädt...