bugfix: flexible Bilderwand

Moin zusammen,

ich habe mir überlegt meine sehr angestaubte Webpräsenz in ein attraktives modernes Kleid zu stopfen, vielleicht schauen die meißten dann über die Tatsache hinweg, dass der Inhalt bereits betagt und nicht so dynamisch ist wie junges Gemüse.

Da ich nichts weiter als Fotos zu bieten habe würde ich ein Layout ähnlich diesem anstreben.

Leider bin ich mindestens genau so eingerostet, wie die Ausgeburt meiner virtuellen Geistesergüsse. Als man über html4 zu sprechen begann habe ich mich der Welt mehr oder weniger erfolgreich präsentiert und nun den Anschluss verloren. Ich könnte jetzt mal einfach klauen, das gehört sich aber nicht.

Wär toll wenn ich hier ausreichend Starthilfe bekommen könnte, damit das wieder ans Rollen kommt. Flexbox oder Grid sind ja das non plus ultra für responsivness, allerdings finde ich nicht den Lösungsweg um hier so eine flexible Bilderwand hinzufummeln.

Der original Autor hat hier das Listenformat gewählt, ist das der beste Ansatz? Welche Struktur verleiht der „photowall“ die meiste Flexibelität? Imho sollten die Bilder umbrecnen und immer mehr Zeilen erzeugen bis noch 1 Spalte übrig ist und dann sollten die Bilder kleiner werden bis das keinen Sinn macht und der Bildschirm überläuft. Wie ich den Bildern eine Einheitsgröße verpasse und nur einen immer gleich großen zentrierten Ausschnitt zeige kann ich mir vorstellen (z.b. ein div mit overflow hidden) aber evtl. geht auch das besser?

Danke schon mal im Voraus & auf Wiederlesen! der torsten

