Beiträge von MrMurphy

    Ohne colspan gibt es keine Fehlermeldung. Heißt, die beiden Tabellenreihen haben gleich viele Spalten / Zellen.


    Wenn in der zweiten Reihe colspan hinzugefügt wird muss demnach gleichzeitig in der Tabellenreihe eine Zelle gelöscht werden.

    Zitat

    Ich weiß, dass es geht, ...


    Die Information ist falsch. Rein mit CSS kann kein Inhalt von HTML-Elementen überprüft werden. Eventuell wird so eine Möglichkeit aktuell entwickelt, wird in der Praxis aber noch nicht anwendbar sein.


    Oder du musst dich mit JavaScript oder PHP beschäftigen.

    Zitat

    Wäre toll wenn dieser Hintergrund dann nicht die volle Höhe hat, sondern nur 50% der eigentlichen Höhe.

    Das kann ich ohne Beispiel nicht nachvollziehen. 50% von was?


    Pseudoelemente helfen für dein Problem überhaupt nicht weiter.


    Wenn eine Überschrift eine Hintergrundfarbe erhalten soll, kannst du die direkt der Überschrift zuweisen. Wenn nur die Worte der Überschrift eine Hintergrundfarbe erhalten sollen würde ich ein span-Element verwenden.


    Wenn ein einzelnes Wort eine Hintergrundfarbe erhalten soll, kannst du es mit einem geeigneten Element, zum Beispiel dem span-Element, umgeben und dem eine Hintergrundfarbe zuweisen.


    Ich habe mal eine Beispielseite erstellt:


    https://www.w3schools.com/code…asp?filename=GOHGBRDGXFFF


    Dort auf den grünen Run-Button klicken.


    Damit die Hintergrundfarbe nicht zu nah an den Worten klebt habe ich jeweils ein kleines padding hinzugefügt. Bei der Überschrift an allen Seiten, bei den Worten im Text nur links und rechts.

    Ich habe mal ein flexibles responsives Online-Beispiel nach den aktuellen HTML- und CSS-Regeln mit CSS-Grid erstellt.


    Der HTML-Teil des Quelltextes ist deutlich übersichtlicher und damit pflegeleichter. Das CSS kann eventuell noch etwas vereinfacht werden, speziell die Erstellung des Rahmens in der Tabellenansicht, das war mir aber nicht so wichtig.


    https://www.w3schools.com/code…asp?filename=GOHC0YFJ9SUY


    Dort auf den grünen Run-Button klicken, die Breite des Fensters kann durch verschieben des Mittelstegs geändert werden. Änderungen können direkt im Quelltext gemacht und durch erneutes Klicken auf Run ausgeführt werden.

    Zitat

    Aber dann bräuchte man immer noch 2 Sachen.

    Nein, unnötige Elemente nur für das Layout sind zu vermeiden.


    Ich schlage folgendes Vorgehen vor:


    Zunächst löscht du das float: left; bei dem Pseudoelement :before.


    Dann sucht du in der main.css nach


    Code
    1. .content li {
    2. margin-left: 3em;
    3. }


    Das muss so um Zeile 175 herum sein.


    Dort fügst du zwei Einträge hinzu:


    Code
    1. .content li {
    2. margin-left: 3em;
    3. display: flex;
    4. gap: 15px;
    5. }

    Speichern, fertig.


    gap regelt den Abstand zwischen before und dem eigentlichen Inhalt. Mit den 15px tut sich erst mal was, den Abstand kannst du natürlich nach deinen Wünschen ändern.


    Nachtrag: Grade noch gesehen: Dann kannst du direkt unter dem float auch gleich das armselige margin-left: -1.5em; löschen. Statt dessen dann das margin-left: 3em; beim li-Element etwas verkleinern.

    Zitat

    Früher, vor responsive Webdesign, hat man ja mit Tabellen gelayoutet

    Auch mit Frames.


    Zitat

    Daher finde ich HTML table hier durchaus angemessen.

    Was HTML-Tabellen sind entscheiden die HTML-Regelungen.


    Zitat

    Bin ich da auf dem richtigen Weg?


    Nein.


    Tabelle wird zum einen umgangssprachlich und zum anderen fachlich verwendet.


    Mit HTML-Tabellen sind fachliche Tabellendaten gemeint. Was das ist habe ich aufgegeben versucht zu erklären, da die meisten Anwender damit schlicht überfordert sind.


    Fachliche Tabellen kommen außerhalb von Wissenschaft und Wirtschaft so gut wie nie vor.


    Wenn von Tabellen gesprochen wird ist meist eine Tabellendarstellung gemeint. In der Regel verbergen sich dahinter Listen. So ist zum Beispiel die Bundesligatabelle fachlich eine Liste. Nach der Bezeichnung bei Überschriften kann man deshalb nicht gehen.


    Zum Beispiel kann ein Roman in Tabellendarstellung geschrieben werden (jedes Wort in eine Zelle), das bleibt trotzdem ein Roman.


    Zitat

    in der ein Datum und ein Event steht

    Das sind keine Daten für eine HTML-Tabelle.


    Zitat

    Es gibt ja auch noch display:table

    Richtig, das erzeugt eine Tabellendarstellung und ist auf viele HTML-Elemente zulässig anwendbar.

    Zitat

    Mit Grid meinst du Icon und Text in 2 getrennte DIVs packen?

    Das habe ich nicht geschrieben und meine ich auch nicht.


    Zitat

    Normalerweise sollte das eine Liste bleiben

    Richtig, das sehe ich auch so.


    Zitat

    Am float liegt es aber wohl doch nicht, denn auch wenn ichs rausnehm, verschwindet die ganze Liste.

    Das steht ein display: none; im CSS.

    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.