beginner: Bild ein-/ausblenden

Hallo, in schmalen viewports soll es so aussehen:

Text1 <img Bild2> Text2

in breiten viewports

<img Bild1> Text1 Text2 <img Bild3>

Wie kann man dies realisieren?

  1. Hallo beginner,

    mangels ausreichender Informationen deinerseits schicke ich Dich mal ins Wiki:

    https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign

    Für die Entscheidung, wie man die Bilder einbindet, ist ihre Art wichtig. Sind sie Teil des Dokuments? Dann <img> Elemente. Sind sie schmückendes Beiwerk: Dann per CSS und background-image einsteuern.

    Aber um zu wissen, wieviel man Dir erklären muss, solltest Du uns erklären, welche Beginnerstufe Du hast. "Blutig", "Tapsig" oder "schon erste Erfolge"? 😉. Anders gesagt: Was kannst Du?

    Wenn Du schon erste Versuche gemacht hast, und einen Server dafür, dann verrate uns einen Link. Alternativ kannst Du in Web-Laboren wie codepen.io, jsfiddle.net oder W3Schools TryIt etwas basteln, speichern und den Link posten. Wenn Code von Dir da ist, redet es sich besser.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. "tapsig" Erste HTML- und CSS-Kenntnisse.

  2. Servus!

    Hallo, in schmalen viewports soll es so aussehen:

    Text1 <img Bild2> Text2

    in breiten viewports

    <img Bild1> Text1 Text2 <img Bild3>

    Wie kann man dies realisieren?

    Mit Grid Layout kannst du ein Element in ein flexibles Raster verwandeln und die Kindelemente entweder automatisch oder innerhalb benannter Rasterbereiche platzieren.

    Herzliche Grüße

    Matthias Scharwies

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    1. Hallo Matthias, so ganz verstehe ich das noch nicht. Dir grid-Container lege ich in CSS fest. In beiden Layouts wären es drei. Wie kann ich aber in html entscheiden, in welche die img und in welche der Text kommt?

      1. Servus!

        Hallo Matthias, so ganz verstehe ich das noch nicht. Dir grid-Container lege ich in CSS fest.

        Ja, das ist das Elternelement, z.B ein div.

        In beiden Layouts wären es drei.

        Nein, das wären die Kindelemente, z.B. ein img oder figure für die Bilder; ein p-Absatz für den Text.

        Wie kann ich aber in html entscheiden, in welche die img und in welche der Text kommt?

        Herzliche Grüße

        Matthias Scharwies

        --
        Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
        1. Hallo, bevor ich mich verrenne: Wäre nachfolgendes der richtige (beste) Weg?

          <img class="bild1" ....>
          <p class="text1>....</p>
          <img class="bild2" ....>
          <p class="text2>....</p>
          <img class="bild3" ....>

          CSS:

          1. bild1 und bild3 unsichtbar machen ==> text1 bild2 text2
          2. bild2 unsichtbar machen ==> bild1 text1 text2 bild3
          1. Hallo,

            Wäre nachfolgendes der richtige (beste) Weg?

            Nö, du weist den class-Attributen eigentlich ids zu. Besser wäre wirklich die Gemeinsamkeiten zu finden:

             <img class="außenbild" ..../>  
             <p class="text">....</p>  
             <img class="innenbild" ..../>  
             <p class="text">....</p>  
             <img class="außenbild" ..../>  
            
            

            CSS:

            1. außenbild unsichtbar machen ==> text1 bild2 text2
            2. innenbild unsichtbar machen ==> bild1 text1 text2 bild3
            .außenbild {display:none}
            .innenbild {display:none}
            

            Mithilfe einer Media-Query dann den display-Wert umschalten. Die CSS-Gurus hier haben vielleicht eine Lösung ohne Mediaquery parat?

            Gruß
            Kalk

          2. Hallo beginner,

            Hallo, bevor ich mich verrenne:

            Ja, bevor Du Dich verrennst, beantworte meine bereits einmal gestellte Frage: Sind die Bilder Deko oder Teil des Dokuments? Davon hängt ab, ob Du sie besser per CSS als background-image setzt (man kann mittels Padding Platz dafür schaffen) oder ob sie als img ins Dokument gehören.

            Beachte bei der Gelegenheit auch, dass ein <img> Element zwei Pflichtattribute hat: src und alt. Ohne alt ist das HTML nicht korrekt. Ein background-image benötigt und kennt keinen alt-Text.

            Rolf

            --
            sumpsi - posui - obstruxi
            1. Hallo Rolf, die Bilder (*.jpeg) und der Text sollen die Überschriften (Titel in allen Seiten) bilden. Wie dies zu beurteilen ist, ob dies als Deko oder als Teil der Dokumente gilt, weiß ich nicht.

              1. Hallo beginner,

                die entscheidende Frage dürfte sein: Ergibt die Überschrift ohne die Bilder einen Sinn? Zeigen die Bilder etwas, das zum Verständnis der Überschrift oder der Seite unbedingt nötig ist?

                Rolf

                --
                sumpsi - posui - obstruxi
                1. Die Überschrift wäre auch ohne Bilder verständlich. Sie sind nicht unbedingt notwendig, allerdings verstärken Sie die Überschrift. Zum Beispiel: Eine Seitenüberschrift "Waldsterben" wäre aussagefähiger, wenn daneben abgestorbene Bäume abgebildet wären.

                  1. Hallo beginner,

                    okay. Das klingt so als würde §4.8.4.4.6 (graphical representation) oder §4.8.4.4.7 (ancillary image) der HTML Spezifikation zutreffen, aber nicht §4.8.4.4.8 (purely decorative).

                    Richtig wäre dann ein img Element. alt="" wäre okay, aber da könnte auch alt="tote Bäume" oder ähnliches stehen. Um guten alt-Text zu finden, stell Dir vor, jemand würde Dir die Seite vorlesen. Wo ein Bild steht, sagt er: "Bild:" und den alt-Text. Albern? Nein. Blinde Menschen erleben das Web exakt so.

                    Rolf

                    --
                    sumpsi - posui - obstruxi
                    1. Ich verstehe die ganze Diskussion nicht mehr! Es geht mir doch nicht um alt=

                      Schade, ich hatte mir mehr konkrete Hilfe erhofft.

                      1. Hallo beginner,

                        Schade, ich hatte mir mehr konkrete Hilfe erhofft.

                        Das ist hier sehr sehr häufig Hilfe zur Selbsthilfe. Einfach Copy & Paste gibt es selten. Du musst dann schon zeigen, wie es bisher aussieht, wo du nicht mehr weiterkommst, was du nicht verstanden hast, …

                        Bis demnächst
                        Matthias

                        --
                        Du kannst das Projekt SELFHTML unterstützen,
                        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                        1. Hallo, erkläre mir bitte, was die Frage, wie "alt=" zu verwenden ist, mit meiner Frage zu tun hat?

                          1. Hallo beginner,

                            erkläre mir bitte, was die Frage, wie "alt=" zu verwenden ist, mit meiner Frage zu tun hat?

                            Du möchtest eine Webseite erstellen, auf der sich Bilder befinden. Bisher bist du dir noch nicht sicher, ob die Bilder Verzierung oder Inhalt sind. Wenn es sich um Inhalte handelt, brauchen die Bilder einen Alt-Text.

                            Bis demnächst
                            Matthias

                            --
                            Du kannst das Projekt SELFHTML unterstützen,
                            indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                            1. Hi!
                              Ob Ihr das Verzierung nennt oder Inhalt, müsst doch Ihr beurteilen. Für mich sind die Bilder Inhalt der Titelzeile, und sie dienen der Verzierung der Titelzeile und der Verstärkung der Aussage (Eye-catcher). Ich habe geschrieben, was die Überschrift in etwa aussagen soll. Und wie ich gerade gelesen habe ist alt= wichtig für die Barrierefreiheit, aber in vielen Seiten (sträflicherweise) nicht vorhanden bzw. als alt=''. Also völlig nebensächlich für meine Fragenstellung.

                              1. Hallo,

                                die Diskussion über das alt-Attribut hat immerhin dazu geführt, das du dich damit beschäftigt hast.

                                Zu deinem Problem: Zeig mal, was du bisher an html und css hast, am besten online.

                                Gruß
                                Jürgen

                                1. Hallo, habe es mit jsfiddle versucht, aber da finde ich keine Möglichkeit, ein Bild einzubinden. Aber bisher habe ich nur das, was Tabellenkalk am 27.02.2021 17:51 geschrieben hat. Er hat allerdings nachgefragt ob die Gurus eine bessere Möglichkeit sehen. Wir waren damals also schon etwas weiter, bevor die Diskussion mit alt anfing.

                                  1. Hallo,

                                    Wir waren damals also schon etwas weiter, bevor die Diskussion mit alt anfing.

                                    Soso, waren wir das? Erstmal schön zu lesen, dass du meinen Beitrag wahrgenommen hast.

                                    Zeig doch mal, wie du mit den Mediaqueries zurechtgekommen bist…

                                    Gruß
                                    Kalk

                                    1. Hallo Kalk,
                                      ich habe die mediaqueries im Prinzip verstanden. Auf Empfehlung von HTML-Beiträgen habe ich mich aber zunächst auf die Realisierung der Smartphonevariante konzentriert, was ja auch mit den wenigen Zeilen funktioniert. Bevor ich aber jetzt weitergemacht habe, habe ich abgewartet, ob die von Dir zitierten Gurus diese Lösung nicht vielleicht zerreißen. Da die Gurus im wohlverdienten Wochenende verweilen, möchte ich noch bis Dienstag warten, bevor ich an meinem und Deinem verbesserten Vorschlag weitermache.

                                  2. Hallo,

                                    so hätte ich es auch gemacht.

                                    Für diese Aufgabe benötigst du keinen Webspace, das läuft auch offline.

                                    Lies nach, wie man mit Display Elemente ausblenden kann, und wie man sie nebeneinander anordnet.

                                    Mit einem Mediaquerry steuerst du dann, wann was angezeigt wird.

                                    Später kannst du dann testen, ob Flex oder Grid eleganter sind, als inline-Blick.

                                    Gruß
                                    Jürgen

                                  3. Hallo beginner,

                                    das Einbinden von Bildern mit jsfiddle ist durchaus möglich. Es kann nur dann ein Problem sein, wenn Du Bilder von einer http:// Quelle einbinden willst. jsfiddle ist https://, darum müssen Bilder ebenfalls von https:// kommen.

                                    Wenn Du das Bild https://www.example.org/images/testbild.png einbinden willst, kannst Du das in jsFiddle bleistiftsweise so tun:

                                    <img src="https://www.example.org/images/testbild.png" alt="Testbild mit farbigen Streifen">

                                    Wenn deine Bilder auf einer http-Seite liegen, und Du erstmal keine Energie auf ein https-Zertifikat verwenden willst, kannst Du deine Experimente doch auch auf diese http-Seite hochladen. Dass die Bilderquelle eine Fremdseite ist, wo Du nichts hochladen kannst und deren Bilder Du einfach nutzt, will ich jetzt man nicht annehmen. Die Alternative sind Demobilder aus der Wikipedia, beispielsweise dieses - da musst Du im Fiddle lediglich die Quelle angeben (also genau die Seite, die ich gerade verlinkt habe). Dieses Bild könntest Du auch auf deiner Seite einsetzen, wenn Du Dich an die Lizenzregeln hältst und das Bild nicht direkt von commons.wikimedia.org einbindest, sondern es auf deinen Server kopierst.

                                    Wenn das Einbinden von Bildern bei Dir nicht funktioniert, zeig dein Fiddle trotzdem mal vor. Dann kann man Dir vielleicht sagen, was Du beim Einbinden falsch machst.

                                    Das Thema "alt" war für mich ein Nebenschauplatz, der aber, gerade bei Einsteigern, beim Einbinden von Bildern gern übersehen wird. Deswegen habe ich das erwähnt. Die wichtigere Frage war: <img> Element oder ein background-image via CSS, und die mussten wir klären, weil davon alles andere abhängt. Du schreibst, das müssten wir als die Experten entscheiden. Das ist ein Irrtum. Wir, als „Experten“ (mehr oder weniger) können beides. Was davon richtig ist, hängt von deinen Inhalten ab. Und die kennst ausschließlich du. Deswegen sollst Du ja auch was vorzeigen. Damit wir die Inhalte sehen und unsere Expertise nutzen können, um Dir einen Rat zur richtigen Verwendung der Möglichkeiten zu geben, die HTML und CSS bieten.

                                    An konkreten Hinweisen hast Du Links auf unser Wiki bekommen, und die Idee von Tabellenkalk mit dem Ein- und Ausblenden. Wenn Du zu wenig Hintergrundwissen hast, um das einordnen zu können, ok, dann sag das. Aber eins machen wir hier nur sehr ungern: eine fertige Lösung zum Kopieren hinschmeißen. Copy+Paste Autoren gibt's zu viele auf dieser Welt.

                                    Das HTML hast Du mit Kalk ja schon erörtert. Wenn es ein Seitenkopf ist, steckt man das in einen header. Je nach Relevanz der Bilder kann alt="" hinreichend sein, oder auch nicht.

                                    <header>
                                       <img src="...bild2..." alt="...">
                                       <p>Text1</p>
                                       <img src="...bild2..." alt="...">
                                       <p>Text2</p>
                                       <img src="...bild2..." alt="...">
                                    </header>
                                    

                                    Ob da nun <p> Elemente oder <span> Elemente besser sind, hängt vom Textumfang ab. Ist das ein längerer Text? Oder nur ein plakatives Stichwort? Ein HTML Element muss jedenfalls drumherum, sonst klappt das mit dem Nebeneinanderstellen nicht so gut. Das machst du, da es nur eine Zeile ist, ab besten mit einer Flexbox. Ich gebe Dir mal eine Basis, aber das ist noch unvollständig. Was Du für die Fragezeichen einsetzen musst, kannst Du selbst überlegen (wenn Du sie nicht kennst, schau sie im Wiki nach). Wenn Du Dinge findest, die Du so noch nicht gesehen hast, frag nach oder schau ins Wiki.

                                    Ganz wichtig: Den Umschaltpunkt der Media-Abfrage nicht in Pixel festlegen, sondern in em. "em" ist eine Einheit, die sich auf die ausgewählte Schriftart bezieht. Bei einer font-size von 16px ist 1em=16px.

                                    Die dritte Zahl in der flex-Eigenschaft ist die Basisbreite für dieses Element. "auto" ist ein guter Anfang, aber deine Bilder brauchen vielleicht eine Größenjustierung. Das kannst Du mit der Flex-Basis machen, oder mit einer width-Angabe. Wie Du das erste, zweite oder dritte Bild konkret ansprichst, ohne ihnen eine id oder class zu geben, siehst Du in meiner Vorlage.

                                    Was Dir fremd sein könnte, ist das Komma in den CSS Selektoren. Du kannst damit erreichen, dass diese Regel für mehrere Selektoren gilt. Du könntest den ganzen Block auch kopieren und jeden mit einem der beiden Selektoren versehen, aber abschreiben ist öde und das wollen wir vermeiden.

                                    header {
                                       display: flex;
                                       justify-content: ?;   /* guck im Wiki nach, was Du brauchst */
                                       align-items: center;  /* prüf nach, ob das für Dich richtig ist */
                                    }
                                    
                                    header img {
                                       flex: 0 0 auto;       /* da müssen wir drüber reden! */
                                    }
                                    
                                    header p {
                                       flex: 0 0 ?;          /* da müssen wir drüber reden */
                                       margin: 0;
                                       padding: ? ?;         /* padding nach Gefallen */
                                    }
                                    
                                    header img:nth-of-type(1), header img:nth-of-type(3) {
                                       display: none;
                                    }
                                    
                                    header img:nth-of-type(2) {
                                       display: inline;
                                    }
                                    
                                    /* Wenn genug Platz ist, auf breite Ansicht umschalten */
                                    /* Bei wieviel em Du umschaltest musst Du wissen */
                                    /* Informationen zu @media im Wiki! */
                                    @media (min-width: ?em) {
                                       header img:nth-of-type(1), header img:nth-of-type(3) {
                                          display: inline;
                                       }
                                    
                                       header img:nth-of-type(2) {
                                          display: none;
                                       }
                                    
                                       header p { 
                                          /* ggf. Padding oder Margin der p Elemente justieren */
                                       }
                                    }
                                    

                                    Rolf

                                    --
                                    sumpsi - posui - obstruxi
                                    1. Hallo im Prinzip funktioniert es wie ich will, wenn die Elemente nicht untereinander stehen würden. Hier

                                      1. Hallo beginner,

                                        wenn Du es denn so wie empfohlen gemacht hättest...

                                        (1) Das Standard-Design einer Seite sollte die schmale Ansicht sein. Wenn genug Platz ist, baut man um. Nicht andersherum. Das Handy ist heutzutage der wichtigste Web-Client.

                                        Also @media (min-width:...)

                                        (2) Du solltest den Media-Break wirklich in em festlegen! Vergiss bitte das Pixel. Orientiere Dich an der eingestellten Schriftart. Wenn dein Anwender die Browserschrift verändert (z.B. weil er besonders gut oder besonders schlecht sieht), sollten sich die Vorstellungen, die deine Seite von groß und klein hat, sich dem anpassen. 1em ist bei Standardfonts 16px, verwende min-width:50rem für den Mediabreak. Vor allem min-width, nicht max-width. Dann funktioniert es auch richtig herum: Außenbilder bei breitem Fenster, Innenbild bei schmalem Fenster.

                                        (3) Ich hatte Flexbox vorgeschlagen, Du nimmst Grid. Okay. Kein Problem. Aber du hast einen Typo in grid-template-columns. Die rechte Klammer wird nicht verstanden, und damit die Eigenschaft ignoriert. Die Folge ist, dass dein Grid nur eine Spalte hat, und nach Bedarf weitere Zeilen angefügt werden.

                                        Zweitens definierst Du 3 Auto-Spalten. Ich würde die beiden Text-Spalten auf Breite 1fr setzen und nur die Bildspalte auf auto. Dadurch wird die Bildspalte so breit wie das Bild und der verbleibende Rest zu gleichen Teilen auf die Textspalten verteilt (1fr = one fraction = 1 Anteil).

                                        Drittens musst Du beachten, dass Du beim Umschalten auf breites Layout eine Spalte mehr hast. Du musst also das grid-template im @media-Block ändern, mein Vorschlag wäre grid-template-columns: auto 1fr 1fr auto;

                                        Was ich auch vorschlagen würde, ist ein align-items:center für den header. Dadurch wird der Text vertikal zentriert. Aber das hängt dann auch vom echten Text ab.

                                        https://jsfiddle.net/Rolf_b/rbuhjpst/

                                        Rolf

                                        --
                                        sumpsi - posui - obstruxi
                                        1. Nur ganz kurz, da ich jetzt weg muss: das max-width hatte ich inzwischen bemerkt und korrigiert. Besten Dank

                                        2. Hallo Rolf,
                                          danke für die Tipps,
                                          mein Beispiel sieht jetzt so aus. Was ich noch nicht schaffe, ist im breiten Format die Bilder direkt neben die Texte zu plazieren. Ich habe vergeblich versucht die Textboxen (1fr) zu verkleinern.

                                          1. Hallo beginner,

                                            ja okay, das ist jetzt auch nicht so einfach. Und du hast bisher von Ausrichtung nichts gesagt, deswegen sind wir nun ein bisschen auf dem falschen Dampfer.

                                            Aber eins vorweg: Du hast mit einem margin an den Text-Elementen Platz zwischen den Teilen geschaffen. Kann man machen, ist aber ungeschickt. Weil man zu viel schreiben muss. Es gibt die Eigenschaft gap, die den Abstand zwischen Grid-Zeilen und Spalten definiert. Gib em header gap: 0.5em; und lass die Margins an den p Elementen auf 0.

                                            Zur Spaltenanordnung: Du hast mit einem grid-template aus lauter auto begonnen. Wenn Du alles in der Mitte zusammenschieben willst, dann könnte es sinnvoll sein, dorthin zurückzukehren. Also im Normalformat:

                                            grid-template-columns: auto auto auto;

                                            was man auch als

                                            grid-template-columns: repeat(3, auto);

                                            schreiben kann. Im breiten Layout schreibst du einfach repeat(4, auto);

                                            Dann sind alle Grid-Spalten nur noch so breit wie ihr Inhalt. Theoretisch. In der Praxis ist es so, dass sie nun wegen der Default-Einstellung der Eigenschaft, die nun noch zu ändern ist, in die Breite gezogen werden, bis das Grid ausgefüllt ist (stretch).

                                            Das müssen wir verhindern, und die Spalten in die Mitte (center) schieben. Dazu gibt es einen Schwung von Eigenschaften, die die Ausrichtung beeinflussen. Die beginnen mit justify- oder align- und du findest sie in unserem Wiki: Ausrichtung von Grid-Items. Viel Glück, sind nur 6 zur Auswahl. Bzw. nur 5, weil align-items ja schon verwendet wird und was anderes tut 😉. Man sieht nur grad nichts davon weil die Bilder so klein sind.

                                            Einfach mal den Artikel lesen, dann klappt's auch im ersten Schuss. Die gap-Eigenschaft steht auch auf der Seite.

                                            Die text-align Eigenschaft ist für die p Elemente dann nicht mehr nötig.

                                            Bei den img Elementen wäre es noch eine Idee, nicht die Breite, sondern die Höhe festzulegen. Die Breite passt sich dann an Hand des Seitenverhältnisses an. Durch eine Höhenfestlegung passen die Bilder besser in die Zeile, falls sie unterschiedliche Seitenverhältnisse haben.

                                            Rolf

                                            --
                                            sumpsi - posui - obstruxi
                                            1. Hallo Rolf,
                                              ich habe alle 6(!) Varianten ausprobiert, siehe Kommentarzeilen hier am Ende, leider ohne Erfolg. Ist dies normal in der Web-Entwicklung, dass es zig Möglichkeiten gibt, die man versuchen muss?
                                              Ich bin nämlich kein Freund von Trial and Error.

                                              1. Hallo beginner,

                                                Ist dies normal in der Web-Entwicklung, dass es zig Möglichkeiten gibt, die man versuchen muss?

                                                Es gibt zig Möglichkeiten, aber wenn man sich die Beschreibungen durchliest, muss man sie nicht alle versuchen. Nur die richtigen.

                                                Ich muss aber zugeben, dass es für bestimmte Probleme mehr als eine Lösung gibt. Das liegt daran, dass es CSS schon 25 lang gibt und sich in der Zeit sehr viel getan hat. Etliches, was früher einmal gut war, wurde mehrfach von besserem abgelöst. Die alten Tutorials dazu sind aber immer noch da. Wir bei Selfhtml versuchen, auf die aktuellen Lösungen hinzuweisen. In 10 Jahren stimmt das dann vielleicht nicht mehr. Das ist in der ganzen IT normal, nicht nur im Web.

                                                Angesichts der Entwicklungen kann es einem höchstens passieren, dass man ein Feature verwendet, das noch nicht alle Browser unterstützen. Da ist unser Wiki schlecht aufgestellt, aber dafür gibt's https://caniuse.com oder die Mozilla-Dokumentation.

                                                Für das, was ich Dir nannte, gibt's aber keine Kompatibilitätsprobleme mit aktuellen Browsern. Wer die volle Layoutpracht im Internet Explorer sehen will, hat da schon eher Probleme.

                                                Ich bin nämlich kein Freund von Trial and Error.

                                                Offenbar doch, zumindest machst Du das lieber als Lesen und Verstehen. Ich habe gesagt: stretch ist der Default, der muss verändert werden, und den richtigen Wert genannt. Und was machst Du? Du probierst die Eigenschaften mit stretch als Wert durch. Ich habe auch den Wiki-Artikel verlinkt, der das alles erklärt.

                                                Rolf

                                                --
                                                sumpsi - posui - obstruxi
                                                1. Hallo Rolf,
                                                  bitte entschuldige meine Schludrigkeit. Ich hatte Dich missverstenden.
                                                  Ich bin jetzt mit der auto-Variante zu enger liegenden Elementen gelangt, allerdings immer noch mit zu weitem Abstand.
                                                  Ich habe es dann mit max-content versucht und damit liegen die Elemente beieinander. Aber genau dann passiert das, was mir bisher immer wieder passierte, nämlich die Änderung an einer Stelle macht zwar das Gewünschte, macht aber das bisher Erreichte wieder zunichte.
                                                  Konkret im vorliegenden Fall:
                                                  Die Elemente stehen jetzt dicht beieinander aber nicht mehr in der Zeile zentriert.

                                                  1. Hallo beginner,

                                                    damit solltest du jetzt die Erkenntnis haben, dass wildes Umherprobieren kein Ersatz für das Erarbeiten der Grundlagen bildet, gleichwohl ein systematisches Probieren in der Mathematik etwa durchaus ein adäquater Lösungsweg und probates (im Sinne von anerkannt, zuverlässig und sicher) Mittel ist.

                                                    Bis demnächst
                                                    Matthias

                                                    --
                                                    Du kannst das Projekt SELFHTML unterstützen,
                                                    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                                                    1. Hallo Matthias,
                                                      diese Feinheiten, die zig mögliche Alternativen in HTML und CSS zunächst durchzuarbeiten ist kaum zumutbar und frustrierend.
                                                      Das war vielleicht vor vielen Jahren noch sinnvoll, als es überschaubare Möglichkeiten gab, eine Webseite zu erstellen. Ich halte es eher mit "Learning by doing". Und mit Eurer Hilfe hat man ja auch motivierende Erfolgserlebnisse.

                                                      1. Hallo beginner,

                                                        diese Feinheiten, die zig mögliche Alternativen in HTML und CSS zunächst durchzuarbeiten ist kaum zumutbar und frustrierend.

                                                        Da stimme ich dir zu. Du sollst auch gar nicht zig mögliche Alternativen (von denen zig auch überholt sind und nicht mehr oder noch nie der best practise entpreachen, durcharbeiten, sondern eine Variante (grid zum Beispiel) von Grund auf.

                                                        Das war vielleicht vor vielen Jahren noch sinnvoll, als es überschaubare Möglichkeiten gab, eine Webseite zu erstellen.

                                                        Das war, glaube ich, noch nie sinnvoll.

                                                        Ich halte es eher mit "Learning by doing". Und mit Eurer Hilfe hat man ja auch motivierende Erfolgserlebnisse.

                                                        Ja. Arbeite ein Tutorial zu grid von Grund auf durch und die Erfolgserlebnisse stellen sich ein. Durcharbeiten ist mehr als Durchlesen.

                                                        Bis demnächst
                                                        Matthias

                                                        --
                                                        Du kannst das Projekt SELFHTML unterstützen,
                                                        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                                                        1. @ Matthias & Rolf,
                                                          Ihr habt leicht reden mit Eurem angehäuften Wissen.
                                                          Für Anfänger häufen sich die Fallstricke.
                                                          Ich habe das Forum schon einige Wochen mitgelesen.
                                                          Da wird neben älteren Methoden flex-box empfohlen, also beginne ich, mich einzulesen und erste Versuche zu starten. Auf der Suche nach Hilfe im Forum lese ich dann an anderer Stelle, dass grid moderner und auch flexibler sei. Dann Lesen von zahlreichen Artikeln "flex-box oder grid" mit den unterschiedlichsten Meinungen, u.a. "abhängig von der geplanten Anwendung", wobei ich nichts konkretes gefunden habe, welche typische und konkrete Anwendung für das eine oder das andere Verfahren geeignet ist. Einen leichten Vorteil habe ich beim grid gesehen.
                                                          Also raus aus den Kartoffeln, rein in die Kartoffeln. Ein anderes Problem, was mir aufgefallen ist: Es werden Lösungsvorschläge gemacht, die dann von anderen zerrissen werden, mitunder in so langen und vielen Beiträgen, dass ein Anfänger nicht mehr weiß, was nun richtig ist.

                                                          1. Hallo Namensvetter,

                                                            Es werden Lösungsvorschläge gemacht, die dann von anderen zerrissen werden

                                                            Warum sollten wir anders sein als die Ministerpräsidentenkonferenz...

                                                            Flexbox und Grid haben beide noch ihre Berechtigung. Flexbox ist mMn einfacher zu handhaben und freundlicher zum Internet Explorer, bietet aber auch weniger Möglichkeiten.

                                                            Prinzipieller Unterschied: Flexbox ist eindimensional (von flex-wrap abgesehen), Grid ist zweidimensional. Für ein Seitenlayout ist daher Grid besser. Wenn man nur Dinge neben- oder untereinander stellen will, Flexbox.

                                                            Ich würde annehmen, dass Grid alles kann, was Flexbox auch kann. Möglicherweise gibt's im Bereich flex-grow/flex-shrink Unterschiede, das will ich jetzt nicht im Detail auseinander nehmen. Im Allgemeinen kommt man also mit Grid zurecht. Aber weil es eine Meinungsvielfalt in dieser Welt gibt, und alte Blogs nicht unbedingt aktualisiert werden, findet man im Netz viele Meinungen dazu.

                                                            Und es kann nicht schaden, beide Techniken zu beherrschen. Viel Spaß bei Froggy und Grid Garden 😀

                                                            Rolf

                                                            --
                                                            sumpsi - posui - obstruxi
                                                      2. Hallo beginner,

                                                        Ich halte es eher mit "Learning by doing".

                                                        "Learning by doing" ist ok, solange es nicht auf "Doing by Copy+Paste" hinausläuft. Um zu wissen, was Du im Doing machen kannst, ist das Reading+Absorbing Voraussetzung.

                                                        Warum kann ich Dir hier wohl Dinge erklären? Ich habe gelesen, gelesen, gelesen. Und das Gelesene ausprobiert. Viele Jahre lang. Im Wiki (nicht beim Grid, aber anderswo) auch ein paar Sachen geschrieben. Schreiben konnte ich aber nur, weil ich andere Quellen gelesen habe. Ich will Dich nicht in die Dokumente von W3C und WhatWG schicken. Die sind zwar die ultimativ letzte Wahrheit, was richtig ist und was nicht, aber die sind trockener als der Mars. Unser Wiki versucht, lesbar zu sein. Die Mozilla-Dokumentation versucht, vollständig zu sein. Aber lesen muss man es.

                                                        Rolf

                                                        --
                                                        sumpsi - posui - obstruxi
                                                        1. Hallo Rolf,

                                                          Ich habe gelesen, gelesen, gelesen. Und das Gelesene ausprobiert. Viele Jahre lang.

                                                          ich hoffe, dass das nicht von mir erwartet wird, bis ich eine erste Webseite zustande bringe😉.

                                                          1. @Matthias und Rolf B.
                                                            Jetzt habe ich doch zweimal statt mit beginner mit Rolf geantwortet! Stress!
                                                            Kann das auch passieren, wenn ich mich registriere?

                                                            1. Hallo beginner,

                                                              weniger.

                                                              Bis demnächst
                                                              Matthias

                                                              --
                                                              Du kannst das Projekt SELFHTML unterstützen,
                                                              indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                                                  2. Hallo beginner,

                                                    dabei könnte es so einfach sein...

                                                    Hör mal auf, die Grid-Items einzeln zu positionieren (die ganzen justify-self Angaben). Diese richten das Grid-Item innerhalb der Zelle aus, die vom Grid-Layout vorgegeben wird.

                                                    Welchen Browser verwendest Du? Firefox? Chrome? Die haben beide eine Grid-Visualisierung in den Entwicklerwerkzeugen. Drück mal in der Seite F12 - kennst Du das? Nicht? Dann wird's Zeit - ohne diese Tools ist Webentwicklung wirklich ein Ratespiel. Geh in den Inspektor (Elements bei Chrome), klick oben links auf das "Element auswählen" Icon (der Pfeil, der in ein Rechteck hineinzeigt), und dann auf einen Teil deines Grids. Damit wird der Bereich, wo das Grid steht, im Inspektor angesprungen. Hinter <header> steht "grid". Klick da mal auf dieses "grid". Der Browser zeigt Dir dann an, wo genau die Grid-Linien sind, und du erkennst, wo deine Elemente im Grid angeordnet werden. Chrome zeigt auch noch ein paar Zahlen an, das sind die Liniennummern, die Du beim gezielten Anordnen von Elementen im Grid angeben kannst. Das brauchen wir hier aber nicht.

                                                    Im Firefox sieht das dann in etwa so aus (ausgehend von deiner Versoin 112):

                                                    Daran erkennst Du: Die Spalten sind alle gleich breit, und die Bilder sind innerhalb ihrer Spalten rechts- und linksbündig ausgerichtet.

                                                    Das ist die Auswirkung von deinem justify-self:end für's linke Bild. justify-self:baseline hab ich im Leben noch nicht gesehen, keine Ahnung was das hier bewirkt. Letztlich steht das Bild links in der Grid-Zelle.

                                                    Aber das willst Du ja nicht, du willst, dass das Grid an sich schmaler wird. Sonst rücken die Bilder nicht an den Text. Und das geht nicht mit -self Eigenschaften, dafür musst Du dem Grid selbst was sagen. Wie gesagt, standardmäßig verteilt der Browser die Grid-Spalten über die gesamte Breite, er macht stretch. Und das muss geändert werden, die Spalten sollen auf ihrer natürlichen Breite bleiben (die Du mit auto oder max-content angeben kannst, das geht hier beides), aber zentriert werden. center hast Du schon gefunden, aber justify-self ist die falsche Eigenschaft für diesen Wert. Guck nochmal ins Wiki, in den Artikel über Ausrichtung, und schau nach "Ausrichtung des Gestaltungsrasters".

                                                    Zwischen auto und max-content siehst Du dann einen Unterschied, wenn die Textblöcke mehr Text enthalten und auch die Textmenge unterschiedlich ist.

                                                    Rolf

                                                    --
                                                    sumpsi - posui - obstruxi
                                                    1. Es klappt, danke an Euch!