--
------- Shakespeare sagt: To be or not to be / Sartre sagt: To be is to do / Camus sagt: To do is to be / Sinatra singt: Do be do be do
  1. Hallo Torsten,

    Bob Smith ist vielleicht visuell eine Anregung, aber die Technik auf seiner Seite ist kein Vorbild. Die Bilderwand ist mit float:left realisiert, und angesichts der Massen an .css und .js Dateien sollte er die Dateien bündeln. Dafür gibt's Tools.

    Wenn Du 20 Jahre den Trends in der Webentwicklung nicht gefolgt bist, erwartet Dich eine steile Lernkurve. Vielleicht guckst Du Dich mal auf der Einstiegsseite des SelfWiki um, um einen Überblick zu gewinnen.

    Und Du solltest Dir Gedanken über eine ordentlich Entwicklungsumgebung machen. Da gibt's heute eine Menge - und MS Frontpage gehört nicht dazu. Visual Studio Code ist zwar auch von Microsoft, aber eine der besseren Ideen aus Redmond.

    Rolf

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

      Visual Studio Code ist zwar auch von Microsoft, aber eine der besseren Ideen aus Redmond.

      Eine gute Empfehlung. Selbst ich, der ich einen persönlichen Groll gegen Microsoft hege, nutze VS Code. Dieser Editor ist einfach gut, und ich finde es erstaunlich, wieviele Ressourcen MS dort investiert.

      Freundliche Grüße,
      Christian Kruse

      1. Hallo Christian,

        Eine gute Empfehlung. Selbst ich, der ich einen persönlichen Groll gegen Microsoft hege, nutze VS Code. Dieser Editor ist einfach gut, und ich finde es erstaunlich, wieviele Ressourcen MS dort investiert.

        Ergänzend vielleicht noch eine Warnung dazu… es kommt drauf an wo man es runter läd, wenn hier Wikipedia richtig liegt:

        Der auf GitHub veröffentlichte Quelltext steht unter der MIT-Lizenz, einer von der OSI anerkannten Open-Source-Lizenz. Die auf der Microsoft-Website erhältlichen Binaries haben Microsoft-Markenkennzeichen und eine spezifische Konfiguration. Sie stehen unter einer proprietären Lizenz von Microsoft, in der sich Microsoft u. a. das Recht sichert, Nutzungsdaten zu übermitteln

        Gruss
        Henry

        --
        Meine Meinung zu DSGVO & Co:
        „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
    2. Moin Rolf,

      sumpsi - posui - clusi

      rofl

      ¿?ich hatte gehofft, dass man an meiner Klugscheißerei über Flexbox und Grid und meiner daraus resultierenden Verwirrtheit schließen kann, dass dies schon geschehen ist (bzgl. Einstiegsseite etc.) ich hatte eher auf einen Zaunpfahl gehofft wie: "doch, das geht super mit XXX" und "beschäftige mich mal damit".

      Als Enwicklungsumgebung sollte weiterhin Notepad++ reichen... (phase5 ist ja leider nur ein Zombie seit einer Dekade oder so)

      Danke schon mal im Voraus & auf Wiederlesen! der torsten

      --
      ------- Shakespeare sagt: To be or not to be / Sartre sagt: To be is to do / Camus sagt: To do is to be / Sinatra singt: Do be do be do
      1. sumpsi - posui - clusi

        rofl

        Hat da jemand den Sinn verstanden? Ich auch will.

        Gebe das Gepupse ein bei Deepl. Ergebnis: Polnisch erkannt. Übersetze nach Deutsch: sumpsi - posui - clusi

        Hmm, da muss ich mal übersetzen nach Mainz jenseits des Rheins. In der Uni soll es eine Germanistik-Abteilung geben.

        Linuchs

        1. Servus!

          sumpsi - posui - clusi

          rofl

          Hat da jemand den Sinn verstanden? Ich auch will.

          Gebe das Gepupse ein bei Deepl. Ergebnis: Polnisch erkannt. Übersetze nach Deutsch: sumpsi - posui - clusi

          Einzeln

          sumpsi (Latein)

          ich habe genommen
          

          posui

          ich habe gelegt
          

          clusi

          ich habe fertig
          

          rofl (englisch)

          Herzliche Grüße

          Matthias Scharwies

          --
          25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
          1. Hallo Matthias,

            clusi

            ich habe fertig

            Nein. claudere heißt schließen, oder versperren. Danach hast DU fertig 😉. Leider versteht das auch Google Translator nicht, und deepl kann gar kein Latein.

            "Ich nahm (ein Kärtchen), ich legte (es auf's Spielfeld), ich blockte (deinen Pöppel)".

            Das ist mein Motto beim Carcassonne spielen. Als Teil der Gesamtstrategie "Blocken, Klauen, Selber bauen".

            Ja, das ist im Deutschen Präteritum und im Latein Perfekt. Das ist aber meines Wissens richtig so. Die lateinische Form des Imperfekt hat eine andere semantische Funktion. Man übersetzt veni-vidi-vici ja auch in die Präteritum-Form.

            Aber dank dieser Frage bin ich jetzt endlich auf das richtige Verb gestoßen

            Rolf

            --
            sumpsi - posui - obstruxi
  2. Servus!

    ich habe mir überlegt meine sehr angestaubte Webpräsenz in ein attraktives modernes Kleid zu stopfen, vielleicht schauen die meißten dann über die Tatsache hinweg, dass der Inhalt bereits betagt und nicht so dynamisch ist wie junges Gemüse.

    Da ich nichts weiter als Fotos zu bieten habe würde ich ein Layout ähnlich diesem anstreben.

    Vor einem bestimmten Layout kommt erst mal was grundsätzliches:

    • Heutzutage gehen die meisten mit dem Handy ins Netz
      • die Verbindungen sind oft schlechter als zuhause mit DSL;
      • Bildschirme sind kleiner

    → Bilder sollen nicht 3000x2000px groß sein wie auf deiner alten Webseite.

    Flexbox oder Grid sind ja das non plus ultra für responsivness, allerdings finde ich nicht den Lösungsweg um hier so eine flexible Bilderwand hinzufummeln.

    Ich finde die Bilderwand gut, würde aber keine Bilder austauschen, da bei kleineren Viewports die Animation unter dem Text liegen könnte.

    Im von dir verlinkten Bsp dient die Bilderwand als vorgeschaltete Landing Page; alle Inhalte sind erst über die nächste Seite erreichbar. Das macht man heute nicht mehr so.

    Der original Autor hat hier das Listenformat gewählt, ist das der beste Ansatz?

    Ja, das ist eine Liste aus Bildern, die man mit grid (Bsp für Bildergalerie mit auto-fill) flexibel auf dem Bildschirm verteilen würde. Die Vorschaubilder sollten eine gewisse Mindestgröße aber nicht unterschreiten.

    Ich würde oben aber trotzdem eine Navigation unterbringen.

    Welche Struktur verleiht der „photowall“ die meiste Flexibelität? Imho sollten die Bilder umbrecnen und immer mehr Zeilen erzeugen bis noch 1 Spalte übrig ist und dann sollten die Bilder kleiner werden bis das keinen Sinn macht und der Bildschirm überläuft.

    Wie lange soll man sich diese Animation anschauen? Wann bricht man gelangweilt, frustriert ab, weil's zu lange lädt?

    Wie ich den Bildern eine Einheitsgröße verpasse und nur einen immer gleich großen zentrierten Ausschnitt zeige kann ich mir vorstellen (z.b. ein div mit overflow hidden) aber evtl. geht auch das besser?

    Ja mit object-fit

    Herzliche Grüße

    Matthias Scharwies

    --
    25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
    1. Moin Matthias,

      • Heutzutage gehen die meisten mit dem Handy ins Netz
        • die Verbindungen sind oft schlechter als zuhause mit DSL;
        • Bildschirme sind kleiner

      → Bilder sollen nicht 3000x2000px groß sein wie auf deiner alten Webseite.

      Jein du hast nicht beinahe Unrecht oder auch das Gegenteil... gg danke dass du mal drauf geschaut hast (jetzt weiss ich endlich woher der eigenartig-neue Klick in meinen web-stats kommt).

      Da das ganze eher einem Archiv gleicht findest du z.b. ganz oben links noch Bilder vom Anbeginn aller Zeiten, die waren damals auch zu groß für alle Viewports. Es gab noch keine Smartphones zu dieser Zeit.

      (mal kurz totlachen, bin gleich wieder da giggl)

      das Samsung Galaxy Note10+ hat eine Auflösung von 3040x1440, vermutlich sind die 3tausender Bilder auch bald wieder zu winzig, mich besucht im Normalfall nur der Fanclub (Familie) und eine Hand voll Verwirrte Verirrte.

      Daher kann ich dir nicht zustimmen, allerdings habe ich bei der Einen oder Anderen Serie die Kompression der Bilder falsch gewählt.

      Ich finde die Bilderwand gut, würde aber keine Bilder austauschen, da bei kleineren Viewports die Animation unter dem Text liegen könnte.

      Animation unter Text versteh ich nicht ganz, aber das Ausgtausche find ich auch zu viel des Guten...

      vorgeschaltete Landing Page; alle Inhalte sind erst über die nächste Seite erreichbar. Das macht man heute nicht mehr so.

      😀 hatte ich auch nicht vor...

      Der original Autor hat hier das Listenformat gewählt, ist das der beste Ansatz?

      Ja, das ist eine Liste aus Bildern, die man mit grid (Bsp für Bildergalerie mit auto-fill) flexibel auf dem Bildschirm verteilen würde. Die Vorschaubilder sollten eine gewisse Mindestgröße aber nicht unterschreiten.

      schau ich mir genauer an, eine Mindestgröße halte ich auch für sinnvoll, aber welche (?)... thx

      Wie lange soll man sich diese Animation anschauen? Wann bricht man gelangweilt, frustriert ab, weil's zu lange lädt?

      hier hast du mich sicher missverstanden, ich habe nicht vor etwas zu Animieren, habe versucht das verhalten zu beschreiben, wenn der Browser kleiner wird...

      Ja mit object-fit

      prima, danke! schau ich mir auch an...

      :-)

      Danke schon mal im Voraus & auf Wiederlesen! der torsten



      Shakespeare sagt: To be or not to be / Sartre sagt: To be is to do / Camus sagt: To do is to be / Sinatra singt: Do be do be do

      1. Servus!

        das Samsung Galaxy Note10+ hat eine Auflösung von 3040x1440, vermutlich sind die 3tausender Bilder auch bald wieder zu winzig, ...

        Daher kann ich dir nicht zustimmen, allerdings habe ich bei der Einen oder Anderen Serie die Kompression der Bilder falsch gewählt.

        Nein, diese Diskussion führen wir hier im Forum alle 3 Monate.

        Ich finde die Bilderwand gut, würde aber keine Bilder austauschen, da bei kleineren Viewports die Animation unter dem Text liegen könnte.

        Animation unter Text versteh ich nicht ganz, aber das Ausgtausche find ich auch zu viel des Guten...

        Im Beispiel hast Du eine h2 und einen Ghost-Button-Link über den Bildern. Bei bestimmten Viewports ändert sich der Hintergrund unter dem Ghost-Button → wirkt unruhig und unprofessionell.

        Ja, das ist eine Liste aus Bildern, die man mit grid (Bsp für Bildergalerie mit auto-fill) flexibel auf dem Bildschirm verteilen würde. Die Vorschaubilder sollten eine gewisse Mindestgröße aber nicht unterschreiten.

        schau ich mir genauer an, eine Mindestgröße halte ich auch für sinnvoll, aber welche (?)... thx

        ka, nicht 30x20px, aber evtl 6em x 3em?

        Hierzu im Wiki: Vergessen Sie den Begriff Pixel!

        Imho sollten die Bilder umbrecnen und immer mehr Zeilen erzeugen bis noch 1 Spalte übrig ist und dann sollten die Bilder kleiner werden bis das keinen Sinn macht und der Bildschirm überläuft.

        ..?

        hier hast du mich sicher missverstanden, ich habe nicht vor etwas zu Animieren, habe versucht das verhalten zu beschreiben, wenn der Browser kleiner wird...

        Ah! Formuliere doch so:

        • Die Bilder deiner Liste sollen eine bestimmte Größe (3em x 2em) haben.

        • Die Bilder sollen (wie Text) nebeneinander dargestellt werden.

        • Was keinen Platz hat, soll in einer neuen Zeile dargestellt werden.

        Das geht mit Grid Layout: CSS/Tutorials/Grid/responsive_Raster_ohne_Media_Queries

        Lies mal dieses Tutorial; ab auto-fill ist bestimmt auch für Dich was Verwendbares dabei!

        Sobald Dein Versuch läuft, kannst Du ja mit verschiedenen Bilder-Größen experimentieren. Die oben verlinkte Bilder-Galerie ermöglicht auch verschiedene Formate.

        Und auch wenn Du einen 4k-Monitor hast, Thumbnail-Bilder sollten nicht so groß sein!

        Herzliche Grüße

        Matthias Scharwies

        --
        25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
        1. Moin Matthias,

          Nein, diese Diskussion führen wir hier im Forum alle 3 Monate.

          Ich bin hoch erfreut, dass das Thema zumindest kontrovers verstanden wird :) und ich nicht ganz allein bin, denn: (*1 - Rest kommt später)

          schau ich mir genauer an, eine Mindestgröße halte ich auch für sinnvoll, aber welche (?)... thx

          ka, nicht 30x20px, aber evtl 6em x 3em?

          Hab mal ein wenig hin und her überlegt, mit em wird das doch dann schrecklich klein bei kleinem Browserfenster, oder?

          Hierzu im Wiki: Vergessen Sie den Begriff Pixel!

          (*1 - Rest) Und an dieser Stelle stelle ich ein Dilemma fest (oder habe ein Verständnissproblem) alle möglichen Elemente kann man mit em beliebig anpassen, aber Bilder haben eine definierte Größe in Pixel (keine css Pixel) das bedeutet am Ende die Bilder werden irgendwann mit den Elementen in denen sie stecken nicht mehr mitwachsen können ohne die sichtbare Qualität zu verschlechtern. Anderenfalls schrumpfen die Dinger auch bis zur Unkenntlichkeit, oder?

          Ah! Formuliere doch so:

          • Die Bilder deiner Liste sollen eine bestimmte Größe (3em x 2em) haben.

          • Die Bilder sollen (wie Text) nebeneinander dargestellt werden.

          • Was keinen Platz hat, soll in einer neuen Zeile dargestellt werden.

          Das geht mit Grid Layout: CSS/Tutorials/Grid/responsive_Raster_ohne_Media_Queries

          Lies mal dieses Tutorial; ab auto-fill ist bestimmt auch für Dich was Verwendbares dabei!

          Leider denke ich nicht HTML, ich denke optisch weil ich ein Angucker bin. Danke für die Übersetzung! Bin am rumfummeln geht aer sehr schleppend... die Umstände eben. Danke für die super Tipps.

          Und auch wenn Du einen 4k-Monitor hast, Thumbnail-Bilder sollten nicht so groß sein!

          Hm... geschmackssache, oder? Falls du mal hier schauen möchtest, das stellt die Fotocommunity zur Verfügung. Imho darf ein Thumbnail schon mal was erkennen lassen, damit man eventuell überlegen kann ob man das mal genauer inspizieren will oder nicht, besonders wenn's um das Bild hinter dem Thumbdingens geht. Oder...?

          Danke schon mal im Voraus & auf Wiederlesen! der torsten

          --
          ------- Shakespeare sagt: To be or not to be / Sartre sagt: To be is to do / Camus sagt: To do is to be / Sinatra singt: Do be do be do
          1. Servus!

            ka, nicht 30x20px, aber evtl 6em x 3em?

            Hab mal ein wenig hin und her überlegt, mit em wird das doch dann schrecklich klein bei kleinem Browserfenster, oder?

            Die Schriftgröße sollte immer gleich bleiben.

            1em ≙≈ 16px

            Das wären dann ca. 100px x 50px. (Besser wäre ein Verhältnis von 2/3 oder 3/4)

            Hierzu im Wiki: Vergessen Sie den Begriff Pixel!

            (*1 - Rest) Und an dieser Stelle stelle ich ein Dilemma fest (oder habe ein Verständnissproblem) alle möglichen Elemente kann man mit em beliebig anpassen, aber Bilder haben eine definierte Größe in Pixel (keine css Pixel) das bedeutet am Ende die Bilder werden irgendwann mit den Elementen in denen sie stecken nicht mehr mitwachsen können ohne die sichtbare Qualität zu verschlechtern.

            Ja, das stimmt prinzipiell. Es gibt aber keine genau zuordnenbare Pixel (mehr) und deshalb sollten Deine Thumbnails ca. doppelt so groß wie der zugewiesene Platz sein, also bei den oben vorgeschlagenen Maßen ca. 200px Breite.

            Hm... geschmackssache, oder? Falls du mal hier schauen möchtest, das stellt die Fotocommunity zur Verfügung. Imho darf ein Thumbnail schon mal was erkennen lassen, damit man eventuell überlegen kann ob man das mal genauer inspizieren will oder nicht, besonders wenn's um das Bild hinter dem Thumbdingens geht. Oder...?

            Diese 250px Breite deiner thumbnails sind auch ok, auf Deiner alten Seite waren sie viel kleiner (60x40px). Auf meinem Tablet sind 5 Bilder nebeneinander und drei Reihen sichtbar. Das finde ich übersichtlicher als 1000 Bilder auf einmal.

            Ich habe Deine Seite mit Rechtsklick im Seiteninspektor untersucht. Du hast im html-Element eine Schriftgröße von 10px festgelegt - das würde ich weglassen, bzw. alles durch em ersetzen.

            Die Bilder sind in einer Liste ul, die li-Elemente werden mit display: inline-block;nebeneinander angezeigt; was nicht mehr reinpasst, kommt eine Zeile nach unten. Gut!

            Die thumbnails dort sind passend groß (wsl. durch ein Skript erzeugt) und verlinken dann auf das große Photo, das nur geladen wird, wenn man draufklickt. Das finde ich gut.

            Danke schon mal im Voraus & auf Wiederlesen! der torsten

            Herzliche Grüße

            Matthias Scharwies

            --
            25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
            1. Moin Matthias,

              ich kann mich gar nicht genug bedanken, dass du dich mit mir beschäftigst :) aber diese "alten" Seiten brauchst du dir nicht unbedingt anschauen, ich möchte mir ein neues Gerüst erstellen, dass dann wieder für hoffentlich viele, viele, viele Jahre gut ist. Aus diesem Grund hab ich mal rumgewurschtelt und mich mit dem Urschleim beschäftigt und das hier zusammen gebastelt., verrat mir doch bitte ob das so Sinn macht, oder ob ich mit der Kombi von Flex und Grid mist gebaut habe. Das ganze schaut in allen mir zur Verfügung stehenden Endgeräten annähernd gleich aus, außer in dem blöden Handy von miener Frau (ist schon älter, auch das OS mit Browser etc.) da hat das obere div ein Gap an der rechten Seite (soll mal ein Navigationsbereich werden) :( ... die Bildwiederholung ist natürlich nur zu Demozwecken da... mir gehts vornehmlich um's css.

              (bitte nicht vergessen, dass ich wirklich nur aus privater Motivation versuche was zusammen zu basteln, ich werde nie ein Fortgeschrittener, ein Semiprofi oder gar ein Profi werden)

              Danke schon mal im Voraus & auf Wiederlesen!

              der torsten

              --
              ------- Shakespeare sagt: To be or not to be / Sartre sagt: To be is to do / Camus sagt: To do is to be / Sinatra singt: Do be do be do
              1. Servus!

                ich kann mich gar nicht genug bedanken, dass du dich mit mir beschäftigst :)

                Danke für die Blumen!

                ..., verrat mir doch bitte ob das so Sinn macht, oder ob ich mit der Kombi von Flex und Grid mist gebaut habe. Das ganze schaut in allen mir zur Verfügung stehenden Endgeräten annähernd gleich aus, außer in dem blöden Handy von miener Frau (ist schon älter, auch das OS mit Browser etc.) da hat das obere div ein Gap an der rechten Seite (soll mal ein Navigationsbereich werden) :( ... die Bildwiederholung ist natürlich nur zu Demozwecken da... mir gehts vornehmlich um's css.

                Das sieht doch gut aus, aber ...

                Das sind alles div-Eleemte, so dass du viele Klassen brauchst. Ich würde ul class="gallery und li nehmen, dass die Struktur gleich klar ist.

                (bitte nicht vergessen, dass ich wirklich nur aus privater Motivation versuche was zusammen zu basteln, ich werde nie ein Fortgeschrittener, ein Semiprofi oder gar ein Profi werden)

                Verstehe schon, aber wenn's für's Hobby (modelleisenbahn, Garten, etc) ist, soll's doch auch gut sein und aussehen! 😀

                Herzliche Grüße

                Matthias Scharwies

                --
                25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
                1. Moin Matthias,

                  Danke für die Blumen!

                  Dafür nicht, ehrlich! Leider hab ich mir noch nicht das Recht erworben Beiträge zu bewerten, wenn das mal so weit ist, würde ich's auch damit versuchen 😉 ...

                  Das sieht doch gut aus, aber ...

                  Das sind alles div-Eleemte, so dass du viele Klassen brauchst. Ich würde ul class="gallery und li nehmen, dass die Struktur gleich klar ist.

                  Öhm, ich hab mir einen abgebrochen, damit die Kacheln auch quadratisch werden (natürlich nur durch Internetklau) keinen Plan wie ich das mit einer Liste machen soll, mein rumgegoogle hat da nix zu Tage gefördert. Die vielen gleichlautenden divs sind sicher nicht so elegant... ich würds ehrlich gesagt so lassen wollen. dafür hab ich ein anderes Problem:

                  Inzwischen habe ich einen Text hinter das grid geschoben doch jedes mal wenn ich irgendo auf einen Link klicke verändert sich die Größe oder irgendwelche Abstände... das schaut fürchterlich aus und ich fummel und fummel... text-decoration:none oder outline-style:none ändert nix (grummel)

                  Verstehe schon, aber wenn's für's Hobby (modelleisenbahn, Garten, etc) ist, soll's doch auch gut sein und aussehen! 😀

                  logo ;-)

                  Danke schon mal im Voraus & auf Wiederlesen!

                  der torsten

                  --
                  ------- Shakespeare sagt: To be or not to be / Sartre sagt: To be is to do / Camus sagt: To do is to be / Sinatra singt: Do be do be do
                  1. Moin bugfix,

                    Inzwischen habe ich einen Text hinter das grid geschoben doch jedes mal wenn ich irgendo auf einen Link klicke verändert sich die Größe oder irgendwelche Abstände... das schaut fürchterlich aus und ich fummel und fummel... text-decoration:none oder outline-style:none ändert nix (grummel)

                    ...hab's gefunden... das verhalten von Lokesh Dhakars Lightbox Script hat sich geändert und ich hab nen falschen parameter in den Optionen gewählt...

                    Danke schon mal im Voraus & auf Wiederlesen!

                    der torsten

                    --
                    ------- Shakespeare sagt: To be or not to be / Sartre sagt: To be is to do / Camus sagt: To do is to be / Sinatra singt: Do be do be do
                2. Moin Matthias,

                  falls du noch irgendwo da draußen bist, bitte ich dich mal den fertigen Schmonzes anzuschauen ich hab alles brav mit relativen Größenangaben zusammen geschraubt. Jetzt habe ich zwei kapitale Aufgaben zu lösen:

                  erstens: das "Blog" Dingens schaut auf den kleineren Monitoren fürchterlich aus, wie kann ich das verbessern ohne Mediaqueries? Könnte mir vorstellen die Ränder doch mit Pixeln zu definieren... grübel

                  zweitens: im IE wird kein Grid angezeigt sondern alles einfach utereinander, das ist irgendwie blöd. Beim rumstöbern hab ich auch nix brauchbares dazu gefunden... hast du evtl einen Tipp?

                  Danke schon mal im Voraus & auf Wiederlesen!

                  der torsten

                  --
                  ------- Shakespeare sagt: To be or not to be / Sartre sagt: To be is to do / Camus sagt: To do is to be / Sinatra singt: Do be do be do
                  1. Servus!

                    Moin Matthias,

                    falls du noch irgendwo da draußen bist, bitte ich dich mal den fertigen Schmonzes anzuschauen ich hab alles brav mit relativen Größenangaben zusammen geschraubt.

                    Ok, sieht dich ganz gut aus!

                    Jetzt habe ich zwei kapitale Aufgaben zu lösen:

                    erstens: das "Blog" Dingens schaut auf den kleineren Monitoren fürchterlich aus, wie kann ich das verbessern ohne Mediaqueries? Könnte mir vorstellen die Ränder doch mit Pixeln zu definieren... grübel

                    Warum willst du auf media queries verzichten? Sie sind prinzipiell nützlich - man sollte sie jedoch nach dem Inhalt ausrichten, nicht nach eventuellen Geräteabmessungen.

                    In Deinem Fall hat .square-container ein padding: 3em 5em . Das sieht auf großen Bildschirmen evtl. noch ganz ok aus - auf meinem Handy aber nicht. Deshalb würde ich hier ansetzen:

                    /* Kompaktes Layout für mobile Geräte */
                    .square-container {
                        padding: 0;
                    }
                    
                    @media (min-width: 30em) { 
                      /* Layout für breitere Bildschirme */ 
                    .square-container {
                        padding: 3em 5em;
                    }
                    

                    Oder das padding ganz weglassen!

                    Generell finde ich den Hintergrund problematisch, bzw. nicht nötig. Es ist ja eigentlich ein Muster, das Text anzeigt. Lesbar ist der Text ja nicht. Da die Bilderwand der Mittelpunkt ist, würde ich ihn weglassen!

                    Ich habe noch etwas zum HTML zu sagen: Du hast eine Div-Suppe:

                    <div class="square">
                    	<div class="content">
                        	<a id="rumpelpumpel" href="https://jungmann.photo/20181231wholeyear/images/pic00.jpg" data-lightbox="rumpelpumpel" data-title="Schloss Bruchsal - Bau dir in deiner Gedankenwelt ein Schloss, und nicht ein Gefängnis. © H. Joost">
                            	<img src="photo-Dateien/pic00_011.jpg" alt="Schloss Bruchsal" title="Schloss Bruchsal - Bau dir in deiner Gedankenwelt ein Schloss, und nicht ein Gefängnis. © H. Joost" width="800" height="533">
                            </a>
                        </div>
                    </div>
                    

                    Ich habe jetzt grad nachgelesen, wie man die Quadrate in Grid erzeugt (https://medium.com/cloudaper/how-to-create-a-flexible-square-grid-with-css-grid-layout-ea48baf038f3) und verstehe, warum Du die .square mit

                    
                    .square {
                    
                        padding-top: 100%;
                    }
                    

                    versiehst. Die anderen Angaben sind imho überflüssig, bzw könntest du am Anfang des CSS dies setzen:

                    *, ::before, ::after { 
                      box-sizing: border-box; 
                    }
                    

                    IMHO könntest Du diese Klasse aber auch auf das a-Element anwenden:

                    <a class="square" id="rumpelpumpel" href="https://jungmann.photo/20181231wholeyear/images/pic00.jpg" data-lightbox="rumpelpumpel" data-title="Schloss Bruchsal - Bau dir in deiner Gedankenwelt ein Schloss, und nicht ein Gefängnis. © H. Joost">
                       <img src="photo-Dateien/pic00_011.jpg" alt="Schloss Bruchsal" title="Schloss Bruchsal - Bau dir in deiner Gedankenwelt ein Schloss, und nicht ein Gefängnis. © H. Joost" width="800" height="533">
                    </a>
                    
                    

                    Da muss man wsl. a und img etwas anders gestalten (display: inline-block)

                    Ich würde mich (aber erst) am Wochenende mal an eine Version von mir machen.

                    zweitens: im IE wird kein Grid angezeigt sondern alles einfach untereinander, das ist irgendwie blöd. Beim rumstöbern hab ich auch nix brauchbares dazu gefunden... hast du evtl einen Tipp?

                    https://caniuse.com/#feat=css-grid

                    Der IE 10-11 hatten eine Version, in der Du die Angaben mit Browser-Präfix versehen musstest:

                    .square-container {
                    
                    display: -ms-grid;
                    display: grid;
                    }
                    

                    So etwas wie auto-fill kann er aber trotzdem nicht. Ich würde aber darauf verzichten. Diese Versionen sterben aus!

                    Herzliche Grüße

                    Matthias Scharwies

                    --
                    25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
                    1. Servus!

                      Generell finde ich den Hintergrund problematisch, bzw. nicht nötig. Es ist ja eigentlich ein Muster, das Text anzeigt. Lesbar ist der Text ja nicht. Da die Bilderwand der Mittelpunkt ist, würde ich ihn weglassen!

                      Grad das erste Mal genau hingeschaut: Dein Hintergrund besteht ja aus 10.000 Links, die aber vom Inhalt (mit den gleichen Links) verdeckt werden.

                      Meine Meinung: Weg damit!

                      Herzliche Grüße

                      Matthias Scharwies

                      --
                      25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
                      1. Moin Matthias,

                        Grad das erste Mal genau hingeschaut: Dein Hintergrund besteht ja aus 10.000 Links, die aber vom Inhalt (mit den gleichen Links) verdeckt werden.

                        Meine Meinung: Weg damit!

                        :) nääääääää! lol es sind ca 900 Links im Hintergrund und etwa 100 im Grid, das hat folgenden Grund (vielleicht ist meine Sichtweise auch etwas verstaubt)

                        Das Grid enthält quasi nur das jeweils erste Bild einer Bilderserie, damit aber die anderen Bilder für Menschen, die Javascript nicht sehen können auch irgendwie erreichbar sind und damit die vielen Bots auch die ganzen (1000) gesammelten Zitate zu den Bildern lesen können hab ich mir das mit dem "grafischen" Text-Hintergrund ausgedacht. Sicher braucht das kein Mensch mehr, da hast du Recht aber so völlig unnütz ist das nicht. Es gibt keinen Link doppelt, alles was im Grid ist, ist nicht im Hintergrund und umgekehrt.

                        Deine erste Mail muss ich erst mal verdauen... das dauert ne weile. Zusätzlich bin ich noch auf der Suche nach einem neuen Lightbox script, das von Lokesh Dhakar ist sicher gut aber leider nicht responsiv...

                        Danke schon mal im Voraus & auf Wiederlesen!

                        der torsten

                        --
                        ------- Shakespeare sagt: To be or not to be / Sartre sagt: To be is to do / Camus sagt: To do is to be / Sinatra singt: Do be do be do
                    2. Moin Matthias,

                      Ok, sieht dich ganz gut aus!

                      Find ich egentlich auch, danke :)

                      Warum willst du auf media queries verzichten? Sie sind prinzipiell nützlich - man sollte sie jedoch nach dem Inhalt ausrichten, nicht nach eventuellen Geräteabmessungen.

                      Sicherlich peinlich aber ich hatte eigentlich gedacht relative Maßangaben verhalten sich wie Prozentuale Angaben, tun sie aber nicht. Außerdem war ich der Hoffnung, dass "responsive Raster ohne Media Queries" auch ohne solche funktionieren; wie blöd 😵 ...

                      In Deinem Fall hat .square-container ein padding: 3em 5em . Das sieht auf großen Bildschirmen evtl. noch ganz ok aus - auf meinem Handy aber nicht. Deshalb würde ich hier ansetzen:

                      /* Kompaktes Layout für mobile Geräte */
                      .square-container {
                          padding: 0;
                      }
                      
                      @media (min-width: 30em) { 
                        /* Layout für breitere Bildschirme */ 
                      .square-container {
                          padding: 3em 5em;
                      }
                      

                      Habs versucht, komischer Weise ändert sich dadurch das Verhalten, wenn der Bildschirm kleiner wird, würde ich mit etwas Gefummel sicher auch hin bekommen aber meine Lösung funktioniert jetzt auch ohne Media Queries, ich hab das padding einfach mit prozentualen Werten gefüttert, das löst mein Problem auf einfache Weise (watt bin ich stolz auf mich). Wär doch so auch OK, oder?

                      Ich habe noch etwas zum HTML zu sagen: Du hast eine Div-Suppe:

                      hm :( komm ich am besten mit klar...

                      Ich habe jetzt grad nachgelesen, wie man die Quadrate in Grid erzeugt (https://medium.com/cloudaper/how-to-create-a-flexible-square-grid-with-css-grid-layout-ea48baf038f3) und verstehe, warum Du die .square mit

                      
                      .square {
                      
                          padding-top: 100%;
                      }
                      

                      versiehst. Die anderen Angaben sind imho überflüssig, bzw könntest du am Anfang des CSS dies setzen:

                      *, ::before, ::after { 
                        box-sizing: border-box; 
                      }
                      

                      IMHO könntest Du diese Klasse aber auch auf das a-Element anwenden:

                      <a class="square" id="rumpelpumpel" href="https://jungmann.photo/20181231wholeyear/images/pic00.jpg" data-lightbox="rumpelpumpel" data-title="Schloss Bruchsal - Bau dir in deiner Gedankenwelt ein Schloss, und nicht ein Gefängnis. © H. Joost">
                         <img src="photo-Dateien/pic00_011.jpg" alt="Schloss Bruchsal" title="Schloss Bruchsal - Bau dir in deiner Gedankenwelt ein Schloss, und nicht ein Gefängnis. © H. Joost" width="800" height="533">
                      </a>
                      
                      

                      Da muss man wsl. a und img etwas anders gestalten (display: inline-block)

                      ich versuch mich mal dran, schätze aber das wird so schnell nix Gutes...

                      Ich würde mich (aber erst) am Wochenende mal an eine Version von mir machen.

                      Bin gespannt wie ne Steinschleuder.

                      zweitens: im IE wird kein Grid angezeigt sondern alles einfach untereinander, das ist irgendwie blöd. Beim rumstöbern hab ich auch nix brauchbares dazu gefunden... hast du evtl einen Tipp?

                      https://caniuse.com/#feat=css-grid

                      Der IE 10-11 hatten eine Version, in der Du die Angaben mit Browser-Präfix versehen musstest:

                      .square-container {
                      
                      display: -ms-grid;
                      display: grid;
                      }
                      

                      So etwas wie auto-fill kann er aber trotzdem nicht. Ich würde aber darauf verzichten. Diese Versionen sterben aus!

                      Du würdest dich wundern wie viele Leute in der Mittagspause bei mir rumklicken (ok, nicht gerde unerschöpflich viele aber) ne menge Firmen (so auch die, in der ich mein Lohn und Brot verdiene) haben im Softwerepool diesen doofen alten MS Browser. Imho wird es noch 3-5 Jahre dauern bis das Teil nicht mehr genutzt wird, so lange laufen nämlich die meißten Leasings bei Dell, HP und Co.

                      Danke schon mal im Voraus & auf Wiederlesen!

                      der torsten

                      --
                      ------- Shakespeare sagt: To be or not to be / Sartre sagt: To be is to do / Camus sagt: To do is to be / Sinatra singt: Do be do be do
                      1. Servus!

                        ich hab das padding einfach mit prozentualen Werten gefüttert, das löst mein Problem auf einfache Weise (watt bin ich stolz auf mich). Wär doch so auch OK, oder?

                        Ja, genau!

                        Ich habe noch etwas zum HTML zu sagen: Du hast eine Div-Suppe:

                        hm :( komm ich am besten mit klar...

                        Trotzdem wird das Markup dann schnell unübersichtlich!

                        Ich würde mich (aber erst) am Wochenende mal an eine Version von mir machen.

                        Bin gespannt wie ne Steinschleuder.

                        Hier ist mein Versuch: test.html

                        <div class="square-container">
                        	<a id="blog_kontakt" href="https://jungmann.photo/start.blog.html">
                        		Blog
                        	</a>
                            <a id="kontakt" href="https://jungmann.photo/start.blog.html">
                        		Kontakt
                        	</a>
                        	<!-- /* achtung chronologisch sortiert - neue oben */ -->
                        	<a id="wholeyearir" href="https://jungmann.photo/20181231wholeyearir/images/pic00.jpg" data-lightbox="wholeyearir" data-title="Kirschblüte - Zwischen Hoffnung und Erinnerung blüht das Glück. Unbekannt">
                        		<img src="photo-Dateien/pic00_060.jpg" height="100" alt="Kirschblüte" title="Kirschblüte - Zwischen Hoffnung und Erinnerung blüht das Glück. Unbekannt">
                        	</a>
                        ...
                        

                        Das div enthält ein a-Element mit dem Bild drin. Hier gibt es keine Klassen.

                        Das CSS wird nur über den .square-container gesteuert:

                        .square-container {
                          display: grid;
                          grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
                          grid-auto-rows: 1fr;
                          grid-auto-flow: dense;
                        }
                        
                        .square-container::before {
                          content: '';
                          width: 100%;
                          height: 0;
                          padding-bottom: 100%;
                          grid-row: 1 / 2;
                          grid-column: 1 / 1;
                        }
                        
                        .square-container > *:first-child {
                          grid-row: 1 / 1;
                          grid-column: 1 / 1;
                        }
                        

                        Die Kästchen werden 15rem (oder etwas mehr breit) - es gibt keinen Rand. Die Höhe ist identisch!

                        Es wird mit .square-container::beforeein Pseudoelement gebildet, das mit dem padding-bottom-Fix die gleiche Breite und Höhe erhält. Mit *:first-child wird es vor das grid positioniert und ist durch grid-row 1/1 und grid-column: 1/1 unsichtbar.

                        .square-container > a {
                          position: relative;
                        }
                        
                        .square-container img { 
                          position:absolute;
                          top:0;
                          lefT:0;
                          object-fit: cover; 
                          width:100%; 
                          height: 100%;  }
                        

                        Das a-Element wird relativ, das img absolut positioniert und voilá haben die Bilder ein quadratisches Format!

                        Der Blog-Link ist immer links oben, der Kontakt-Link mit grid-column: -2/ -1 immer rechts oben. Die Schreibschrift ist Hintergrund und nicht Teil des HTML, sondern über CSS formatiert.

                        Du kannst alle Bilder hovern, aber auch mit der Tab-Taste antabben.

                        Ich werde die Tage die Überschrift und den Blog-Link verschönern.

                        Herzliche Grüße

                        Matthias Scharwies

                        --
                        25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
                        1. Moin Matthias,

                          Hier ist mein Versuch: test.html

                          Das hat auf den ersten, zweiten und dritten Blick eine andere Qualität als meine div-Suppe :) auch wen ich das css auf den ersten, zweiten und dritten Blick nicht verstehe, das zieh ich mir morgen mal rein...

                          appropos: weisst du obs in der Wiki einen Abschnitt gibt der die Notation der Reihenfolge und Verbindung der Aufrufe auf verständliche Weise erklärt ist? Das hier ist zum Lernen ungeeignet, zumindest für mich. Wie finde ich heraus wie die ganzen Zeichen (Selektoren?) zu kombinieren sind?

                          Die Kästchen werden 15rem (oder etwas mehr breit) - es gibt keinen Rand. Die Höhe ist identisch!

                          ...auf jeden Fall eleganter als ineinander gestopfte divs zu verbiegen...

                          Es wird mit .square-container::beforeein Pseudoelement gebildet, das mit dem padding-bottom-Fix die gleiche Breite und Höhe erhält. Mit *:first-child wird es vor das grid positioniert und ist durch grid-row 1/1 und grid-column: 1/1 unsichtbar.

                          ...genau so etwas meine ich ...

                          Der Blog-Link ist immer links oben, der Kontakt-Link mit grid-column: -2/ -1 immer rechts oben. Die Schreibschrift ist Hintergrund und nicht Teil des HTML, sondern über CSS formatiert.

                          Ganz klar auch die bessere Lösung, allerdingens: den Kontakt-Link nach rechts oben zu verschieben ist gut gemeint wegen der Erreichbarkeit etc. ...finde ich allerdings nicht so schick, insbesondere bei kleinem Monitor hängen die beiden Dinger (Blog & Kontakt) dann immer aufeiander, das ist unhübsch. Den Kontakt hatte ich nach unten verfrachtet, weil die allermeisten Kontakt- oder Impressungslinks eben dort sind, der User ist quasi schon gewöhnt den Kram unten zu suchen.

                          Du kannst alle Bilder hovern, aber auch mit der Tab-Taste antabben.

                          Hovern find ich super, allerdings geht das ja bei Touchscreens nicht, deswegen hatte ich ungehoovert opacity:1; und gehoovert opacity:nullkommairgeendwas; dann schaut das ganze am Toucscreen halt "normal" aus.

                          Ich werde die Tage die Überschrift und den Blog-Link verschönern.

                          Ist dir aufgefallen, dass sich die Rastergröße bei den beiden Kästchen anders verhält als beim Rest? Beide, aber besonders der Blog-Link bleiben beim verkleinern des Browserfensters größer (imho erheblich, hab mir ne Schablone gebastelt) als alle anderen Kacheln. Mir Scheint dass sich da was überlagert, der Effekt zeigt sich nur in der Breite, nicht in der Höhe.

                          Danke schon mal im Voraus & auf Wiederlesen!

                          der torsten

                          --
                          ------- Shakespeare sagt: To be or not to be / Sartre sagt: To be is to do / Camus sagt: To do is to be / Sinatra singt: Do be do be do
                          1. Servus!

                            Hier ist mein Versuch: test.html

                            Das hat auf den ersten, zweiten und dritten Blick eine andere Qualität als meine div-Suppe :) auch wen ich das css auf den ersten, zweiten und dritten Blick nicht verstehe, das zieh ich mir morgen mal rein...

                            apropos: weisst du obs in der Wiki einen Abschnitt gibt der die Notation der Reihenfolge und Verbindung der Aufrufe auf verständliche Weise erklärt ist? Wie finde ich heraus wie die ganzen Zeichen (Selektoren?) zu kombinieren sind?

                            Im Kurs:

                            Das hier ist zum Lernen ungeeignet, zumindest für mich.

                            Das ist der Schnell-Index - nur ein Inhaltsverzeichnis, das dich zu den einzelnen Seiten bringt.

                            Der Blog-Link ist immer links oben, der Kontakt-Link mit grid-column: -2/ -1 immer rechts oben.

                            ...finde ich allerdings nicht so schick, insbesondere bei kleinem Monitor hängen die beiden Dinger (Blog & Kontakt) dann immer aufeiander, das ist unhübsch. Den Kontakt hatte ich nach unten verfrachtet, weil die allermeisten Kontakt- oder Impressungslinks eben dort sind, der User ist quasi schon gewöhnt den Kram unten zu suchen.

                            Stimmt! Ich wollte zeigen, dass man etwas aus dem Fluss herausnehmen kann und dann (ziemlich) genau platzieren kann,

                            Du kannst alle Bilder hovern, aber auch mit der Tab-Taste antabben.

                            Hovern find ich super, allerdings geht das ja bei Touchscreens nicht, deswegen hatte ich ungehoovert opacity:1; und gehoovert opacity:nullkommairgeendwas; dann schaut das ganze am Touchscreen halt "normal" aus.

                            Stimmt! Geändert

                            Ich werde die Tage die Überschrift und den Blog-Link verschönern.

                            Ist dir aufgefallen, dass sich die Rastergröße bei den beiden Kästchen anders verhält als beim Rest? Beide, aber besonders der Blog-Link bleiben beim verkleinern des Browserfensters größer (imho erheblich, hab mir ne Schablone gebastelt) als alle anderen Kacheln. Mir Scheint dass sich da was überlagert, der Effekt zeigt sich nur in der Breite, nicht in der Höhe.

                            Das Hintergundbild skaliert nicht; könnte man mit background-size: cover machen.

                            Ich seh die Vergößerung auch, weiß aber nicht warum. Beim Nachmessen stimmt's dann aber wieder.

                            Danke schon mal im Voraus & auf Wiederlesen!

                            der torsten

                            Herzliche Grüße

                            Matthias Scharwies

                            --
                            25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
                            1. Moin Matthias,

                              Im Kurs:

                              Danke für die Links, das pfeif ich mir heute mal rein, mal schauen wie viel hängen bleibt aber wie mein Großpapa immer zu sagen pflegte: "Man muss es nicht wissen, mann muss nur wissen wo's geschrieben steht!" gg

                              Im übrigen muss ich leider sagen, dass die alte SELFHTML (ja ich weiss, gähn!) besser geeignet war für das Selbststudium. Da wurde man besser ans Händchen genommen und durch die HTML/CSS Welt geleitet (oder ich bin inzwischen einfach nur zu alt) ?!

                              Der Blog-Link ist immer links oben, der Kontakt-Link mit grid-column: -2/ -1 immer rechts oben.

                              Den Artikel zu den grid-column und -row hab ich mir bereits angetan, wie die Positionierungsangaben aber wirklich funktionieren geht daraus für mich nicht hervor.

                              Das Hintergundbild skaliert nicht; könnte man mit background-size: cover machen.

                              Ich seh die Vergößerung auch, weiß aber nicht warum. Beim Nachmessen stimmt's dann aber wieder.

                              Ja, wenn das Raster zu stehen kommt, dann rappelt sich das wieder, trotzdem scheint irgendwas mit dem Rand oder dem grid-gap bei den beiden (Blog / Kontakt) Kacheln anders zu sein (konnte an der Verwendung des background-image liegen?) bei den "normalen" Kacheln ist auf meinem Notebook Monitor ein ca 1mm großer Spalt zwischen den Kacheln, bei den beiden andersartigen ist der Spalt scheinbar deutlich kleiner. Sicher kein Beinbruch aber seltsam...

                              Ich bin parallel noch auf der Suche nach einer neuen Lightbox und bin dabei auf etwas krasses gestoßen, eine Lightbox mit ohne einen einzigen Krümel Javascript. Alles nur CSS... leider ohne Caption und ohne Counter, nichtsdesto trotz krass! Wenn CSS igendwann mal swipes erkennt, perfekt weil superschnell und irre klein. Einfach einzubinden auch noch...

                              Danke schon mal im Voraus & auf Wiederlesen!

                              der torsten

                              --
                              ------- Shakespeare sagt: To be or not to be / Sartre sagt: To be is to do / Camus sagt: To do is to be / Sinatra singt: Do be do be do
                              1. Hallo bugfix,

                                Im übrigen muss ich leider sagen, dass die alte SELFHTML (ja ich weiss, gähn!) besser geeignet war für das Selbststudium. Da wurde man besser ans Händchen genommen und durch die HTML/CSS Welt geleitet

                                Früher gab es 10 Wege durch die HTML/CSS-Welt, da kann man sich einen aussuchen. Heute gibt es viel viel mehr. Das macht es so schwer, dieses Thema für ein Buch aufzubereiten. Deshalb das Wiki. Und ich finde, @Matthias Scharwies hat hier mit den Kursen konzeptionell hervorragende Arbeit geleistet.

                                Bis demnächst
                                Matthias

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

                                  Hallo bugfix,

                                  Im übrigen muss ich leider sagen, dass die alte SELFHTML (ja ich weiss, gähn!) besser geeignet war für das Selbststudium. Da wurde man besser ans Händchen genommen und durch die HTML/CSS Welt geleitet

                                  Früher gab es 10 Wege durch die HTML/CSS-Welt, da kann man sich einen aussuchen. Heute gibt es viel viel mehr. Das macht es so schwer, dieses Thema für ein Buch aufzubereiten. Deshalb das Wiki. Und ich finde, @Matthias Scharwies hat hier mit den Kursen konzeptionell hervorragende Arbeit geleistet.

                                  Hi, schade dass du mich nicht komplett zitiert hast denn mit:

                                  ... Welt geleitet (oder ich bin inzwischen einfach nur zu alt) ?!

                                  wollte ich einräumen, dass der Fehler/ das Problem mit hoher Warscheinlichkeit bei mir liegt und nur zum Ausdruck bringen, dass sich (wie auch eingangs schon bemerkt) viel verändert hat. Um hier Missverständnisse zu vermeiden möchte ich mich an dieser Stelle bei Matthias und allen die sich an so einem Projekt beteiligen bedanken und mir ist auch durchaus klar, dass soetwas neben den vielen Arbeitsstunden keineswegs als Selbstvertständlichkeit zu verstehen ist.

                                  Darum bitte ich das als Entschuldigung für einen verbalen Fehltritt zu verstehen.

                                  Danke schon mal im Voraus & auf Wiederlesen!

                                  der torsten

                                  --
                                  ------- Shakespeare sagt: To be or not to be / Sartre sagt: To be is to do / Camus sagt: To do is to be / Sinatra singt: Do be do be do
                                  1. Hallo bugfix,

                                    Darum bitte ich das als Entschuldigung für einen verbalen Fehltritt zu verstehen.

                                    Es gibt keinen Grund für eine Entschuldigung, ich sehe keinen Fehltritt. Alles gut.

                                    Bis demnächst
                                    Matthias

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

                              ich hab dein CSS in meine Testseite rein gebastelt, außerdem hab ich die gaps entfernt, den Kontakt wieder nach unten verschoben und den "aktiven" Hintergrund, der dir nicht gefällt wieder dahinter geschoben. Mittels

                              .square-container {
                                margin:3% 6%;}
                              

                              hab ich die entsprechenden Abstände geschaffen. Leider führt das dazu, dass die Hintergrundlinks nicht mehr klickbar sind, sofern sie sich rechts und links vom Grid befinden. Die oben drüber dagegen sind klickbar. Ich hatte vermutet das liegt an

                              
                              .square-container::before {
                                width: 100%;
                              }
                              

                              aber die Änderung des Wertes ändert nix. Auch meine Annahme dem Pseudoelement ein margin / padding zu verpassen führt nicht zum gewünschten Ergebnis. Mein nächster Versuch, meine Spezialität quasi: Pack das div in ein div und formatier doch dieses läuft auch ins Leere, nach einigem weiteren undokumentierbarem gefummel jetzt bräuchte ich bitte einen Hinweis was ich denken muss, damit das funktioniert und der Hintergrund zugänglich wird ?!

                              Danke schon mal im Voraus & auf Wiederlesen!

                              der torsten

                              --
                              ------- Shakespeare sagt: To be or not to be / Sartre sagt: To be is to do / Camus sagt: To do is to be / Sinatra singt: Do be do be do
  3. Beim Stichwort „flexible Bilderwand“ fiel mir eine Gestaltung ein, die ich vor Jahren mal als Studie für einen Verein gemacht habe.

    Da konnten Bilder mit der Maus verschoben werden und beim Loslassen der Maustaste telefonierte Ajax die Position nach Hause.

    Die nächsten Besucher sahen dann die neue Gestaltung der Bilderwand.

    Wenn das nicht flexibel ist ...

    Linuchs

    1. Moin Linuchs,

      Da konnten Bilder mit der Maus verschoben werden und beim Loslassen der Maustaste telefonierte Ajax die Position nach Hause.

      danke für die Idee, aber ich werde mich auf das beschränken, was ich auch zu bewältigen im Stande bin... hab schon genug mit html & css zu kämpfen.

      Danke schon mal im Voraus & auf Wiederlesen!

      der torsten

      --
      ------- Shakespeare sagt: To be or not to be / Sartre sagt: To be is to do / Camus sagt: To do is to be / Sinatra singt: Do be do be do