Beiträge von MrMurphy

    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.

    Meiner Ansicht nach wirst du mit dem Template deine Vorstellungen nicht verwirklichen können.


    Zunächst beruht das Template noch auf XHTML. Das wurde bereits offiziell 2008 abgeschafft, also vor 13 Jahren.


    Viel schlimmer ist jedoch, dass sich das Template weder an die damaligen und schon gar nicht an die heuten HTML- und CSS-Regeln hält. Auch für eigentlich simple Änderungen muss deshalb der Quelltext großflächig bearbeitet und fast gänzlich neu erstellt werden. Mit Anpassungen hat der Aufwand nichts mehr zu tun.


    Das trifft auch auf die von dir gewünschten Änderungen zu. Wobei ich weder ein Suchfeld noch ein Live-Suchfeld erkenne.

    Die Navigation befindet sich im header. Um den Slider direkt über der Navigation und unter dem von dir vermuteten header einzubinden muss der HTML-Quelltext angepasst werden.


    Den Slider ganz an den Anfang der Seite zu stellen ist wiederum sehr einfach, dazu reichen zwei Zeilen CSS.


    Dem div mit der id "page" muss möglichst zum Schluß die CSS-Anweisung "display: grid;" hinzugefügt werden.


    Dem div mit der class "header-widget-region" muss auch möglichst zum Schluß die CSS-Anweisung "grid-row-start: 1;" hinzugefügt werden.

    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.

    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.