Bernd: Design Umsetzung

0 56

Design Umsetzung

Bernd
  • css
  • html
  1. 0
    beatovich
    1. -1
      Bernd
      1. 0

        Erledigt: Design Umsetzung

        Bernd
      2. 0
        Gunnar Bittersmann
        1. 0
          Bernd
          • meinung
          1. 0
            Gunnar Bittersmann
            1. 0
              Bernd
              1. 1
                Gunnar Bittersmann
                1. -1
                  Bernd
                  1. 0
                    marctrix
                  2. 0
                    Gunnar Bittersmann
                    1. -2
                      Bernd
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          Bernd
                          1. 1
                            Gunnar Bittersmann
                            1. 0
                              Bernd
                              1. 0
                                Gunnar Bittersmann
                                1. 0
                                  Bernd
                                  1. 0
                                    Gunnar Bittersmann
                                    1. 0
                                      Bernd
                                    2. 0
                                      beatovich
                                      1. 0
                                        Gunnar Bittersmann
                                        1. 0
                                          beatovich
                                          1. 0
                                            Gunnar Bittersmann
                          2. 0
                            marctrix
              2. 5
                ’sup
                1. 0
                  Bernd
              3. 3
                marctrix
                1. 1
                  Gunnar Bittersmann
                  1. 2
                    ’sup
                    1. 0
                      Bernd
                      1. 1
                        ’sup
                        1. 0
                          Bernd
                          1. 0
                            ’sup
                            1. 0
                              Bernd
                              1. 0
                                beatovich
                                1. 0
                                  Bernd
                                  1. 0
                                    beatovich
                                    1. 0

                                      Design Umsetzung @supports (display: grid)

                                      Bernd
                                      • css
                                      1. 0
                                        beatovich
                                        1. 0
                                          Bernd
                                          1. 0
                                            beatovich
                                            1. 0
                                              marctrix
                                              1. 0
                                                Gunnar Bittersmann
                                              2. 0
                                                beatovich
        2. 0
          beatovich
          1. 1
            Gunnar Bittersmann
            1. 0
              beatovich
              1. 0
                Gunnar Bittersmann
                1. 0
                  beatovich
                  1. 0
                    Auge
                    1. 0
                      beatovich
                      1. 0
                        marctrix
                      2. 0
                        Auge
  2. 0
    marctrix

Hallo,

eine Frage, warum bekommt das <p> auf der linken Seite neben dem Bild nicht die volle Breite?
https://codepen.io/anon/pen/GYMxJJ

Meine zweite Frage ist, warum steht E-Mail unterhalb vom Bild und nicht wie gewünscht im Bereich Adresse?

