MrMurphy

(Zitat)

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)


Was da abgeht ist heutzutage völlig unsinnig:

…

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…

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.

…

Noch ein Tip, der bei include hilfreich sein kann:

Du kannst eigentlich in jedem Browser mit Klick der rechten Maustaste ein Kontextmenü aufrufen und dort den Quelltext anzeigen lassen, den der Browser vom Server bekommen hat.

Um den Text besser lesen zu…

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

(Quelltext, 5 Zeilen)


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

…

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…

Hinweis: Die Erweiterung meiner Antwort hat sich mit Ellys Beitrag überschnitten.

Ausprobieren?

Ja, das geht. Allerdings nicht bezogen auf ein p-Element, sondern auf den umgebenden Container. Ein clear reicht für ein stabiles Beenden des float nicht aus. Eine Erklärung dazu findet sich auf

https://blog.kulturbanause.de/

Das ist eine der…

(Zitat)

Kannst du ja einfach mal ausprobieren. Aber - nein.

Dazu habe ich bereits geschrieben

(Zitat)

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)

Am sichersten…

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.…

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…

Ist deine Entscheidung.

(Zitat)

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…

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

(Quelltext, 9 Zeilen)


würde im head-Bereich dann nur noch

…

Gefällt, das sieht gut aus.

Du könntest noch zwei Verbesserungen vornehmen:

Bei der Klasse grid können die beiden rows-Anweisungen gelöscht werden. Die bewirken nichts.

Bei der Klasse socialmedia wäre eigentlich grid-column: 3 / 4; korrekt. Wenn ein…

Ich hab' mal ein Online-Beispiel erzeugt, dass die Bilder zunächst in Originalgröße / -verhältnis zeigt und dann mit deinen Angaben.

https://www.w3schools.com/

Der Mittelsteg kann zur Änderung der Fensterbreite verschoben werden.

Ich sehe die gleiche Breite…

(Zitat)

Du weißt offensichtlich überhaupt nicht was du schreibst. In dem Beispiel wird mit aspect-ratio direkt auf das Bild angewandt verhindert, dass es seine Seitenverhältnisse ändert. Also genau das, was ich geschrieben habe. Du hast jedoch behauptet

…

Du hast den Blogeintrag offensichtlich überhaupt nicht durchgelesen oder verstanden. Dort wird nirgends beschrieben wie direkt das Seitenverhältnis von Bildern mit aspect-ratio geändert werden kann. Das geht sachlich einfach nicht.

Entweder werden die…

Danke für die Info. Das

(Zitat)

kannte ich noch nicht. Hast du mal ein praktisches Beispiel?

(Zitat)


Das man nur Bilder bearbeiten kann, die auf dem eigenen Rechner vorliegen ist klar. Das ist aber die Regel, wie du offensichtlich auch erkannt hast. Wer gute…