delbor: Flexboxen

Beitrag lesen

Hallo

Was mache ich Falsch?

Das können wir dir erst sagen wenn wir dein Problem erkennen können. Ich verstehe bislang nur dass du mit der Navigation nicht zufrieden bist. Was du im Endeffekt erreichen willst erschließt sich mir nicht.

Das Inhaltsverzeichnis auf dieser Indexseite soll sich im Hauptbereich der Seite befinden, so dass Besucher gleich einen Überblick erhalten. Nur soll dieses Inhaltsverzeichnis nicht in einer einzigen Liste alle Inhalte aufzeigen, sonder diese in verschiedenen Listen, aufgeschlüsselt nach Rubriken, aufteilen.. So dass, wie auf codepen sichtbar, in einzelnen Nav-Elementen je ein Menue zu den Rubriken platziert ist. Diese Rubriken sind:

  • Normalspurbahnen
  • Schmalspurbahnen
  • Berg-Und Zahnradbahnen

Eine weitere Schwierigkeit dir zu helfen ist

Das CSS enthält Definitionen, die ich für mein herumexperimentieren benötigte und die vor allem noch dastehen, weil ich zu faul bin, sie erneut einzutippen, sollte ich sie nochmal brauchen.

Wie sollen wir bitte erkennen welche CSS-Angaben du wirklich willst und welche nur noch leben weil du zu faul bist sie zu killen?

Ich habe das CSS nun durch eine Version ersetzt, die nur noch die im HTML auch verwendeten Definitionen enthält. Aus unerfindlichen Gründen werden die einst seitlichen Spalten nun in je einer einzigen Zeile positioniert. Notepad++, bzw. der FireFox, zeigt mir die Seite nach wie vor mit drei Spalten an. Der Bereich, um den es hier geht, ist grün eingefärbt - das ist ein (das einzige) Section-Element, das sich im Article-Element (zur Verdeutlichung blau gefärbt) befindet. In diesem Section-Element sollen sich horizontal in Abhängigkeit der Viewportgrösse mindestens 2 Nav-Elemente befinden, während sich der Rest auf weitere Zeilen verteilt und eventuell sogar eingemittet wird.

Insgesamt solltest du zunächst auch die sachlichen Fehler im CSS korrigieren. Zumindest ich sehe meine Hilfe hier im Forum nicht als Fehlersuchmaschine.

Mach ich gerne - wenn ich denn die sachlichen Fehler auch erkennen kann. Grundsätzlich kann, so wie ich das verstanden habe, eine Flexbox genau eine Ebene Flexitems enthalten, diese Flexitems aber selbst keine weitere Ebene flexibler Items. Wenn ich nun meine Recherchen richtig deute, können Flexboxen aber weiter verschachtelt werden, indem jeweils in den Flexitems weitere Flex-Container definiert werden.

Wieso erwartest du dass wir uns die Mühe machen dir zu helfen, wenn du dir offensichtlich nicht mal die Mühe machst dein CSS gegenzulesen?

Wenn ein Autor eines Buches (oder was auch immer) sein Manuskript gegenlesen will, so lässt er dies in der Regel durch eine weiteere Person machen - der Grund ist doch einfach der, dass er als Autor kaum alle Fehler selbst erkennen kann - erst recht nicht, wenn er wie ich ein Newbie in der Materie ist.

Weiterhin sehe ich mehrere float-Anweisungen, aber kein clear.

Wenn ich das nicht komplett falsch verstanden habe, ist ein Float innerhalb des Containers gültig, in der es angewendet wird und darüber hinaus allen andern Container, die sich auf der selben oder aus dieser entspringenden Ebene befindet.Wenn sich also unterhalb des aktuellen Containers keine weitere Ebene befindet und auch keine weiteren Elemente vorhanden sind, die nicht gefloated werden sollen, brauchts das clear nicht unbedingt. Was aber nicht heissen soll, dass das schön ist.

Ob float und Flexbox sich darüber hinaus stören kann erst kontrolliert werden wenn die sachlichen Fehler beseitigt sind.

Float kam nur zum Einsatz, wenn die Navigationsgruppen ohne Flexbox angeordnet werden sollten. Da sah ich das Problem vor allem darin, den Navigationsboxen prozentuale Breitenwerte zu verpassen - auf einem Desktopbildschirm gut lesbar, wär da eine Navigation auf Smartphones+Co wohl nicht mehr möglich. Übrigens - Flexboxen (bzw. Browser) ignorieren Floatwerte (steht hier auf Selfhtml).

Gruss Delbor

0 58

Flexboxen

delbor
  • css
  1. 0
    MrMurphy1
    1. 0
      Gunnar Bittersmann
    2. 0
      delbor
      1. 0
        Gunnar Bittersmann
        • css
        • flexbox
        1. 0
          delbor
          1. 0
            MrMurphy1
            1. 1
              Gunnar Bittersmann
              • zu diesem forum
              1. 0
                delbor
                • css
                • flexbox
                1. 0
                  MrMurphy1
                  1. 0
                    delbor
                    1. 0
                      Gunnar Bittersmann
                      1. 0
                        delbor
                      2. 1
                        Tabellenkalk
                        • menschelei
                        1. 0
                          Gunnar Bittersmann
                          1. 0
                            Tabellenkalk
                    2. 0
                      marctrix
                      1. 0
                        delbor
                        1. 0
                          marctrix
                2. 0
                  Gunnar Bittersmann
                  • zu diesem forum
                  1. 0
                    delbor
            2. 0
              marctrix
              1. 1
                Matthias Apsel
                • zu diesem forum
        2. 0
          Gunnar Bittersmann
  2. 0
    delbor
    1. 0
      MrMurphy1
      1. 0
        delbor
        1. 0
          Der Martin
    2. 0
      Gunnar Bittersmann
      1. 0
        delbor
        1. 0
          MrMurphy1
      2. 0
        Gunnar Bittersmann
    3. 0
      Matthias Apsel
      1. 0
        delbor
        1. 0
          MrMurphy1
          1. 0
            delbor
            1. 0
              MrMurphy1
              1. 0
                delbor
                1. 0
                  Der Martin
              2. 0
                Gunnar Bittersmann
        2. 0
          Matthias Apsel
          1. 0
            Gunnar Bittersmann
            1. 0
              Matthias Apsel
              1. 0
                Gunnar Bittersmann
                • html
                1. 0
                  Matthias Apsel
          2. 0
            delbor
            1. 0
              Gunnar Bittersmann
              1. 0
                Matthias Apsel
                1. 0
                  Gunnar Bittersmann
                  • sonstiges
                  1. 0
                    Der Martin
                    1. 0
                      Gunnar Bittersmann
    4. 0
      delbor
      1. 0
        Der Martin
        1. 0
          delbor
          1. 0
            delbor
            1. 0
              Der Martin
              1. 1
                Matthias Apsel
            2. 0
              Tabellenkalk