Und meine letzte Frage, wie bekomme ich es hin, dass © 2018 - Made with ♥ in Cologne auf höhe von E-Mail später steht? Muss ich da mit Padding arbeiten und kann ich sagen, ordne ein Teil ganz unten an?

  1. hallo

    Hallo,

    eine Frage, warum bekommt das <p> auf der linken Seite neben dem Bild nicht die volle Breite?
    https://codepen.io/anon/pen/GYMxJJ

    weil die <br> ganz einfach den Bedarf des textes beschränken.

    Meine zweite Frage ist, warum steht E-Mail unterhalb vom Bild und nicht wie gewünscht im Bereich Adresse?

    Weil du es im Markup nicht in diesem Bereich notiert hast.

    Und meine letzte Frage, wie bekomme ich es hin, dass © 2018 - Made with ♥ in Cologne auf höhe von E-Mail später steht? Muss ich da mit Padding arbeiten und kann ich sagen, ordne ein Teil ganz unten an?

    beschäftige dich mit justify-content und align-items.

    Eventuell aber ist Grid für dein Vorhaben besser geeignet.

    1. Hallo,

      nein Grid kommt auf keinen Fall in Frage, alte Browser verstehen diese nicht.

      1. Bin zwar noch nicht ganz glücklich, aber so sollte es funktionieren:
        https://codepen.io/anon/pen/GYMxJJ

      2. @@Bernd

        nein Grid kommt auf keinen Fall in Frage, alte Browser verstehen diese nicht.

        Du sprichst von IE 9? Ernsthaft?

        Von progessive enhancement hast du noch nie was gehört? Ernsthaft nicht?

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Ich hätte es auch gerne anderes, aber laut Google Analytics habe ich noch jede Menge User, die mit Windows XP kommen. Auch diese sollen eine schöne Seite vorfinden.

          Ich gehe jetzt mal von mir aus, wenn mir eine Seite auf Anhieb nicht gefällt, dann verlasse ich die sofort auch wenn die Angebot unschlagbar sind. Keine Ahnung warum, ich denke dann immer, scheiße sind die unseriös.

          Ach ja und nur weil ich ältere System nicht ausschließen will, vergibst du in meinem Beitrag ein -! Ernsthaft?

          1. @@Bernd

            Ich hätte es auch gerne anderes, aber laut Google Analytics habe ich noch jede Menge User, die mit Windows XP kommen.

            Was für User? Menschen?

            Ach ja und nur weil ich ältere System nicht ausschließen will, vergibst du in meinem Beitrag ein -! Ernsthaft?

            Von „auschließen“ war überhaupt keine Rede.

            Und ja, errnsthaft: Jeder Beitrag, der suggeriert, Webseiten müssten in jedem Browser exakt gleich aussehen, hat ein Minus verdient.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. Wenn also alles untereinter steht findest du dieses also "schön"? Nöö, ich 100% nicht. Und die User / Menschen 100% auch nicht. Auch Menschen die sich keine aktuelle System leisten können oder wollen, sollen schöne Seiten vorfinden.

              Eine Lösung für mein Problem hast du anscheinend auch nicht. Aber wenigstens - Punkte verteilen weil dir etwas nicht passt. Aber sind wir ja von dir gewöhnt.

              1. @@Bernd

                Wenn also alles untereinter steht findest du dieses also "schön"? Nöö, ich 100% nicht. Und die User / Menschen 100% auch nicht.

                Für die Benutzer von Uralt-Browsern (falls es solche überhaupt nocht gibt) kann untereinander normal sein. Die wissen gar nicht, dass es in anderen Browsern schöner aussieht.

                Auch Menschen die sich keine aktuelle System leisten können oder wollen, sollen schöne Seiten vorfinden.

                „Auch Menschen die sich kein Dolby-Surround-System leisten können oder wollen, sollen schönen Raumklang vorfinden.“

                Merkste selber, ne?

                LLAP 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. Mit dir zu diskutieren ist einfach nur unnötig. Jeder Designer möchte dass seine Seite überall schön ausschaut. Du hingegen willst nur moderne Technik verwenden, scheiß egal wie du damit einigen Firmen schaden könntest.

                  1. Hej Bernd,

                    Mit dir zu diskutieren ist einfach nur unnötig. Jeder Designer möchte dass seine Seite überall schön ausschaut. Du hingegen willst nur moderne Technik verwenden, scheiß egal wie du damit einigen Firmen schaden könntest.

                    Findest du die Darstellung für die Mehrheit der Nutzer (Smartphones) wirklich "nicht schön"? - Ist doch völlig in Ordnung!

                    Marc

                  2. @@Bernd

                    Jeder Designer möchte dass seine Seite überall schön ausschaut.

                    Jeder Webdesigner weiß, dass „überall schön“ nicht „überall gleich“ heißt.

                    Auf dein Getrolle gehe ich nicht weiter ein.

                    LLAP 🖖

                    --
                    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                    1. Jetzt hat der Herr keine Argumente mehr und muss gleich wieder ein - vergeben. Lächerlich wie du dich verhältst. Aber du bist hier ja bekannt nur deine Meinung zählt, alles andere interessiert dich nicht.

                      Ich steige jetzt auf Bootstrap um, dann habe ich ruhe und muss mich mit so einem Scheiß nicht weiter rumärgern.

                      1. @@Bernd

                        Jetzt hat der Herr keine Argumente mehr

                        Dass du meine Argumente nicht verstehen willst oder kannst, heißt nicht, dass ich keine hätte.

                        und muss gleich wieder ein - vergeben.

                        Und noch eins.

                        Ich steige jetzt auf Bootstrap um

                        Du hättest auch gleich sagen können, dass du CSS nicht verstehen willst oder kannst.

                        LLAP 🖖

                        --
                        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                        1. Du hättest auch gleich sagen können, dass du CSS nicht verstehen willst oder kannst.

                          Falsch! Warum ein Rad erfinden wenn es fertige Sachen gibt? Bootstrap hat alles um schöne Webseite umzusetzen.

                          PS: du kannst ja auch nicht sagen wie ich ein Bild neben den Text bekomme ohne zusätzlichem HTML. Also

                          1. @@Bernd

                            Falsch! Warum ein Rad erfinden wenn es fertige Sachen gibt?

                            Du bist derjenige, der nicht das erfundene Rad (CSS-Grid) verwenden will.

                            Bootstrap hat alles um schöne Webseite umzusetzen.

                            Muhaha! 🤣

                            Bootstrap hat alles, um eine Webseite umzusetzen, die nach Bootstrap aussieht.

                            Eine „schöne“ Webseite könnte heißen, die Seitenbreite im goldenen Schnitt aufzuteilen. Bootstrap hat nichts, um das umzusetzen.

                            LLAP 🖖

                            --
                            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                            1. Du bist derjeneige, der nicht das erfundene Rad (CSS-Grid) verwenden will.

                              Das hat nichts mit wollen zu tun. Ich möchte dass meine Seite auch auf alten Systemen schön ausschaut. Du scheinbar nicht.

                              Außerdem ob ich jetzt CSS Grid nutze oder nicht, wurde mein Ausgangsproblem nicht lösen?

                              1. @@Bernd

                                Ich möchte dass meine Seite auch auf alten Systemen schön ausschaut.

                                Auch auf alten Systemen“ impliziert, dass du möchtest, dass deine Seite auf neuen Systemen schön ausschaut.

                                Wie dir ’sup klargemacht hat, bist du davon meilenweit entfernt.

                                LLAP 🖖

                                --
                                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                                1. Man sieht du gehst der eigentlichen Frage ständig aus dem Weg. Bin mir also sicher hier geht es nur ums durchsetzten! Ob mein Problem (abgesehen von Mobile) dadurch gelöst wäre, ist noch immer nicht geklärt.

                                  1. @@Bernd

                                    Man sieht du gehst der eigentlichen Frage ständig aus dem Weg. Bin mir also sicher hier geht es nur ums durchsetzten! Ob mein Problem (abgesehen von Mobile) dadurch gelöst wäre, ist noch immer nicht geklärt.

                                    Unsinn. Die Frage ist geklärt, seit beat in der allerersten Antwort sagte: „Eventuell aber ist Grid für dein Vorhaben besser geeignet.“

                                    Der Rest des Threads dreht sich darum, dass du die Lösung nicht wahrhaben willst.

                                    LLAP 🖖

                                    --
                                    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                                    1. gut, wenn die Frage für dich geklärt ist, dann ist das eben so. Für mich noch lange nicht. Aber scheinbar bist du nur auf Krawall aus.

                                    2. hallo

                                      @@Bernd

                                      Man sieht du gehst der eigentlichen Frage ständig aus dem Weg. Bin mir also sicher hier geht es nur ums durchsetzten! Ob mein Problem (abgesehen von Mobile) dadurch gelöst wäre, ist noch immer nicht geklärt.

                                      Unsinn. Die Frage ist geklärt, seit beat in der allerersten Antwort sagte: „Eventuell aber ist Grid für dein Vorhaben besser geeignet.“

                                      Der Rest des Threads dreht sich darum, dass du die Lösung nicht wahrhaben willst.

                                      Welche Lösung?

                                      Ich bin zaghaft darin, grid als Lösung vorzuschlagen. Grid braucht fallbacks, und das heisst tests für MSIE <= 11 Edge <=15, Safari <=10.

                                      1. @@beatovich

                                        Grid braucht fallbacks

                                        Der Fallback Boxen untereinander ist bereits da.

                                        Wenn man Aufwand in einen anderen Fall back stecken möchte …

                                        und das heisst tests für MSIE <= 11 Edge <=15, Safari <=10.

                                        … dann auch das.

                                        LLAP 🖖

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

                                          @@beatovich

                                          Grid braucht fallbacks

                                          Der Fallback Boxen untereinander ist bereits da.

                                          ich kenne einen Fall wo das für MSIE 11 nicht der Fall ist. gefixt habe ich es mit einer vorangehenden Regel display:flex. Die resultierende Anzeige war parktisch gleichwertig.

                                          Verkürzende Anworten wie ein Fallback existiert bereits sind einfach nicht hilfreich.

                                          1. @@beatovich

                                            Der Fallback Boxen untereinander ist bereits da.

                                            ich kenne einen Fall […]

                                            Verkürzende Anworten wie ein Fallback existiert bereits sind einfach nicht hilfreich.

                                            Verkürzende Antworten wie „ich kenne einen Fall“ mindestens ebensowenig.

                                            Bei vernünftigem Markup sollten die Spalteninhalte in Blockelementen stehen. Damit ist der Fallback Boxen untereinander bereits da.

                                            LLAP 🖖

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

                            Bootstrap hat alles um schöne Webseite umzusetzen.

                            Na ja — Bootstrap fehlt (neben vielem anderem) die Möglichkeit zweidimensionale Grids anzulegen — die Layouts sind meist eintönig und 1 Millionen Mal gesehen.

                            Außerdem ist Bootstrap veraltet (für fast alle dort verwendete Komponenten gibt es inzwischen neuere und interessantere (schönere!) und mitunter bessere Alternativen im Netz). Ach ich fange gar nicht erst an…

                            Wer Bootstrap einsetzt, will sich Arbeit sparen. Da kann man mit Argumenten nicht gegen an — dann lerne aber bitte wenigstens Bootstrap. Und CSS. Sonst kommt nur Käse raus.

                            Widerspricht sich eigentlich, mehr lernen, um Arbeit zu sparen — und dann auch noch auf „Schönheit“ verzichten.

                            Marc

              2. Wenn also alles untereinter steht findest du dieses also "schön"?

                Nicht unbedingt. Was ich aber auf gar keinen Fall schön finde, sind Inhalte, die sich auf meinem Smartphone überlappen ⇒ Dein Footer ist nicht responsiv.

                Bevor du dir den Kopf über Uralt-Internet-Explorer zerbrichst, solltest du für eine ordentliche Darstellung auf Mobilgeräten sorgen. Die sollten einen wesentlich größeren Marktanteil als 20 Jahre alte Browser haben.

                Just my two cents.

                1. Dein Footer ist nicht responsiv.

                  Stimmt, weil ich dieses im Beispiel auch nicht berücksichtigt habe. Darum ging es mir auch gar nicht.

              3. Hej Bernd,

                Wenn also alles untereinter steht findest du dieses also "schön"? Nöö, ich 100% nicht. Und die User / Menschen 100% auch nicht. Auch Menschen die sich keine aktuelle System leisten können oder wollen, sollen schöne Seiten vorfinden.

                Was ist schön? 😉

                Ist für jeden anders. Auch was als störend empfunden wird. Und darüber ist die Frage, wie viele echte Menschen in Deiner Statistik mit alten Browsern tatsächlich auftauchen.

                Nichtsdestotrotz ist es natürlich Deine Sache.

                Was aber definitiv möglich ist: Flexbox als fallback für Grid. Es gibt aber wie @Gunnar Bittersmann noch sehr, sehr wenige Nutzer, die davon etwas haben. Das sind nur die Nutzer des IE9. Nutzer von IE8 und älter können auch Flexbox nicht, Nutzer von IE10 und neuer können grid. Wenn auch nicht alles davon. Aber auch hier greift progressive enhancement.

                Insofern einfach mal ein Tässchen Tee oder Kaffee verschnabulieren und dann mal in Ruhe nachdenken, ob das, was Gunnar sagt, nicht doch irgendwie Sinn machen könnte. Und ob du nicht unter Berücksichtigung dessen, was Gunnar sagt und Deiner eigenen Wünsche einen Weg findest, etwas an Deiner Seite zu verbessern, wo du ohne Gunnar nicht drauf gekommen wärst.

                Zwischen Gunnars „radikaler“ Lösung, damit zu leben, dass Dinge unterschiedlich Aussehen in verschiedenen Browsern und Deiner „radikalen“ Lösung, dass es überall gleich aussehen muss (mit Nachteilen für 100% aller Nutzer, wie überflüssige Elemente) zugunsten Deines ganz persönlichen Ästhetik-Empfindens das vielleicht die Mehrheit mit dir teilt, gibt es vielleicht auch noch Möglichkeiten, mit denen du leben könntest?!?

                Marc

                PS: Ein überflüssiges Element scheint nicht viel zu sein. Aber die können sich schnell läppern. Und da sich diese Ansicht mehr oder weniger durchgesetzt hat, sind Billionen überflüssiger Elemente in Milliarden von Webseiten, die viele Billiarden mal abgerufen und unnötig übertragen werden. Durchaus ein Wirtschaftsfaktor und ein ökologischer impact — der sich auch nicht dadurch wegdiskutieren lässt, dass es noch schlimmeres gibt (unnötig schwergewichtige Bilder, Slider, die kaum jemand wirklich wahrnimmt oder großflächige, womöglich bildschirmfüllende Videos)…

                1. @@marctrix

                  Was aber definitiv möglich ist: Flexbox als fallback für Grid.

                  Was auch möglich ist: Floats oder display: inline-block als Fallback.

                  LLAP 🖖

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

                    Außerdem möglich: display: table; (Codepen).

                    Als ich noch den IE8 (und älter) unterstützen musste, habe ich das öfters angewendet. Ich hatte immer den Eindruck, es sei etwas robuster als display: inline-block; und Floats. Das fehlende Umbrechen der Spalten war nie wirklich ein Problem, weil die Layouts damals sowieso fixe Breite hatten.

                    Der verlinkte Pen hat schon ein Enhancement von display: table; zu display: flex;. Um den Containern unterschiedliche Breiten zu geben, wollte ich eigentlich noch display: grid; draufsetzen. Da Bernd jetzt aber lieber Bootstrap verwendet, spare ich mir die Arbeit …

                    1. Das schaut sehr schön aus 😱 Aber in deinem Beispiel sind alle vier Spalten gleich groß sind. Wenn ich jetzt wie ich meinem Bespiel diese unterschiedlich breit haben möchte, geht es mit

                      footer > section {
                          display: table-cell; /* < IE8 */
                          flex: 1 0 10em;      /* Flex-Maße */
                      }
                      

                      schon nicht mehr? Außerdem geht man meiner Frage nach dem Bild auf der linken Seite ständig aus dem Weg, du gerade auch wieder 😉

                      Und noch eine Frage zu <address>. Gehört die eMail Adresse wirklich mit in diesen Block?

                      Und schon wenn ich innerhalb von <footer> ein <div class="wapper"> lege, ist alles kaputt. Dieses DIV benötige ich um den Footer über die ganze Breite gehen zu lassen, der Inhalt aber auf eine Breite von 1300px beschränkt wird.

                      1. Hi Bernd,

                        wie gesagt würde ich für die unterschiedlichen Breiten auf Grid setzen. Das geht mit Sicherheit auch über Flex (oder display: table;), ist aber mit Aufwand verbunden, den ich persönlich nicht betreiben möchte. Browser, die Grid nicht verstehen, bekommen dann eben gleichbreite Spalten – Wo ist das Problem?


                        Falls die Blanko-Deutschlandkarte kein Platzhalterbild ist, möchte ich den Sinn der Grafik als solche in Frage stellen. Ich sehe nicht unbedingt einen Mehrwert (sowohl gestalterisch als auch informativ) darin eine generische Länderkarte anzuzeigen.

                        Ansonsten sieht das Bild auf der linken Seite nach einem rein dekorativen Bild aus – Gehört also nicht ins Markup, sondern sollte ein Hintergrundbild eines Elementes sein. Ob das jetzt das <address> Element selbst oder ein entsprechendes Pseudo-Element ist, sei dahingestellt.

                        1. Hallo,

                          wie gesagt würde ich für die unterschiedlichen Breiten auf Grid setzen. Das geht mit Sicherheit auch über Flex (oder display: table;), ist aber mit Aufwand verbunden, den ich persönlich nicht betreiben möchte. Browser, die Grid nicht verstehen, bekommen dann eben gleichbreite Spalten – Wo ist das Problem?

                          sagst du dieses jetzt als User, oder würdest du dieses auch sagen, wenn du eine Seite hast wo du deine Firma, oder ein Produkt dem Kunden vorstellen möchtest? Ich tue mich einfach schwer zu sagen die User, die ein altes System haben bekommen eben eine "veraltete" Seite zu sehen wo zum Teil alles untereinander ist. Im Netz heißt es doch, die ersten 1-2 Sekunden sind die wichtigsten. Ich hätte es auch gerne einfach und schnell ohne viel hin und her, aber ich möchte eben auch keine enttäuschen User haben oder User, die sogar einen Kauf abbrechen.

                          Deine Version gefällt mir sehr. Wäre es hier denn viel Arbeit alles auf Grid umzubauen?

                          Falls die Blanko-Deutschlandkarte kein Platzhalterbild ist, möchte ich den Sinn der Grafik als solche in Frage stellen. Ich sehe nicht unbedingt einen Mehrwert (sowohl gestalterisch als auch informativ) darin eine generische Länderkarte anzuzeigen.

                          Ich möchte dadrauf eigentlich nur zeigen wo Köln ist ;) Ja, es ist eine Spielerei füllt aber etwas den footer und dieser sieht dann nicht mehr so Textlastig aus.

                          Habe dein Beispiel mal etwas umgebaut:
                          https://codepen.io/anon/pen/LgOVgB

                          Jetzt wird der Inhalt auf eine bestimmte Breite begrenzt.

                          1. sagst du dieses jetzt als User, oder würdest du dieses auch sagen, wenn du eine Seite hast wo du deine Firma, oder ein Produkt dem Kunden vorstellen möchtest?

                            Ja. Webseiten müssen nicht in jedem Browser gleich aussehen. Die durchschnittliche Nutzerin (so sie denn existiert) vergleicht deine Seiten nicht in verschiedenen Browsern – Das machen nur Webdesigner und -programmierer. Solange deine Seite nicht offensichtlich kaputt aussieht, passt das.

                            Deine Version gefällt mir sehr. Wäre es hier denn viel Arbeit alles auf Grid umzubauen?

                            Danke. Und da wird nichts auf Grid umgebaut. Grid wird ergänzend zum bestehenden Code gesetzt (Progressive Enhancement). Am Besten in einem @supports Block am Ende.

                            1. Hallo,

                              Deine Version gefällt mir sehr. Wäre es hier denn viel Arbeit alles auf Grid umzubauen? Danke. Und da wird nichts auf Grid umgebaut. Grid wird ergänzend zum bestehenden Code gesetzt (Progressive Enhancement). Am Besten in einem @supports Block am Ende.

                              meinst du so?
                              https://codepen.io/anon/pen/LgOVgB

                              Jetzt habe ich allerdings wieder ein Problem mit meinem Bild 😕

                              Und wenn ich es richtig verstanden habe, was passiert wenn jetzt ein alter Browser kommt und das display: grid nicht verstehe, lässt er es dann einfach links liegen und nimmt die Werte von weiter oben?

                              Und warum steht meine eMail Adresse rechts neben der Adresse?

                              1. hallo

                                Hallo,

                                Deine Version gefällt mir sehr. Wäre es hier denn viel Arbeit alles auf Grid umzubauen? Danke. Und da wird nichts auf Grid umgebaut. Grid wird ergänzend zum bestehenden Code gesetzt (Progressive Enhancement). Am Besten in einem @supports Block am Ende.

                                meinst du so?
                                https://codepen.io/anon/pen/LgOVgB

                                Jetzt habe ich allerdings wieder ein Problem mit meinem Bild 😕

                                Und wenn ich es richtig verstanden habe, was passiert wenn jetzt ein alter Browser kommt und das display: grid nicht verstehe, lässt er es dann einfach links liegen und nimmt die Werte von weiter oben?

                                Und warum steht meine eMail Adresse rechts neben der Adresse?

                                Dein <adress> Element hat drei Kinder: adress::before, die anonymen Elemente (implizit p), a

                                Wrappe den ganzen Inhalt in ein explizites <p> und gut ist

                                1. Danke, hat geklappt:
                                  https://codepen.io/anon/pen/LgOVgB

                                  Aber, wenn ich jetzt die eMail etwas von Ort abgetrennt haben möchte, könnte ich zwar zwei <br> einfügen, was aber nicht so toll ist? Nutze ich ein <p> wird es sofort wieder nach rechts geschoben. Wie könnte ich dieses noch lösen?

                                  1. hallo

                                    Danke, hat geklappt:
                                    https://codepen.io/anon/pen/LgOVgB

                                    Aber, wenn ich jetzt die eMail etwas von Ort abgetrennt haben möchte, könnte ich zwar zwei <br> einfügen, was aber nicht so toll ist? Nutze ich ein <p> wird es sofort wieder nach rechts geschoben. Wie könnte ich dieses noch lösen?

                                    Du kannst mit

                                    address a {display:inline-block}

                                    einiges erreichen.

                                    1. Danke dir, hat geklappt:
                                      https://codepen.io/anon/pen/LgOVgB

                                      Jetzt habe ich noch eine Frage zu

                                      @supports (display: grid) {}
                                      

                                      Wenn ich display grid nutze, dann muss ich dennoch Media Queries einsetzten um das ganze responsive zu gestallten? Denn wenn ich jetzt mein Beispiel verkleinere passiert überhaupt nichts.

                                      Im Beispiel von 'sup funktioniert der Umbruch auch so:
                                      https://codepen.io/anon/pen/bmYGzo

                                      Habe ich ein Fehler eingebaut oder muss man mit display: grid anderes umgehen?

                                      1. hallo

                                        Danke dir, hat geklappt:
                                        https://codepen.io/anon/pen/LgOVgB

                                        Jetzt habe ich noch eine Frage zu

                                        @supports (display: grid) {}
                                        

                                        Wenn ich display grid nutze, dann muss ich dennoch Media Queries einsetzten um das ganze responsive zu gestallten? Denn wenn ich jetzt mein Beispiel verkleinere passiert überhaupt nichts.

                                        Da du grid wohl erst ab einer gewissen Bildschirmbreite einsetzen wirst, ermpfiehlt es sich den Block später zu notieren.

                                        @media screen and (min-width:40em){ @supports(display:grid){ } }

                                        Im Beispiel von 'sup funktioniert der Umbruch auch so:
                                        https://codepen.io/anon/pen/bmYGzo

                                        Habe ich ein Fehler eingebaut oder muss man mit display: grid anderes umgehen?

                                        Du hast 4*1 grid-spalten

                                        Überlege dir ob und wann du daraus

                                        2*2, wann 1*4 ableiten willst.

                                        1. Ok, ich habe es jetzt mal angepasst:
                                          https://codepen.io/anon/pen/yRPMjW

                                          Muss ich das ganze @media screen jetzt auch noch außerhalb von @supports (display: grid) anpassen? Ich finde das ganze ist doch sehr viel Schreibarbeit für so ein Footer.

                                          1. hallo

                                            Ok, ich habe es jetzt mal angepasst:
                                            https://codepen.io/anon/pen/yRPMjW

                                            Muss ich das ganze @media screen jetzt auch noch außerhalb von @supports (display: grid) anpassen? Ich finde das ganze ist doch sehr viel Schreibarbeit für so ein Footer.

                                            Es gibt verschiedene Strategien.

                                            Angenommen, deine Default @media ist

                                            @media screen {
                                              /* hier kein grid */
                                            }
                                            
                                            @media screen and (min-width:40em){
                                              /* hier gelten immer noch die oberen Regeln */
                                            
                                              @supports(display:grid){
                                                /* grid 2 spaltig */
                                              }
                                            }
                                            
                                            @media screen and (min-width:60em){
                                              /* hier gelten immer noch die bisher notierten Regeln */
                                              /* eventuell Alternativen zu grid hier */
                                              @supports(display:grid){
                                                /* grid 4 spaltig */
                                              }
                                            }
                                            

                                            Du kannst dieses Schema übrigens für dein gesamtes CSS anwenden.

                                            Ferner solltest du em statt px in @media Regeln verwenden.

                                            1. Hej beatovich,

                                              Ok, ich habe es jetzt mal angepasst:
                                              https://codepen.io/anon/pen/yRPMjW

                                              Muss ich das ganze @media screen jetzt auch noch außerhalb von @supports (display: grid) anpassen? Ich finde das ganze ist doch sehr viel Schreibarbeit für so ein Footer.

                                              @Bernd Darum wurde dir ja auch mehrfach abgeraten 😉

                                              Es gibt verschiedene Strategien.

                                              Angenommen, deine Default @media ist

                                              @media screen {
                                                /* hier kein grid */
                                              }
                                              
                                              @media screen and (min-width:40em){
                                                /* hier gelten immer noch die oberen Regeln */
                                              
                                                @supports(display:grid){
                                                  /* grid 2 spaltig */
                                                }
                                              }
                                              

                                              Also wenn er nur die Grid-Definition dort notiert, wird die eh ignoriert von Browsern, die grid nicht können. @supports ist nur dann nötig, wenn es weitere Angaben gibt, die nur Sinn machen, wenn das grid funktioniert, die aber von mehr Browsern verstanden werden. Z.B. andere Schriftgrößen oder -farben falls grid funktioniert. In der Regel benutzt man aber dieselbe Schriftgröße für alle Darstellungsformen auf ein und derselben Viewport-Breite. Brauche ich daher praktisch nie…

                                              Übrigens, was waren die anderen Strategien? — Gerade bei der Verwendung von Flexbox oder Grid setze ich auf deren Selbstanpassungsfähigkeit und benötige auch die @media-Regeln viel seltener als früher.

                                              Marc

                                              1. @@marctrix

                                                Also wenn er nur die Grid-Definition dort notiert,

                                                Um das auszuschließen, hab ich mir das mal kurz angesehen.

                                                wird die eh ignoriert von Browsern, die grid nicht können. @supports ist nur dann nötig, wenn es weitere Angaben gibt, die nur Sinn machen, wenn das grid funktioniert,

                                                So ist es. Und eben das ist hier der Fall. Im @supports (display: grid)-Block steht noch eine margin-Angabe. (Weil die Abstände im Grid mit grid-gap geregelt werden und der für Fallbacks nötige Abstände wieder genullt werden müssen, vermute ich mal – sooo genau hab ich’s mir dann doch nicht angesehen.)

                                                Und wenn schon mal ein @supports (display: grid)-Block da ist, dann würde ich die Grid-Eigenschaften auch in diesem notieren.

                                                LLAP 🖖

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

                                                @Bernd Darum wurde dir ja auch mehrfach abgeraten 😉

                                                Darum bin ich zurückhaltend grid zu empfehlen.

                                                Es gibt verschiedene Strategien.

                                                Angenommen, deine Default @media ist

                                                @media screen {
                                                  /* hier kein grid */
                                                }
                                                
                                                @media screen and (min-width:40em){
                                                  /* hier gelten immer noch die oberen Regeln */
                                                
                                                  @supports(display:grid){
                                                    /* grid 2 spaltig */
                                                  }
                                                }
                                                

                                                Also wenn er nur die Grid-Definition dort notiert, wird die eh ignoriert von Browsern, die grid nicht können. @supports ist nur dann nötig, wenn es weitere Angaben gibt, die nur Sinn machen, wenn das grid funktioniert, die aber von mehr Browsern verstanden werden. Z.B. andere Schriftgrößen oder -farben falls grid funktioniert. In der Regel benutzt man aber dieselbe Schriftgröße für alle Darstellungsformen auf ein und derselben Viewport-Breite. Brauche ich daher praktisch nie…

                                                Übrigens, was waren die anderen Strategien? — Gerade bei der Verwendung von Flexbox oder Grid setze ich auf deren Selbstanpassungsfähigkeit und benötige auch die @media-Regeln viel seltener als früher.

                                                Im Fall von Tabellen will man eher den anderen Weg gehen, also:

                                                @media screen { /*table*/ }
                                                
                                                @media screen and (max-width:40em){
                                                  /*table*/
                                                }
                                                
        2. hallo

          nein Grid kommt auf keinen Fall in Frage, alte Browser verstehen diese nicht.

          Du sprichst von IE 9? Ernsthaft?

          wohl kaum! https://caniuse.com/#search=grid

          1. @@beatovich

            nein Grid kommt auf keinen Fall in Frage, alte Browser verstehen diese nicht.

            Du sprichst von IE 9? Ernsthaft?

            wohl kaum! https://caniuse.com/#search=grid

            Worauf genau willst du jetzt hinaus? Auf Opera Mini und Blackberry?

            Die auf Geräten laufen, wo die Footerinhalte sowieso nicht nebeneinander passen?

            LLAP 🖖

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

              @@beatovich

              nein Grid kommt auf keinen Fall in Frage, alte Browser verstehen diese nicht.

              Du sprichst von IE 9? Ernsthaft?

              wohl kaum! https://caniuse.com/#search=grid

              Worauf genau willst du jetzt hinaus? Auf Opera Mini und Blackberry? Die auf Geräten laufen, wo die Footerinhalte sowieso nicht nebeneinander passen?

              Ich rede von der auf caniuse verfügbaren Information in ihrer Totalität!

              Nimm diese bitte zuerst mal wahr!

              1. @@beatovich

                nein Grid kommt auf keinen Fall in Frage, alte Browser verstehen diese nicht.

                Du sprichst von IE 9? Ernsthaft?

                wohl kaum! https://caniuse.com/#search=grid

                Worauf genau willst du jetzt hinaus? Auf Opera Mini und Blackberry? Die auf Geräten laufen, wo die Footerinhalte sowieso nicht nebeneinander passen?

                Ich rede von der auf caniuse verfügbaren Information in ihrer Totalität!

                Die Fragezeichen bleiben. Worauf genau willst du jetzt hinaus?

                LLAP 🖖

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

                  @@beatovich

                  nein Grid kommt auf keinen Fall in Frage, alte Browser verstehen diese nicht.

                  Du sprichst von IE 9? Ernsthaft?

                  wohl kaum! https://caniuse.com/#search=grid

                  Worauf genau willst du jetzt hinaus? Auf Opera Mini und Blackberry? Die auf Geräten laufen, wo die Footerinhalte sowieso nicht nebeneinander passen?

                  Ich rede von der auf caniuse verfügbaren Information in ihrer Totalität!

                  Die Fragezeichen bleiben. Worauf genau willst du jetzt hinaus?

                  Die Liste der Browser, die im Verkehr sind, und keinen oder schlimmer noch mangelhaften Support haben, ist weit grösser auf caniuse

                  Sie erstreckt sich auf Safari 10 Desktop + iOS, MSIE 11, Edge 15.

                  1. Hallo

                    nein Grid kommt auf keinen Fall in Frage, alte Browser verstehen diese nicht.

                    Du sprichst von IE 9? Ernsthaft?

                    wohl kaum! https://caniuse.com/#search=grid

                    Worauf genau willst du jetzt hinaus? Auf Opera Mini und Blackberry? Die auf Geräten laufen, wo die Footerinhalte sowieso nicht nebeneinander passen?

                    Ich rede von der auf caniuse verfügbaren Information in ihrer Totalität!

                    Die Fragezeichen bleiben. Worauf genau willst du jetzt hinaus?

                    Die Liste der Browser, die im Verkehr sind, und keinen oder schlimmer noch mangelhaften Support haben, ist weit grösser auf caniuse

                    Sie erstreckt sich auf Safari 10 Desktop + iOS, MSIE 11, Edge 15.

                    Die älteren Microsoft-Browser bis hinunter zum IE11 können doch Grid. Die mit den ihnen eigenen Regeln zu versorgen, sollte doch wohl kein Problem darstellen, oder?

                    Was die Safaris betrifft, soweit ich weiß, sind die mehr oder minder hart mit den sie ausliefernden OS-Versionen vebandelt. Daher stellt sich mir die Frage nach der Relevanz derart alter OSX- und iOS- und damit Safari-Versionen. Der Apple-Geräte-Benutzer an sich gilt gemeinhin als hinreichend updatewillig, so dass diese Versionen mMn keine größere verbreitung mehr haben dürften.

                    Tschö, Auge

                    --
                    Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
                    Kleine freie Männer von Terry Pratchett
                    1. hallo

                      Hallo

                      nein Grid kommt auf keinen Fall in Frage, alte Browser verstehen diese nicht.

                      Du sprichst von IE 9? Ernsthaft?

                      wohl kaum! https://caniuse.com/#search=grid

                      Worauf genau willst du jetzt hinaus? Auf Opera Mini und Blackberry? Die auf Geräten laufen, wo die Footerinhalte sowieso nicht nebeneinander passen?

                      Ich rede von der auf caniuse verfügbaren Information in ihrer Totalität!

                      Die Fragezeichen bleiben. Worauf genau willst du jetzt hinaus?

                      Die Liste der Browser, die im Verkehr sind, und keinen oder schlimmer noch mangelhaften Support haben, ist weit grösser auf caniuse

                      Sie erstreckt sich auf Safari 10 Desktop + iOS, MSIE 11, Edge 15.

                      Die älteren Microsoft-Browser bis hinunter zum IE11 können doch Grid. Die mit den ihnen eigenen Regeln zu versorgen, sollte doch wohl kein Problem darstellen, oder?

                      Falsch!

                      Wann immer du nebst dem Standard noch ältere Standards oder grodbuggs individuell Lösen musst, wird es alles andere als unproblematisch.

                      Was die Safaris betrifft, soweit ich weiß, sind die mehr oder minder hart mit den sie ausliefernden OS-Versionen vebandelt. Daher stellt sich mir die Frage nach der Relevanz derart alter OSX- und iOS- und damit Safari-Versionen. Der Apple-Geräte-Benutzer an sich gilt gemeinhin als hinreichend updatewillig, so dass diese Versionen mMn keine größere verbreitung mehr haben dürften.

                      derart alt ist für Browser mit Jahrgang 2017 wohl keine gültige Aussage.

                      1. Hej beatovich,

                        [Safari]

                        derart alt ist für Browser mit Jahrgang 2017 wohl keine gültige Aussage.

                        Alle Geräte, auf denen iOS 11 lief, läuft auch das aktuelle iOS 12…

                        Marc

                      2. Hallo

                        Die älteren Microsoft-Browser bis hinunter zum IE11 können doch Grid. Die mit den ihnen eigenen Regeln zu versorgen, sollte doch wohl kein Problem darstellen, oder?

                        Falsch!

                        Wann immer du nebst dem Standard noch ältere Standards oder grodbuggs individuell Lösen musst, wird es alles andere als unproblematisch.

                        Ok, dass die alten IEs und Edges eine veraltete Syntax „sprechen“, die nicht alle Möglichkeiten der aktuellen Syntax bieten, ist bekannt (wohl dem, der in einem Intranet nur aktuelle Browser versorgen muss). Mit „nur zwei“ Syntaxen umzugehen (vorausgesetzt, dass einem beide geläufig sind), ist aber mMn immer noch einfacher, als z.B. x Browserpräfixe und mehr als zwei Syntaxen benutzen zu müssen, wie es noch vor wenigen Jahren bei einigen CSS-Eigenschaften notwendig war, um eine möglichst breite Abdeckung zu erreichen (linear-gradient war mal so ein Kandidat).

                        Was die Safaris betrifft, soweit ich weiß, sind die mehr oder minder hart mit den sie ausliefernden OS-Versionen vebandelt. Daher stellt sich mir die Frage nach der Relevanz derart alter OSX- und iOS- und damit Safari-Versionen. Der Apple-Geräte-Benutzer an sich gilt gemeinhin als hinreichend updatewillig, so dass diese Versionen mMn keine größere verbreitung mehr haben dürften.

                        derart alt ist für Browser mit Jahrgang 2017 wohl keine gültige Aussage.

                        Da die breite Browserunterstützung erst 2017 begann, ist 2017 mMn sehr wohl eine gültige Aussage. Die Frage ist ja, ob die alten Browser, die (in diesem Fall) Grid nicht unterstützen, überhaupt noch in relevantem Maße benutzt werden. Die meisten Browser haben Updatemechanismen, die dafür sorgen, dass ältere Versionen alsbald vom Markt verschwinden.

                        Bleiben Mobilbrowser, bei denen untereinander angeordnete Blöcke nicht „weh tun“, die alten IEs, die zumindest ab Version 10 die alte Grid-Syntax unterstützen und die ganz alten IEs (bis Version 9, Marktanteil der bei CanIUse angezeigten Versionen 7 bis 9 zusammen 0.3%), die Grid überhaupt nicht können. Fallbacktechniken, wenn man sich den Aufwand wirklich geben will [1], dafür wurden hier mehrfach genannt.

                        Also wo ist, außerhalb von geschlossenen Netzen (Firmen-Intranet) die Relevanz alter Browser, durch die sich der Einsatz aktueller Techniken quasi verbietet?

                        Tschö, Auge

                        --
                        Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
                        Kleine freie Männer von Terry Pratchett

                        1. Intranets mit legacy-Anwendungen, die solche alten Browserversionen erfordern, kann ein Grund dafür sein. Aber in dem Fall kann man sich auf die alten Techniken konzentrieren, die neuen Techniken braucht man ja erst garnicht. ↩︎

  2. Hej Bernd,

    eine Frage, warum bekommt das <p> auf der linken Seite neben dem Bild nicht die volle Breite?
    https://codepen.io/anon/pen/GYMxJJ

    Weil du das mit display: inline-block; so festgelegt hast.

    Hier musst du selber die Breite angeben, die du haben willst.

    Marc