Beiträge von MrMurphy

    Der Artikel ist irreführend, da er den Eindruck erweckt, ein Masonry-Layout ist nur mit einer Anweisung möglich, in der das Wort Masonry auftaucht. Dabei wird ignoriert, dass CSS-Grid längst über eine entsprechende Anweisung verfügt.


    Ein Beispiel findet sich zum Beispiel unter


    https://labs.jensimmons.com/20…image-gallery-grid-1.html


    Das Spaltenanzahl, Bildergrößen, ... angepasst werden können sollte klar sein, da es sich um eine reine CSS-Lösung handelt.

    Zitat

    Gib es vielleicht eine css transform Variante mit der sich die Website wie oben beschrieben der Browser-Fenstergröße anpaßt?

    Nein.


    Was du offensichtlich suchst ist ein flexibles, responsives Webdesign. Damit hast du schon mal ein paar Stichworte nach denen du suchen kannst.


    So ein Design beruht auf aktuellem HTML und CSS. Damit hat dein aktueller Quellcode nur wenige Berühungspunkte.

    Zitat

    Das Masonry-Layout hier, das sich (zurzeit noch?) nicht mit HTML und CSS umsetzen lässt.

    Komisch nur, dass ich bereits seit Jahren Masonry-Layouts mit CSS-Grid erstelle. Die veraltete Lösung mit JS war ja Ellys Entscheidung.


    Zudem schreibt der Masonry-Ersteller David DeSandro selbst:


    Zitat


    All sizing and styling of items is handled by your own CSS.


    Was da abgeht ist heutzutage völlig unsinnig:


    1. Der Webseitenersteller erstellt ein Layout mit CSS. Also üblich und normal.


    2. Das Javascript schnappt sich das Layout, berechnet die Bilder und setzt jedes Bild mit "position: absolute;" mit Inline-CSS an seine Position. Und überschreibt damit die CSS-Vorgaben. Mit geöffneten Entwicklerwerkzeugen kann man den Neu-Berechnungen bei einer Änderung der Fensterbreite beinah zusehen.


    Wenn jemand so ein Layout manuell erstellen würde würdest du ihn wahrscheinlich auf den Topf setzen. Nur weil das mit JS erstellt wird soll es besser sein?


    Kann ich nicht nachvollziehen.


    Zitat

    Das ist auch gut so wg der Reihenfolge.


    Das verstehe ich nicht. Was ist denn besonderes an der Reihenfolge?

    Die schlauere Lösung wäre dem Browser das Rechnen zu überlassen. Mit Flexbox und CSS-Grid werden nur wenige Werte für ein Layout benötigt.


    Mir ist zwar nicht klar, auf welche Seite sich deine Aussagen beziehen, offensichtlich gibt es aktuell zwei.


    Nach dem was ich erkennen kann scheinen sich die Größenprobleme aus Rundungsdifferenzen zu ergeben.


    Zum einen führst du Berechnungen mit calc durch.


    Gravierender sind die Berechnungen durch JavaScript (JS). JS ist eine Programmiersprache, die zwar gerne auf Webseiten genutzt wird, mit HTML und CSS aber sachlich nicht zu tun hat. JS führt seine Berechnungen damit isoliert ohne Rücksicht auf HTML und CSS durch. Bei dem von dir gewählten Masonry werden zudem die Positionen durch JS-Berechnungen bestimmt.


    Wenn sich 4 Container in einer Reihe befinden, sich an jeder Seite in der Breite durch Rundungsdifferenzen ein Unterschied von 1px ergibt kommen 8px zusammen.


    Das ist aktuell meine Vermutung.

    Grundproblem: Du mißbrauchst eine Tabelle zum Layouten.


    Tabellen sind aber nur für Tabellendaten gedacht, die du nicht hast.


    Tabellendaten sind in der Regel Zahlen oder auch mal einzelne Worte. Heißt: Echte, zulässige Tabellendaten sind recht kurz.


    Entsprechend verhalten sich Tabellen. Breitenangaben, egal ob in %, Pixel, Rem, ... sind nur aktiv, wenn der Inhalt der Zellen das zulässt. Ist der Inhalt eine Zelle breiter als die vorgegebene oder maximale Breite gelten die Werte nicht mehr.


    Was du willst: Vorhandene Daten in Tabellenform darstellen. Das ist etwas anderes als eine Tabelle mit dem table-Element.


    Von daher solltest du zulässige HTML-Elemente verwenden. Die kannst du dann mit Flexbox (display: flex;) oder CSS-Grid (display: grid;) nach deinen Vorstellungen gestalten.

    Du hast in der header.php und der nav.php komplette Seitengerüste stehen. Dort dürfen aber nur die Inhalte stehen, die eingefügt werden sollen. In der header.php also


    Code
    1. <div id="header">
    2. <img src="bilder/logo-small.png" alt="Logo" />
    3. <span id="header_text">INTO THE WIDE OPEN - OUTDOOR SPORT</span>
    4. <img src="bilder/logo-small.png" alt="Logo" />
    5. </div>


    Wobei das div#header überflüssig wie ein Kropf ist. Besser also


    Code
    1. <img src="bilder/logo-small.png" alt="Logo" />
    2. <span id="header_text">INTO THE WIDE OPEN - OUTDOOR SPORT</span>
    3. <img src="bilder/logo-small.png" alt="Logo" />


    Und dann weist du in der start.php dem header-Element die id "header" zu.

    Das geht am einfachsten mit CSS-Grid (display: grid;). Ein Anleitung dazu gibt es beispielsweise unter


    https://blog.kulturbanause.de/


    Ein Beispiel ist auch schnell erstellt:


    https://www.w3schools.com/


    Auf "Run" klicken, die Fensterbreite kann durch Verschieben des Mittelstegs geändert werden. Zur Nachvollziehbarkeit habe ich den Quelltext so gering und übersichtlich wie möglich gehalten.


    Für die Anordnung der div-Container sind nur 3 CSS-Anweisungen erforderlich:


    Code
    1. @media only screen and (min-width: 900px) {
    2. .content {
    3. display: grid;
    4. grid-template-columns: 1fr 1fr 1fr;
    5. gap: 0.5rem;
    6. }
    7. }


    Bis 899px Fensterbreite werden die div-Container als Block-Elementen ganz normal untereinander dargestellt.


    Ab 900px wird die Grid-Darstellung gewählt. Durch das "1fr 1fr 1fr" werden 3 gleichbreite Spalten erzeugt. Das gap bestimmt den Abstand zwischen den div-Containern, so dass man sich nicht mit Außenabständen (margin) beschäftigen muss.

    Zitat

    Hab nur überlegt, ob das mit dem p nicht auch gehen müsste?

    Kannst du ja einfach mal ausprobieren. Aber - nein.


    Dazu habe ich bereits geschrieben


    Zitat

    Bei klassischen clearen bekommt das erste Element, das nicht mehr dem float unterliegen soll, die CSS-Anweisung "clear: both;".

    So weit ich sehen kann sollen in deinem Fall die p-Elemente neben dem Bild stehen, also dem float (dem gefloateten Element sogar wortwörtlich) unterliegen.

    Wenn die Texte wie beim Alexander bei allen Cards über die Bildhöhe hinausgingen würde die clear-Problematik in deinem jetzigen Beispiel auch nicht auftauchen. Aber stetig im Hintergrund warten bis ein Text gekürzt werden würde.


    Zitat

    Ich überleg grad, wem ich das clear dann zuweisen muss. mit img after arbeiten? oder card after?

    Am sichersten für Anfänger ist, wie schon geschrieben, ein leeres Element als letztes in das div einfügen. Das ist zwar quelltextmäßig nicht schön, ist aber am einfachsten nachvollziehbar und funktioniert problemlos. So war das von den Entwicklern ursprünglich auch vorgesehen.

    Ich habe mal ein Online-Beispiel bei W3SCHOOLS mit meiner Vorgehensweise bei solchen Problemen erstellt.


    1. Die SVG-Dateien werden direkt in den HTML-Quelltext eingefügt. Dazu ein paar Infos um den Inhalt der Datei auch später nachvollziehen zu können.


    2. Ein Bootstrap-Carousel mit Ellys HTML-Quelltext wird erstellt und hinzugefügt.


    3. Das Carousel wird kopiert und mit dem Änderungen des Online-Beispiels versehen.


    4. Das Corousel wird erneut kopiert und die beiden Grafiken des Online-Beispiels werden durch die gewünschten Pfeile ersetzt. Das ist dann gleichzeitig das Ergebnis.


    Bei Problemen kann ich so immer testen und ausprobieren ab wo sie auftreten.


    https://www.w3schools.com/


    Lokal und auch online vor dem Speichern bei W3SCHOOLS hat die Datei immer funktioniert. Nach dem Speichern hat W3SCHOOLS offensichtlich Schwierigkeiten die korrekt anzuzeigen. Der Quelltext kann aber direkt übernommen und lokal gestartet werden. Ich habe in die Datei einen entsprechenden Hinweis geschrieben.


    Oder man markiert und kopiert den gesamten Quelltext, klickt links oben auf den Home-Button, öffnet mit Klick auf "Try it youtself" (grün) einen leeren Editor, löscht die Vorgaben und fügt den Quelltext dort ein. Nach Klick auf "Run" wurde die Seite bei mir immer korrekt angezeigt.

    Na ja, das typische float-Problem nach dem Motto "Wozu die Grundlagen von float lernen, das kann jeder". Der Browser zeigt den Inhalt vollkommen korrekt an.


    Die Hintergründe von float füllen ganze Buchkapitel - und nicht die dünnsten. Deshalb nur das wichtigste in Kurzform:


    float "hebt" die gefloateten Elemente aus dem Dokumentenfluß.


    Alle nachfolgenden Elementen rutschen deshalb unter das gefloatete Element, bis sie wiederum höher als das gefloatete Element sind. Nur ihr Inhalt wird seitlich (in deinem Fall rechts) vom gefloateten Element angezeigt. Sobald der Inhalt das gefloatete Element passiert hat geht es unter dem gefloateten Element weiter.


    Das float wird gnadenlos vererbt.


    Die Folgen erlebst du grade selbst. Das ausführlich zu erklären sprengt die Möglichkeiten eines Forums.


    Der Alexander bleibt am Bild vom "Mitglied werden?" hängen. Wenn der Text vom Alexander kürzer wäre (kannst du ja mal ausprobieren) würde die Elvira noch weiter rechts am Bild vom Alexander hängen bleiben. Nach den HTML-Regeln das ganz normale Verhalten von float, seit über 20 Jahren.


    Wenn du bei "Mitglied werden?" den Text Zeile für Zeile verlängest wirst du feststellen, das irgendwann das Bild vom Alexander und schließlich auch die Überschrift mit Alexander nach links rutschen werden.


    Deshalb gibt es zu float einen Merksatz, der immer beachtet werden sollte: "Wer floatet muss auch clearen!"


    Es gibt verschiedene Möglichkeiten des clearens, Anfänger sollten mit der klassischen beginnen, da die "fortschrittlicheren" Nebenwirkungen haben können, die man bei deren Anwendung kennen sollte.


    Bei klassischen clearen bekommt das erste Element, das nicht mehr dem float unterliegen soll, die CSS-Anweisung "clear: both;".


    Da du eh' mit br-Elementen um dich schmeißt kannst du jeweils ein br-Element als letztes in jedes div.card-single eintragen und dem die CSS-Anweisungen mit auf ihren Weg geben. Ich empfehle dir für die CSS-Anweisung folgenden Eintrag:


    Code
    1. .card-single>br:last-child {
    2. clear: both;
    3. }

    Da du br-Elemente auch innerhalb des Card-Textes benutzt sollen nur br-Elemente gecleart werden, die als letzte im div stehen.


    Falls dir das zu neu und ungewohnt ist kannst du den eingefügten br-Elementen auch eine Klasse geben und die dann clearen. Das traue ich dir selbstständig zu.


    Falls das letzte Element immer ein a-Element ist und das grundsätzlich unterhalb des Bildes stehen soll kannst du auch dem die clear-Anweisung zuweisen.

    Zitat

    wieso hast du da jetzt ein only screen in der MQ? Könnte doch auch für all sein?

    In diesem Fall - ja. Bei meinem Vorgehen (Mobile First) sind die Grundangaben in der Regel aber schon gut für's Drucken geeignet. Falls trotzdem ein Drucklayout erforderlich ist erstelle ich lieber ein zusätzliches Layout, da Druckerbreiten nichts mit Fensterbreiten zu tun haben.


    Zitat

    Die erste brauche ich, damit mir alle Cards gleich hoch anzeigt werden, oder?


    Meiner Kenntnis nach passen sich die Container einer Reihe jeweils an das Höchste an. Das siehst du ja auch an meinem Beispiel. Das ist meist ja auch gewünscht. Das kannst du auf deiner Seite doch auch einfach ausprobieren.

    Noch ein kleiner Tip am Rande:


    Um den head-Bereich übersichtlicher zu gestalten kann die Einbindung der CSS-Dateien auch "ausgelagert" werden. Ich selbst verwende dafür eine "zentrale.css".


    Statt


    Code
    1. <link rel="stylesheet" href="fontawesome/css/all.css">
    2. <link rel="stylesheet" href="stylesheets/bootstrap.min.css">
    3. <link rel="stylesheet" href="stylesheets/bootstrap_carousel.css">
    4. <link rel="stylesheet" href="stylesheets/main.css">
    5. <link rel="stylesheet" href="stylesheets/nav.css">
    6. <link rel="stylesheet" href="stylesheets/footer.css">
    7. <link rel="stylesheet" href="stylesheets/responsive.css">


    würde im head-Bereich dann nur noch


    Code
    1. <link rel="stylesheet" href="stylesheets/zentrale.css">

    stehen.


    In der zentrale.css werden die CSS-Dateien folgendermaßen eingebunden:


    Code
    1. @import url(../fontawesome/css/all.css);
    2. @import url(bootstrap.min.css);
    3. @import url(bootstrap_carousel.css);
    4. @import url(main.css);
    5. @import url(nav.css);
    6. @import url(footer.css);
    7. @import url(responive.css);


    Die Pfadangaben gehen vom Standort der zentrale.css aus.


    So stehen alle CSS-Dateien direkt allen Webseiten zur Verfügung. Durch das "z" von zentrale.css sollte die Datei im Regelfall bei der üblichen Sortierung als letzte im Dateimanager angezeigt werden und ist deshalb schnell zu finden, falls dort Änderungen durchgeführt werden sollen.


    Falls für eine Webseite ein zusätzliches, nur für die Seite gültiges CSS erforderlich ist, binde ich die dafür erforderliche CSS-Datei halt zusätzlich ein. So zum Beispiel für die Mitglieder-Seite:


    Code
    1. <link rel="stylesheet" href="stylesheets/zentrale.css">
    2. <link rel="stylesheet" href="stylesheets/mitglieder.css">


    Immer noch übersichtlich. Und selbst wenn die Dateien nach langer Zeit mal wieder bearbeitet werden fällt sofort ins Auge, dass es für diese Webseite zusätzliche CSS-Regeln gibt. Das erleichtert die langfristige Pflege.




    Vielleicht ist das für dich eine Überlegung wert.