Pit: DIVs werden nicht nebeneinander dargestellt

Hallo,

leider stimmt mein Titel nicht ganz, denn nur in meinem Produktivscript werden die DIVs nicht nebeneinander dargestellt, in meinem Fiddle funktioniert es prächtig.

Habt Ihr trotzdem einen Tip für mich, wie ich dem Fehler im Produktivscript auf die Schliche kommen kann? Wie geht man in soi einem Fall vor?

Pit

  1. Hallo Pit,

    Habt Ihr trotzdem einen Tip für mich, wie ich dem Fehler im Produktivscript auf die Schliche kommen kann? Wie geht man in soi einem Fall vor?

    Indem du Matthias Hinweis nun mal endlich beherzigst vielleicht? Oder zumindest, mal einen Screenshot, wenn es tatsächlich der gleiche Quelltext wie bei fiddle ist?

    Pit

    Gruss
    Henry

    1. Hallo Henry,

      Indem du Matthias Hinweis nun mal endlich beherzigst vielleicht? Oder zumindest, mal einen Screenshot, wenn es tatsächlich der gleiche Quelltext wie bei fiddle ist?

      Hatte das Post von Matthias noch gar nicht gelesen. Inzwischen hat sich das Problem aber gelöst, ich hatte (dummerweise) schlicht vergessen, die neue css-datei auch zu speichern. Auch sowas kommt schonmal vor... 😕

      Pit

  2. Tach!

    Habt Ihr trotzdem einen Tip für mich, wie ich dem Fehler im Produktivscript auf die Schliche kommen kann? Wie geht man in soi einem Fall vor?

    Im Browser die Entwicklertools öffnen und die Elemente untersuchen, nebst der Anzeige des CSS, welche Regeln da aus welchen Quellen und in welcher Priorität wirken. Wenn man mit der Maus über die Elemente im DOM fährt, sieht man auch, welche Außen- und Innenabstände ein Element hat, was auch hilfreich sein kann, um die Ursachen für den Platzbedarf und daraus folgende Umbrüche zu erkennen.

    dedlfix.

    1. Hi dedlfix,

      Im Browser die Entwicklertools öffnen und die Elemente untersuchen, nebst der Anzeige des CSS, welche Regeln da aus welchen Quellen und in welcher Priorität wirken.

      Mache ich immer wieder, und ich komme auch immer wieder damit zurecht, aber leider nciht immer.

      Wenn man mit der Maus über die Elemente im DOM fährt, sieht man auch, welche Außen- und Innenabstände ein Element hat, was auch hilfreich sein kann, um die Ursachen für den Platzbedarf und daraus folgende Umbrüche zu erkennen.

      Wo siehst du die? Ich sehe nur die Abmessungen des Elements.

      Pit

      1. Tach!

        Wenn man mit der Maus über die Elemente im DOM fährt, sieht man auch, welche Außen- und Innenabstände ein Element hat, was auch hilfreich sein kann, um die Ursachen für den Platzbedarf und daraus folgende Umbrüche zu erkennen.

        Wo siehst du die? Ich sehe nur die Abmessungen des Elements.

        Das Element wird auf der Seite hervorgehoben und man sieht andersfarbig Margin und Padding drumherum.

        dedlfix.

        1. Hi dedlfix,

          Das Element wird auf der Seite hervorgehoben und man sieht andersfarbig Margin und Padding drumherum.

          Entweder sehe ich es nicht oder bei mir wird nichts hervorgehoben. Ich schau mal im Netz nach, ob es Bilder davon gibt.

          Pit

          1. Hej Pit,

            Hi dedlfix,

            Das Element wird auf der Seite hervorgehoben und man sieht andersfarbig Margin und Padding drumherum.

            Entweder sehe ich es nicht oder bei mir wird nichts hervorgehoben. Ich schau mal im Netz nach, ob es Bilder davon gibt.

            Es gibt sogar Videos davon in YouTube und Co…

            Marc

          2. Hallo Pit,

            ich glaube dedlfix meint folgendes

            Dieses geht wenn du die Entwicklungstools eingeschalten hast.

            Bis bald!
            Meowsalot (Bernd)

            1. Tach!

              ich glaube dedlfix meint folgendes

              Genau das. Blau ist der Inhalt, orange ist anzunehmenderweise Margin.

              dedlfix.

  3. Hallo nochmal,

    gibt es einen Weg, das Bla Bla Bla - Div in seiner Breite immer so anzupassen, dass es sich den Restplatz der Viewportbreite nimmt, also quasi immer den Platz Viewportbreite - xxxxxxxxxxxxxDiv?

    Pit

    1. Hej Pit,

      Hallo nochmal,

      gibt es einen Weg, das Bla Bla Bla - Div in seiner Breite immer so anzupassen, dass es sich den Restplatz der Viewportbreite nimmt, also quasi immer den Platz Viewportbreite - xxxxxxxxxxxxxDiv?

      Sowohl flexbox, als auch grid sind dafür geeignet, außerdem die calc-Funktion. (Breite 100% - bekannte Größe des vorhandenen Elementes).

      In 60% aller Fälle dürfte grid sinnvoll sein, in 35% aller Fälle Felxbox und nur bei wenigen Ausnahmen die calc-Funktion…

      Marc

      1. Hi Marc,

        In 60% aller Fälle dürfte grid sinnvoll sein, in 35% aller Fälle Felxbox und nur bei wenigen Ausnahmen die calc-Funktion…

        Mir gefällt die calc-Idee am besten. Für Grid müßte ich sicher wissen, wieviel Platz ich für das xxxxxxxxxxxxxDiv benötige, oder? Dieses DIV kann sich aber immer wieder mal in der Breite ändern. Flexbox habe ich noch nie benutzt und kenne dementsprechend nicht und calc habe ich auch noch nie benutzt, habe aber eine Vorstellung von der Funktionsweise.

        Pit

        1. Hej Pit,

          In 60% aller Fälle dürfte grid sinnvoll sein, in 35% aller Fälle Felxbox und nur bei wenigen Ausnahmen die calc-Funktion…

          Mir gefällt die calc-Idee am besten. Für Grid müßte ich sicher wissen, wieviel Platz ich für das xxxxxxxxxxxxxDiv benötige, oder? Dieses DIV kann sich aber immer wieder mal in der Breite ändern. Flexbox habe ich noch nie benutzt und kenne dementsprechend nicht und calc habe ich auch noch nie benutzt, habe aber eine Vorstellung von der Funktionsweise.

          Der Einwand von @Gunnar Bittersmann lässt mich vermuten, dass es um einen konkreten, mir nicht bekannten Anwendungsfall geht. Scheint, als ob flex hier das Mittel der Wahl ist. Vermutlich habt ihr im anderen Thread bereits darüber geredet?

          Marc

        2. @@Pit

          Flexbox habe ich noch nie benutzt und kenne dementsprechend nicht und calc habe ich auch noch nie benutzt

          Tja, dann wird’s wohl jetzt mal Zeit.

          A Complete Guide to Flexbox lesen, Flexbox Froggy spielen.

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. Hallo Gunnar,

            Flexbox Froggy spielen.

            guter Tip, nette Lernidee +1

            Gruss
            Henry

            1. @@Henry

              Flexbox Froggy spielen.

              guter Tip, nette Lernidee +1

              Ich bin auch gerade nochmal durch.

              LLAP 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. Hallo Gunnar,

                Ich bin auch gerade nochmal durch.

                ohh… hänge auch am letzten Level durch. Bitte nicht die Lösung posten.

                Gruss
                Henry

              2. Flexbox Froggy spielen.

                Etwas schade, dass die Schwierigkeit bis zum Level 23 kaum ansteigt, dann Level 24 so knifflig ist. Da sollte es noch einige Zwischenstufen mit wachsendem Anspruch geben.

                1. Hej ottogal,

                  Flexbox Froggy spielen.

                  Etwas schade, dass die Schwierigkeit bis zum Level 23 kaum ansteigt, dann Level 24 so knifflig ist. Da sollte es noch einige Zwischenstufen mit wachsendem Anspruch geben.

                  Finde auch, dass flexbox schwieriger sein sollte…

                  Marc

          2. @@Gunnar Bittersmann

            A Complete Guide to Flexbox lesen, Flexbox Froggy spielen.

            Und dann noch:

            A Complete Guide to Grid lesen, Grid Garden spielen.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. @@Gunnar Bittersmann

              A Complete Guide to Flexbox lesen, Flexbox Froggy spielen.

              Und dann noch:

              A Complete Guide to Grid lesen, Grid Garden spielen.

              Danke für die Links!

              Ich habe allerdings auf andere Seiten ausweichen müssen, weil ich des eglischen nicht mächtig genug bin, um sowas in englisch zu lernen.

              Pit

              1. Hej Pit,

                @@Gunnar Bittersmann

                Ich habe allerdings auf andere Seiten ausweichen müssen, weil ich des eglischen nicht mächtig genug bin, um sowas in englisch zu lernen.

                Dann empfehle ich Dir, dich nach und nach in die offiziellen Standards einzuarbeiten. Das englisch ist zwar extrem schwierig, aber sehr konsistent!

                Bedeutet: der dort verwendete Wortschatz ist auch für Leute mit guten Englischkenntnissen abstoßend schwierig zu verstehe (habe ich seinerzeit jedenfalls so empfunden) und was die einzelnen Worte und Begriffe (z.B. programmatically determinable oder so) meinen, muss auch von denen erst noch erlernt werden, die mit der englischen Sprache aufgewachsen sind.

                Dafür tauchen diese Begriffe dann aber immer wieder auf und je mehr und je öfter man die Specifications liest, desto besser versteht man diese dann. Sekundär-Quellen, wo mal diese, mal jene Begriffe für ein und dieselbe Sache benutzt werden, sind da auf Dauer vielleicht eher schwieriger…

                Noch anders gesagt: es sind neue Vokabeln zu lernen, diese sind aber überschaubar in der Zahl und werden sehr konsequent und konsistent verwendet.

                Marc

                1. Hi Marc,

                  Danke für den Tipp und Hinweis. Ich werde versuchen.

                  Pit

      2. @@marctrix

        Sowohl flexbox, als auch grid sind dafür geeignet, außerdem die calc-Funktion. (Breite 100% - bekannte Größe des vorhandenen Elementes).

        calc() wohl weniger, denn da müsstest du die unbekannte Größe des vorhandenen Whitespaces zwischen den inline-block-Elementen in die Rechnung einbeziehen.

        In 60% aller Fälle dürfte grid sinnvoll sein, in 35% aller Fälle Felxbox

        Die Abschätzung kann ich nicht nachvollziehen. Und das wäre wohl ganz klar ein Fall aus den 35%.

        Oder wie willst du mit Grid eine Spalte so breit wie möglich und eine Spalte so schmal wie möglich hinbekommen?

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Hej Gunnar,

          Oder wie willst du mit Grid eine Spalte so breit wie möglich und eine Spalte so schmal wie möglich hinbekommen?

          In meinem Alltag habe ich meist mit einer Spalte zu tun, die eine feste Breite hat und daneben einen Bereich, der den restlichen Platz ausfüllen muss.

          Mir schien, bei Pit liegt der Fall ähnlich…

          Marc

          1. @@marctrix

            Oder wie willst du mit Grid eine Spalte so breit wie möglich und eine Spalte so schmal wie möglich hinbekommen?

            In meinem Alltag habe ich meist mit einer Spalte zu tun, die eine feste Breite hat und daneben einen Bereich, der den restlichen Platz ausfüllen muss.

            Mir schien, bei Pit liegt der Fall ähnlich…

            Von fester Breite war hier nirgends die Rede. (Oder habe ich was übersehen?)

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. Hi,

              Von fester Breite war hier nirgends die Rede. (Oder habe ich was übersehen?)

              Nein, war nicht.

              Pit

              1. Hej Pit,

                Von fester Breite war hier nirgends die Rede. (Oder habe ich was übersehen?)

                Nein, war nicht.

                Dann kann man die Aufteilung entweder ganz dem Browser überlassen oder die Anforderung gilt, die @Gunnar Bittersmann benannt hat, nämlich dass eine Spalte möglichst schmal, eine möglichst breit sien soll. Die habe ich wiederum nirgends gefunden 😉

                Marc

    2. @@Pit

      gibt es einen Weg, das Bla Bla Bla - Div in seiner Breite immer so anzupassen, dass es sich den Restplatz der Viewportbreite nimmt, also quasi immer den Platz Viewportbreite - xxxxxxxxxxxxxDiv?

      Ja. Kinderspiel, wenn der Container (in dem Fall footer) ist eine Flexbox ist: flex-grow.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  4. @@Pit

    in meinem Fiddle funktioniert es prächtig.

    Das div.navcontainer ist ein Grid mit 3 Spalten, in dem sich genau ein Griditem footer befindet, welches sich über alle Spalten erstreckt. Recht sinnfrei.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. @@Gunnar Bittersmann

      Das div.navcontainer ist ein Grid mit 3 Spalten, in dem sich genau ein Griditem footer befindet, welches sich über alle Spalten erstreckt. Recht sinnfrei.

      ... würde man denken. Ist es im fiddle auch, aber im Produktivscript ist das 3-spaltige grid mit Logo, Titel und ähnlichem gefüllt.

      Pit