Henry: Responsive Bild Flex Lücke BUG?

problematische Seite

Hallo,

Innerhalb eines Flexcontainers befinden sich verschiedene Elemente. Auch ein Bild, welches sich responsive verhalten soll.

Beispiel hier

Wo kommt der Abstand her, wenn die Größenangabe unter 100% und gleichzeitig <a href… drum herum ist? Macht das Sinn oder ist das ein BUG?

Gruss
Henry

  1. problematische Seite

    Hallo Henry,

    Wo kommt der Abstand her, wenn die Größenangabe unter 100% und gleichzeitig <a href… drum herum ist? Macht das Sinn oder ist das ein BUG?

    Flex hat Einfluss auf die Kinder eines Elements. Du formatierst aber in beiden Fällen .flex img. Im zweiten Fall ist das Kind des Flexcontainers aber das a-Element, nicht das Bild.

    Bis demnächst
    Matthias

    --
    Rosen sind rot.
    1. problematische Seite

      Hallo Matthias,

      Flex hat Einfluss auf die Kinder eines Elements. Du formatierst aber in beiden Fällen .flex img. Im zweiten Fall ist das Kind des Flexcontainers aber das a-Element, nicht das Bild.

      Komme nicht dahinter. Der Selektor referenziert doch auch das Bild. Hab jetzt mal erfolglos hin und her probiert und bin schon fast soweit das komplett umzustricken. Aber muss doch gehen.

      Gruss
      Henry

      1. problematische Seite

        Hallo

        Aber muss doch gehen.

        Klar. Mit korrektem, aktuellem HTML und CSS.

        Wobei du langsam mal erkennen solltest das deine Testseiten dich nicht weiterbringen. Zudem willst du per CSS noch zu viel bestimmen und bastelst dir dadurch Stolperfallen über die dann dann selbst fällst.

        Einige CSS-Angaben erscheinen zudem sinnfrei. Zum Beispiel die Bildbreite auf 50 % minimieren. Mit der Praxis hat das nix zu tun.

        Das Problem hat Matthias Apsel bereits vollkommen richtig beschrieben. Vielleicht hilft dir ja ein praktisches Beispiel.

        Ich sehe zum Beispiel aus deinen sinnfreien Angaben eher das folgende HTML

        <h2>Ohne Link</h2>
        <div class="flexy2">
           <p>Ich bin der König der Welt! Ich habe die Welt erschüttert.</p>
           <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/DE-Wikipedia-2-Millionen-Artikel.svg/209px-DE-Wikipedia-2-Millionen-Artikel.svg.png" alt="Beispielbild">
           <p>Ich werde das Kämpfen nicht vermissen, das Kämpfen wird mich vermissen.</p>
        </div>
        <h2>Mit Link</h2>
        <div class="flexy3">
           <p>Ich bin der König der Welt! Ich habe die Welt erschüttert.</p>
           <a href="">
              <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/DE-Wikipedia-2-Millionen-Artikel.svg/209px-DE-Wikipedia-2-Millionen-Artikel.svg.png" alt="Beispielbild">
           </a>
           <p>Ich werde das Kämpfen nicht vermissen, das Kämpfen wird mich vermissen.</p>
        </div>
        

        mit diesem CSS

        img {
           display: block;
           max-width: 100%;
           border: 0;
        }
        .flexy2,
        .flexy3 {
           border: 3px solid blue;
           width: 80%;
           margin: auto;
           display: flex;
           align-items: center;
           justify-content: center;
        }
        

        Beispiel zum Testen:

        Beispielseite

        Gruss

        MrMurphy

        1. problematische Seite

          Hallo MrMurphy1,

          Zunächst mal vielen Dank für deine Mühe. Die Art und Weise deiner Antwort allerdings, wie auch der faktische Inhalt, finde ich, ich sag es mal höflich, merkwürdig.

          Klar. Mit korrektem, aktuellem HTML und CSS.

          Was daran falsch ist, kannst du auch erklären?

          Wobei du langsam mal erkennen solltest das deine Testseiten dich nicht weiterbringen.

          Weil?

          Zudem willst du per CSS noch zu viel bestimmen und bastelst dir dadurch Stolperfallen über die dann dann selbst fällst.

          Zuviel bestimmen?

          Einige CSS-Angaben erscheinen zudem sinnfrei.

          Sinnfrei? Im Sinne von nutzlos. Ja, das scheint wohl dein Lieblingswort zu sein.

          Zum Beispiel die Bildbreite auf 50 % minimieren. Mit der Praxis hat das nix zu tun.

          Wer redet denn von Praxis? Hat mal rein gar nichts mit meiner Frage zu tun und mache ich nur deshalb um das Beispiel optisch angenehmer darzustellen ohne den, der Frage betreffenden, Code durch unnütze Angaben, zu verkomplizieren. Also hättest du dir sparen können.

          Das Problem hat Matthias Apsel bereits vollkommen richtig beschrieben. Vielleicht hilft dir ja ein praktisches Beispiel.

          Vielleicht. Nur dein Beispiel leider nicht. Dass es nicht, wie erwartet, in jedem Browser funktioniert brauche ich wohl nicht zu erklären, damit meine ich nicht nur IE. Hinzu kommt, dass in allen Browsern justify-content: center; nicht mehr greift, alles linksbündig.

          Ich sehe zum Beispiel aus deinen sinnfreien Angaben eher das folgende HTML

          <h2>Ohne Link</h2>
          

          Ja sags ruhig wieder, also nutzlos. Aber warum?

          Beispiel zum Testen:

          Beispielseite

          Tja, bringt mich leider nur nicht weiter.

          Nebenbei bemerkt, Du kritisierst einen Body auf 50%, was nicht mal für realen Betrieb gedacht ist, postest hier in einer arroganten von oben herab Manier und nötigst aber deine Besucher, denn deine Beispiel sieht schon sehr öffentlich aus, zu Google(Connection)Schriften.

          /*Icon-Font - font-family: 'FontAwesome';*/
             @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);
          
             /*Überschriften - font-family: 'Roboto Slab', Serif;*/
             @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);
          
             /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
             @import url(https://fonts.googleapis.com/css?family=Roboto);
          
             /*Zahlen* - font-family: 'Merriweather';*/
             @import url(https://fonts.googleapis.com/css?family=Merriweather);
          

          Auch ist viel nutzloser Code-Ballast vorhanden, der manchen Leuten "sinnfrei" erscheinen könnte.

          /*Listen dl*/
             @media all {
                dl {
                   margin: 0.5rem 0rem 0.5rem 0rem;
                }
                dt,
                dd {
                }
                dt {
                   font-weight: bold;
                   margin: 0rem 0rem 0rem 0rem;
                }
                dd {
                   margin: 0rem 0rem 1rem 0rem;
                }
                dd p {
                   margin: 0rem 0rem 0rem 0rem;
                }
             }
          

          Ich wundere mich auch darüber, warum man Blockelemente nochmal so deklarieren muss

           header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
                   display: block;
                }  
          
          

          Aber du wirst wahrscheinlich deine Gründe habe, die ich daher auch nicht als "sinnfrei" bezeichnen möchte, denn diese Sachen betreffen ja auch sowieso nicht die Thematik und anmaßen möchte ich mir auch nichts. Allerdings, wie man in den Wald hineinruft, so kommt es auch heraus.

          Gruss
          Henry

          1. problematische Seite

            @@Henry

            Dass es nicht, wie erwartet, in jedem Browser funktioniert brauche ich wohl nicht zu erklären

            *gähn*

            postest hier in einer arroganten von oben herab Manier

            ??

            und nötigst aber deine Besucher […] zu Google(Connection)Schriften.

            Wenn man die Privatsphäre seiner Seitenbesucher achtet, sollte man Webfonts wohl besser selbst hosten und nicht von Google einbinden, ja.

            Übrigens liefert http://fontawesome.io/assets/font-awesome/css/font-awesome.css kein Stylesheet, sondern eine Fehlerseite.

            Und man kann Font Awesome auch als SVG einbinden. Sollte man. Seriously, Don’t Use Icon Fonts. S.a. diesen Thread.

            Auch ist viel nutzloser Code-Ballast vorhanden, der manchen Leuten "sinnfrei" erscheinen könnte.

            Damit meinst du dt, dd { }?

            Aber wo wir gerade dabei sind: Mit den Regeln

            /*Listen dl*/
               @media all {
                  dl {
                     margin: 0.5rem 0rem 0.5rem 0rem;
                  }
                  dt,
                  dd {
                  }
                  dt {
                     font-weight: bold;
                     margin: 0rem 0rem 0rem 0rem;
                  }
                  dd {
                     margin: 0rem 0rem 1rem 0rem;
                  }
                  dd p {
                     margin: 0rem 0rem 0rem 0rem;
                  }
               }
            

            wird

            <dl>
            	<dt>Punkt 1</dt>
            	<dd>Geschwafel</dd>
            	<dd>und noch was</dd>
            	<dt>Punkt 2</dt>
            	<dd>Was ist der Punkt?</dd>
            </dl>
            
            

            folgendermaßen gerendert:

            Punkt1
            Geschwafel
             
            und noch was
             
            Punkt 2
            Was ist der Punkt?

            Es sollte doch aber eher so aussehen:

            Punkt1
            Geschwafel
            und noch was

            Punkt 2
            Was ist der Punkt?

            D.h. der Abstand ist nicht als margin-bottom für dd, sondern als margin-top für dt zu realisieren.

            Außerdem: Wenn man nun eine solche Liste mit dl { font-size: 3em } beonders hervorhebt, dann sind die Abstände viel zu klein. Die Abstände sollten sich auf die aktuelle Schriftgröße beziehen, nicht auf die Basisschriftgröße; also in em angegeben werden, nicht in rem.

            Ich wundere mich auch darüber, warum man Blockelemente nochmal so deklarieren muss

             header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
                     display: block;
                  }  
            
            

            Ernsthaft jetzt? Du bist doch derjenige, der immer noch für alte Browser optimieren will. Und da wundert es dich, dass man dann solch eine Regel im Stylesheet hat?

            LLAP 🖖

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

            Hallo Henry,

            Das Problem hat Matthias Apsel bereits vollkommen richtig beschrieben. Vielleicht hilft dir ja ein praktisches Beispiel.

            Vielleicht. Nur dein Beispiel leider nicht.

            In deinem ersten Beispiel sind h3 und img flex-items. Im zweiten sind h3 und a flex-items. Die flex-items dehnen sich auf den entsprechenden Platz aus.

            Mach eine outline um den Link, dann siehst du es. Überlege dir zudem, worauf sich die 50% Maximalbreite jeweils bezieht.

            MrMurphys Kritik mag harsch klingen, beachte sie dennoch.

            Bis demnächst
            Matthias

            --
            Rosen sind rot.
            1. problematische Seite

              Hallo Matthias,

              Mach eine outline um den Link, dann siehst du es. Überlege dir zudem, worauf sich die 50% Maximalbreite jeweils bezieht.

              ahh… jetzt verstehe ich, was ihr mit den 50% meint. Hatte was anderes im Kopf, weil ich manchmal den Body fürs Beispiel verkleinere, habe ich hier aber gar nicht gemacht. Dann ist das natürlich was anderes und ist sehr wohl ein Faktor. Aber genau der um den es hier geht. Die Sache sieht doch so aus, bei kleiner 100% oder keinen Link drum herum, ist alles gut, nur eben nicht in Kombi. Und das ist ja mein Problem. Was mich allerdings überrascht, und das macht diesen Thread dann doch wertvoll für mich und sicher auch andere, ist die automatische Skalierung ohne max- es reicht also auch width. Das ist insofern interessant, weil egal wo du im Netz suchst, knallt dir immer ein Must-Do entgegen für responsive Bilder das da lautet: max-width:100%;height:auto; was ja auch richtig ist, weil natürlich sonst das Bild grösser erscheinen kann als es eigentlich ist und damit nicht schön. Jetzt muss ich nur nopch rausfinden, wie ich es anstelle, dass ein Bild zb. maximal 70% seiner Originalgröße(nicht seines Elternelements) anzeigt und das Layout nicht zerstört.

              Und das scheint doch offensichtlich gar nicht so einfach zu sein, auch das aktuelle Beispiel von McMurphy funktioniert nicht wie erwartet, werde aber gleich mit der neuen Erkenntnis weiter probieren, wollte nur schon mal antworten.

              @Gunnar

              Zur Browserkompatibilität sagst du:

              *gähn

              Bei anderen Sachen bist du oft ein Erbsenzähler 😉 vor dem Herrn aber wenn 10-20% der User hier das Ganze fehlerhaft angezeigt bekommen ist das nur "*gähn"? Seltsame Prioritäten.

              Nur mal um zu zeigen wie es bereits mit Samsung Internet und IE (Exoten noch gar nicht berücksichtigt) aussieht und dieser Marktanteil ist schon hoch genug um dem Beachtung zu schenken.

              Was die Codezeilen von Murphy betrifft, damit meinte ich gar nicht deren Richtigkeit, sondern dass sie fürs Beispiel, weil auch vieles inhaltsleer, keine Bedeutung haben, womit ich nur "sinnfrei" hinterfragen wollte. Egal, nicht wichtig.

              Wichtiger ist aber dann wohl auch für dich, sofern du nicht auch noch FF als Browser ignorieren willst, dies (unterschiedliche Browser, unterschiedliches Verhalten, kein Browser wie gewünscht):

              @McMurphy

              Gleichzeitig habe ich den Text gekürzt, damit man auch direkt sehen kann, dass der Inhalt zentriert dargestellt wird. Also nichts mit linksbündig.

              Tja, dann stimmt wohl irgendwas nicht mit meiner Perspektive, oder deiner? (Und das ist FF, kommt mir also nicht mit Browserproblem.)

              @Matthias Apsel

              MrMurphys Kritik mag harsch klingen, beachte sie dennoch.

              Das tue ich immer. Es fällt allerdings schwer, wenn jemand sich ein wenig unfehlbar und besser als andere gibt (kommt zumindest für mich so rüber), sein überragendes Beispiel dann aber letztendlich auch versagt. Ich meine keiner von uns hier hat die absolute unumstößliche Weisheit mit Löffeln gegessen, und so soll jeder von jedem lernen, das geht auch ohne Selbsterhöhung.

              Gruss
              Henry

              1. problematische Seite

                Hallo

                dann stimmt wohl irgendwas nicht mit meiner Perspektive

                Keine Ahnung, was du siehst. Der Inhalt des Flex-Containers ist zentriert.

                Du willst offensichtlich etwas anderes: Die drei im Flex-Container enthaltenen Container (Flex-Items) sollen alle gleich breit sein. Das ist sachlich etwas anderes. Dazu sind entsprechende zusätzliche CSS-Anweisungen erforderlich.

                Mit justify-content: center; wird der Inhalt des Flex-Containers zentriert, nicht aber gleichzeitig alle enthaltenden Container gleich breit dargestellt.

                Bei Flexbox geht es in erster Linie um Leerraumverteilung. Deshalb ist das Verhalten vollkommen korrekt, auch bei deinen Beispielen.

                Gruss

                MrMurphy

              2. problematische Seite

                Hallo Henry,

                weil egal wo du im Netz suchst, knallt dir immer ein Must-Do entgegen für responsive Bilder das da lautet: max-width:100%;height:auto;

                Flexbox und Grid nehmen dir da schon etwas ab. Und wenn du dann mit anderen Abmessungswünschen dazwischenfunkst, kann das schon schief gehen.

                dass ein Bild zb. maximal 70% seiner Originalgröße(nicht seines Elternelements) anzeigt und das Layout nicht zerstört.

                Warum soll man ein Bild in 100% der Abmessungen übertragen, wenn man es dann immer(!) verkleinert??

                @Gunnar

                Zur Browserkompatibilität sagst du:

                *gähn

                Nein, nicht zur Browserkompatibilität, sondern zu deinem Wunsch, irrelevanten Browsern die neuesten Optionen verpassen zu wollen.

                Bei anderen Sachen bist du oft ein Erbsenzähler 😉 vor dem Herrn aber wenn 10-20% der User hier das Ganze fehlerhaft angezeigt bekommen ist das nur "*gähn"? Seltsame Prioritäten.

                Es ist wichtig, dass die Seite bedienbar ist.

                Nur mal um zu zeigen wie es bereits mit Samsung Internet und IE (Exoten noch gar nicht berücksichtigt) aussieht und dieser Marktanteil ist schon hoch genug um dem Beachtung zu schenken.

                Für ganz schmale Browser müsste man vielleicht noch was tun.

                Für ein theoretisches Beispiel würde ich allerdings den Aufwand nicht treiben wollen.

                Was die Codezeilen von Murphy betrifft, damit meinte ich gar nicht deren Richtigkeit, sondern dass sie fürs Beispiel, weil auch vieles inhaltsleer, keine Bedeutung haben, womit ich nur "sinnfrei" hinterfragen wollte. Egal, nicht wichtig.

                Das ist ein Grundgerüst, das MrMurphy für jedes seiner Beispiele verwendet.

                Wichtiger ist aber dann wohl auch für dich, sofern du nicht auch noch FF als Browser ignorieren willst, dies (unterschiedliche Browser, unterschiedliches Verhalten, kein Browser wie gewünscht):

                aber alle Inhalte sind zugänglich.

                Gleichzeitig habe ich den Text gekürzt, damit man auch direkt sehen kann, dass der Inhalt zentriert dargestellt wird. Also nichts mit linksbündig.

                Tja, dann stimmt wohl irgendwas nicht mit meiner Perspektive, oder deiner? (Und das ist FF, kommt mir also nicht mit Browserproblem.)

                text-align: center vergessen?

                MrMurphys Kritik mag harsch klingen, beachte sie dennoch.

                sein überragendes Beispiel dann aber letztendlich auch versagt.

                Definiere versagen.

                Bis demnächst
                Matthias

                --
                Rosen sind rot.
        2. problematische Seite

          Hallo

          Da es offensichtlich einige User überfordert die entscheidenden HTML- und CSS-Angaben zu erkennen, obwohl ich sie extra in meinem Beitrag genannt habe, habe ich das Beispiel entsprechend angepasst. So können sich hoffentlich alle auf das eigentliche Problem konzentrieren.

          Gleichzeitig habe ich den Text gekürzt, damit man auch direkt sehen kann, dass der Inhalt zentriert dargestellt wird. Also nichts mit linksbündig.

          Gruss

          MrMurphy

    2. problematische Seite

      hallo

      Flex hat Einfluss auf die Kinder eines Elements. Du formatierst aber in beiden Fällen .flex img. Im zweiten Fall ist das Kind des Flexcontainers aber das a-Element, nicht das Bild.

      na und?

      Die Frage ist doch, warum werden flex-Children so angelegt, als ob auf derene eigene Children keine scaling-Regeln bestehen würden?

      Der aktuelle Standard ist auf jeden Fall nicht explicit.

      Die Neuerung flex-basis:content verweist ev. darauf, dass das kein Bug ist. Aber auch das ist eher Kaffeesatz lesen. Das demonstrierte Verhalten ist auf jeden Fall nicht verständlich und die Frage legitim.

      1. problematische Seite

        hallo

        hallo

        Flex hat Einfluss auf die Kinder eines Elements. Du formatierst aber in beiden Fällen .flex img. Im zweiten Fall ist das Kind des Flexcontainers aber das a-Element, nicht das Bild.

        na und?

        Die Frage ist doch, warum werden flex-Children so angelegt, als ob auf derene eigene Children keine scaling-Regeln bestehen würden?

        Der aktuelle Standard ist auf jeden Fall nicht explicit.

        Die Neuerung flex-basis:content verweist ev. darauf, dass das kein Bug ist. Aber auch das ist eher Kaffeesatz lesen. Das demonstrierte Verhalten ist auf jeden Fall nicht verständlich und die Frage legitim.

        Also, wir haben ein img, das im ersten Fall 50% max-width des flex-containers hat. Im zweiten Fall jedoch 50% max-width des Flex-child Ankerelements hat.

        Wer nun annimmt, dass das a Element flex-shrink erleben sollte (tut es auch, aber eben nicht über den erhofften Bereich), verlangt nach der Inkonsistenz, dass dann das img nicht mehr max 50%-breit relativ zum Anker Element ist.

        Das vom Browser gerenderte Verhalten erachte ich deshalb als korrekt.