Beiträge von MrMurphy

    Du liegst daneben.


    Klassen dienen in erster Linie dem Layout. Und zwar vollkommen egal, ob die nur an einer Stelle oder mehrfach verwendet werden.


    ID dienen dazu Elemente zu bestimmen, die aus sachlichen Gründen nur einmal vorhanden sein dürfen. Meist, wenn sie direkt verlinkt werden sollen. Ein Linkziel darf es auf einer Seite nur einmal geben. Kein Browser prüft, ob eine ID auf einer Seite mehrfach vergeben wurde. Das spielt keine Rolle.


    Heutzutage werden deshalb beispielsweise auch von Frameworks oder Content Management Systemen (CMS) im CSS nur Klassen verwendet. Das vereinfacht im Endeffekt die Verwendung von CSS.


    Viele Anwender bringen beim Vergleichen von Klassen und ID immer noch die Spezifität ins Spiel. Weil die Spezifität von ID höher ist als die von Klassen wird ID eine höhere Wichtigkeit zugeschrieben. Das ist zwar seit jeher falsch, wird aber teilweise immer noch wie ein Fetisch verteidigt. Für Google und Co. spielt die Spezifität überhaupt keine Rolle. Das Verstehen der Spezität erfordert häufig mehr Hintergrundwissen und Verständnis als viele Webseitenersteller aufbringen können. Die verteidigen ihre Meinung dann zwar aggressiv, aber immer ohne Belege - weil es halt keine gibt.


    Wenn du für das CSS immer Klassen verwendest und für Sprungziele immer ID liegst du immer richtig.

    An bestimmte Browser werden Seiten bereits seit über 20 Jahren nicht mehr angepasst. Auch davor haben das eher nur überforderte Webseitenersteller gemacht.


    Aus deinen Quellcodeschnipseln und deiner Beschreibung lässt sich leider so gut wie nichts entnehmen.


    Wenn du die Seite mit aktuellem HTML und CSS neu erstellst reichen zwei, drei zusätzliche Angaben, damit sie in allen (auch älteren) Browsern sinnvoll angezeigt wird. Genau gleich ist dabei weder notwendig noch sinnvoll.


    Wir können die besser helfen wenn du mal den Inhalt einer kompletten Seite zur Verfügung stellen würdest.


    Bislang haben wir von dir folgende Informationen:


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


    Zur Anzeige oben auf den grünen Run-Button klicken.

    Das versteh ich nicht. Mit float kennst du dich doch genau so wenig aus. Du musst also beides lernen, wenn du es verwenden willst. Da ist es doch besser gleich die richtige Lösung zu lernen.

    Mit Linux habe ich keine Erfahrung.


    Unter Windows kenne ich keinen Editor oder ein anderes Programm, welches von sich aus die Inhalte von HTML-Tabellen löschen kann und dabei das HTML-Tabellengrundgerüst stehen lässt.


    Als Lösung sehe ich einen Editor mit einer erweiterten Makro-Funktion. Wo das Makro also nicht nur Tastenbetätigungen aufzeichnet, sondern über einige zusätzliche Funktionen verfügt. Ähnlich wie beim Programmieren, aber deutlich einfacher.


    Das kann zum Beispiel der UltraEdit, den es wohl auch für Linux gibt.


    Mit erweiterten Makro-Möglichkeiten könntest du auch umgekehrt verschiedene Tabellengerüste hinterlegen, die du dann passend auf Knopfdruck an der gewünschten Position einfügen kannst. Damit entfallen gleichzeitig Einlesefehler der HTML-Angaben.

    Zur seriösen Beantwortung müssten wir die gesamte Seite (HTML und CSS) kennen.


    Der Ansatz mit einer Klasse scheint grundsätzlich richtig. Es gibt aber auch noch andere Möglichkeiten.

    Bei Bootstrap sollte an bestehenden CSS-Dateien nichts geändert werden, da bei einem Update die individuellen CSS-Angaben gelöscht würden. Zudem findet man bei späteren Änderungswünschen die eigenen Angaben kaum noch wieder.


    Empfohlen und als sinnvoll hat sich erwiesen, hinter den bestehenden CSS-Datei-Verlinkungen (also als letztes) eine neue CSS-Datei anzufügen und dort die eigenen Angaben reinzuschreiben. Der Name dabei ist "beliebig" (muss halt den HTML-Konventionen entsprechen), du kannst die Datei zum Beispiel "eigene.css" nennen.


    Ich befürchte allerdings, dass die Anpassungen nicht so einfach sind wie von dir erhofft.


    Du musst entweder die bisherigen Positonierungsanweisungen von Bootstrap löschen oder sie überschreiben. Beim Überschreiben musst du die Spezifität (specificity) berücksichtigen, damit deine CSS-Angaben auch wirksam werden.


    Wenn Bootstrap verwendet wird hat es sich bewährt zunächst die Möglichkeiten von Bootstrap zu nutzen. Bei der Verwendung von eigenen CSS-Angaben sollte man sich mit HTML, CSS und Bootstrap auskennen, ansonsten stolpert man häufig von einem Mißerfolg zum nächsten.

    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.