Beiträge von MrMurphy

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.

Verzichte auf position-Angaben.

Verwende stattdessen CSS-Grid (display: grid;)

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.

Dafür ist float weder gedacht noch geeignet. Ich würde CSS-Grid (display: grid;) benutzen.

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.

Ich habe mal ein Online-Beispiel mit einem 3stufigen responsiven Design erstellt:

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

Auf den grünen Run-Button klicken. Die Fensterbreite kann durch Verschieben des Mittelstegs geändert werden.

Beschäftige dich mit CSS-Grid (display: grid;) und Media Queries. Viel mehr läßt sich mit deinen bisherigen Angaben kaum anfangen.

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

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

Das muss so um Zeile 175 herum sein.

Dort fügst du zwei Einträge hinzu:

.content li {
   margin-left:  3em;
   display: flex;
   gap: 15px;
}

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.

Erst mal sind div so weit wie möglich zu vermeiden.

Und dann ist Flexbox nicht nur auf div anwendbar. Kommst du jetzt drauf?

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.

Wo umfließt dort Text ein Bild? Da hat float nichts zu suchen.

Heißer Tip: Flexbox oder CSS-Grid.