Beiträge von MrMurphy

    Das nav-Element ist nur für Navigationsblöcke gedacht einschließlich (falls sinnvoll) passenden Überschriften und / oder verlinkten Bildern.


    Das header-Element hat genau wie nicht zur Navigation gehörende Bilder nichts im nav-Element verloren.


    Umgekehrt darf das header-Element ein nav-Element enthalten.


    In der Regel werden header- und nav-Elemente getrennt, da die Seite so flexibler an unterschiedliche Bildschirme und andere Ausgabegeräte angepasst werden kann. Wobei es keine Rolle spielt, ob zu erst das header-Element oder das nav-Element im Quelltext steht.

    Zitat

    Jetzt würde mich mehr interessieren ob ich beim bisherigen Projekt margin oder position mit modernen Alternativen ersetzen kann?

    Ja, mit CSS-Grid (display: grid;) in Verbindung mit Flexbox (display: flex;).


    Zu dem HTML



    reicht dann grundsätzlich folgendes CSS



    Dazu dann noch etwas Standard-CSS für die Schrift und um Grafiken responsive zu bekommen.


    Der gesamte Quelltext (für die Ausrichtung des Textes neben der Grafik) könnte dann folgendermaßen aussehen. Die Angaben Basisangaben, Schriften und Grafiken sind aus Erfahrung für mich für die gesamte Website sinnvoll:


    Zitat

    Kann sein, das ich es einfach nur falsch "rausgelesen" habe und du nicht zu dieser Gruppe gehörst, dann nichts für ungut.


    Du könntest zum Beispiel mal ältere Beiträge von mir lesen. Dann wirst du feststellen, dass ich immer das passende CSS für das jeweilige Problem empfehle und nichts gegen Flexbox habe, wenn es angebracht ist, zum Beispiel



    Ob Flexbox (display: flex;) oder CSS-Grid (display: grid;) zur Lösung des jeweiligen Problems besser geeignet ist hängt nicht davon ab, aus wie vielen Seiten die Website besteht.

    Zitat

    Gibt es eine Alternative zu margin-right?


    1. Korrektes HTML


    2. Passendes CSS


    Du bist beim CSS leider einseitig auf Flexbox fixiert. CSS ist aber ein Gesamtpaket und Flexbox ist für viele Lösungen halt nur schlecht oder gar nicht geeignet.


    Eine Grundregel beim HTML und CSS ist zum Beispiel, den Quelltext minimal zu halten. Also nur HTML-Elemente und CSS-Anweisungen zu verwenden, die notwendig sind.

    Da können wir mit den bisherigen Informationen auch nur raten.


    Der Online-Shop hat offensichtlich eine Autokorrektur. Wann die eingreift sollte aus der Anleitung hervorgehen, die wir nicht kennen. Aus dem Bauch fallen mir dazu zwei Ursachen ein:


    1. Der HTML-Quelltext entspricht nicht den HTML-Regeln.


    Das könnte bei deinem Quelltext die Ursache sein. Da bei allen Webbrowsern eine Fehlerkorrektur eingebaut ist legen Webseitenersteller häufig keinen Wert auf einen korrekten HTML-Quelltext. So nach dem Motto: Wenn das Ergebnis wie von mir gewünscht angezeigt wird ist der Quelltext richtig.


    Um das auszuschließen solltest du den Link zunächst schlicht und einfach ohne jeden Firlefanz, Sonderzeichen, komische Anführungszeichen und ähnliche Besonderheiten erstellen. Zum Beispiel


    Code
    <p><a href="https://mediahub.ai/share/album/03fd377a-8214-4a0b-8779-2015c78e2699/">Bilddatenbank NERO</a></p>


    Falls der Link dann funktionieren sollte kannst du ihn anschließend Stück für Stück nach deinen Wünschen erweitern.


    2. Der Online-Shop erlaubt nur interne Verlinkungen.


    Das kannst du nur ändern wenn du Zugriff auf den Quelltext hast und weißt, wo du das ändern kannst. Der Betreiber muss das natürlich auch rechtlich erlauben. Meist sind solche gewollten Sperren in PHP oder JavaScript erstellt.

    Zitat

    Wie bekomme ich diese Lücken weg?


    Die Frage ist falsch gestellt. Ohne CSS-Angaben entsteht keine Lücke oder Abstand, wenn a-Elemente in Text eingefügt werden. Egal ob Absatz, Überschrift, Liste oder was es sonst so gibt.


    Dabei können wir dir ohne Kenntnis deines Quelltextes nicht helfen. Du musst also alle Formatierungen im CSS daraufhin untersuchen, ob sie für die unerwünschten Abstände verantwortlich sind und dann entweder löschen oder durch geeignete Angaben überschreiben.

    Mal ein Lösungsansatz. Du musst nur noch den Inhalt zwischen den beiden style-Elementen in die externe CSS-Datei kopieren und die wie in der Aufgabe gefordert benennen. Zum Testen kannst du den Quelltext direkt in eine Datei übernehmen.


    Dazu benötigst du HTML und CSS in aktueller Version. Die beiden Texte werden als Text zusammen mit dem Bild in einen Container in HTML eingegeben und mittels CSS ausgerichtet. Aus dem Bauch raus würde ich die Texte mittels Flexbox (display: flex;) ausrichten, das hängt aber von der gesamten Seite ab, die ich nicht kenne.


    Als Einzeiler geht das etwas komplizierter auch, das hat aber mit aktuellem HTML und CSS nichts zu tun.

    Ohne die wirkliche Größe des Bildes zu kennen:


    Code
    <a href="LINK" style="display:block; width:600px; height:300px; margin: 0 auto;"> <img src="BILD.png"style="display:block; width:600px; height:300px;" alt="TEXT"/> </a>

    "div column-matter" sagt mir überhaupt nichts.


    Zitat

    kann mir jemand in die richtige richtung weisen,


    Du kannst mit CSS ein Drucklayout erstellen


    https://www.mediaevent.de/css-links-drucken/


    und dort eine Spaltenansicht hinterlegen


    https://www.mediaevent.de/css/text-columns.html


    Da viele Browser das Ausdrucken von Seiten eher stiefmütterlich behandeln solltest du das Ergebnis in möglichst vielen Browsern testen.

    1. In der style.css in der Klasse .grid den Eintrag "max-width: 1200px;" löschen


    2. In der style.css in der Klasse .header-group den Eintrag "margin-bottom: 30px;" löschen


    3. In der style.css in der Klasse .header-widget den Eintrag "padding: 30px 20px; löschen


    Statt die drei Einträge gleich zu löschen kannst du die natürlich auch auskommentieren.


    Wenn nicht der gesamte Inhalt über die volle Seitenbreite gehen soll wirst du die Seite komplett neu aufbauen müssen.

    Das table-Element ist ausschließlich für Tabellendaten gedacht, die in normalen Webseiten so gut wie nie vorkommen. Es ist also aktuell und zulässig, wird in der Praxis aber so gut wie nicht mehr benötigt. Echte Tabellendaten, für die das table-Element vorgesehen ist, gibt es eigentlich nur in Wissenschaft und Wirtschaft. Auch in deinem Fall sehe ich keine Tabellendaten.


    HTML stammt ja nicht aus der Programmierwelt, sondern wurde an einer Universität entwickelt, um Daten digital zwischen Universitäten / Wissenschaftlern austauschen zu können. Dabei ist das table-Element auch heute noch sinnvoll.


    Allerdings kannst du deine Seite aufbauen wie du willst. Also auch das table-Element falsch verwenden. Deine Entscheidung.


    Aber zu deinem Problem: Für deinen Wunsch sind HTML und CSS nicht gedacht. Um das p-Element außerhalb der Tabelle zu erstellen, aber die Position abhängig von der Tabelle zu bestimmen, benötigst du eine Programmiersprache wie JavaScript. Damit musst du dir dann ein passendes Programm schreiben. Da deine Anforderung sehr individuell ist wird es dafür bereits kaum passende Programme geben, die du dann einfach anpassen könntest.


    Du könntest noch versuchen die Tabelle und den Absatz in einen gemeinsamen Container (egal ob div, main, section, ...) zu packen und dadurch eine Abhängigkeit in der Darstellung zu erreichen. So weit ich verstanden zu haben glaube, liegen aber noch viele andere Element dazwischen. Das wird deshalb nur mit einer bestimmten Fenstergröße in einer bestimmten Schriftart und -größe funktionieren. Zudem dann auch nur auf deinem Rechner mit deinem Browser und deinen Einstellungen. Das erscheint mir eher unrealistisch.

    Ich sehe folgendes HTML:



    Eine komplette Seite mit minimalem Inhalt könnte folgendermaßen aussehen:


    Wenn du die rechte Spalte löscht und die mittlere verbreiterst ändert sich nichts am Hintergrundbild. Damit ändert sich auch nichts am durchsichtigen Effekt. Die mittlere Spalte reicht dann einfach in den Bereich, der durch die rechte Spalte belegt war.


    Wenn du ein starres Layout 2-spaltiges Layout mit einem Hintergrundbild erstellen willst musst du die Grafik mit einem geeigneten Programm neu erstellen und in das umgebende Element (aktuell: div id=wrapper) einfügen. Das Grafikprogramm muss durchsichtige png-Grafiken erstellen können, das können nicht alle.


    Zur Info: Solche starren Layouts sind veraltet und zum Erstellen von ernsthaften Webseiten nicht geeignet.