Beiträge von Sailor

Also wenn ich das richtig sehe, hast du in irgendeiner (inline) css Anweisung für die Klasse '.hidden {display: none;}' definiert - sieht zunächst mal logisch aus ... hidden ist hidden.
Aber dein mobiles Menü (zumindest das Hamburger Icon) ist mit der Klasse 'hidden' ausgzeichnet... also wird das dann nicht angezeigt!
Bei meinem Test (FF Webentwickler Tools) wird alles gut, wenn du in deinem 'zusätzlichen CSS' (vom Dashboard -> Design -> Customizer - >zusätzliches CSS) folgenden Code eingibst.

.navigation-inner.section-inner .hidden {
  display: block;
}

Bitte lass die Finger von den CSS Dateien, die zum Theme gehören - und wenn die Änderung funktioniert, bitte auf unerwünschte Nebenwirkungen prüfen.

Nachtrag: Deaktiviere bitte, wenn du noch weitere Fragen und Probleme hast, dein Optimierungs-PlugIn... sonst sucht man sich einen Wolf in deinen 6 Zeilen Quellcode!

Zitat

...sodass die Seite immer richtig angezeigt wird

Könntest du das etwas näher erläutern? Was denkst du, was da passieren soll mit deiner Seite? Alleine das Einfügen der 'meta viewport - Zeile' macht nichts, von dem, was du erwartest.
Um die Darstellung für mobile Geräte einzurichten, solltest du im CSS auf feste Größenangaben verzichten und ggf. mit @media Queries die Anzeige so einrichten, dass es für alle Displaygrößen passt.

Habe gerade meinen alten XP Rechner nochmal aus der Ecke gekramt... auf dem läuft FireFox Extended Support Release (ESR) in der Version 52.0.9! Und Youtube Videos werden problemlos abgespielt.
Versuche doch mal diese ESR Version im Netz zu finden und zu installieren.

Es gibt auch noch eine Version 60 vom FireFox ESR... könntest du auch mal testen, ob du die installiert bekommst.
https://www.mozilla.org/en-US/firefox/…rman,%20Deutsch

https://caniuse.com/#feat=mpeg4

Nun ja... ungewollt kann man so nicht sagen ;)!
Die Menüpunkte <a...> sind formatiert mit 'display: block;' ... so formatierte Elemente ordnen sich in der Regel untereinander an mach dies Formatierung weg, dann ist schon ein Problem gelöst.
Dann ist dein div.nav-box mit 'float: left;' formatiert... etwas unglücklich, denn dann 'stapelt' sich deine Sprachauswahl rechts davon, weil 'float' eben zum Umfließen führt.
Mach also das Float auch weg, dann sieht das schon anders aus... ok, noch nicht das, was du dir vorstellst... aber mach uns mal eine Skizze vom angestrebten Layout, dann kann man auch gezielter helfen.

Nachtrag:
Die Änderungen solltest du in eine @media Query packen, damit sie nur bei größeren Displays wirksam sind, es soll ja bei zB SmartPhones bestimmt in dieser 'untereinander'-Anordnung bleiben.

:)... viel Erfolg! Und sollte es wieder haken, einfach wieder melden - hier ist immer jemand der dir gerne weiter hilft.

... hmm... vh steht für viewport height .... also 100vh ist die Höhe des sichtbaren Bildschirmes.

Also dann sehe ich ein weiteres Problem in deinem CSS für die Klasse .container!

Lösche da mal die height: 100vh;
Das scheint das Layout irgendwie zu stauchen!

Ich sehe noch keine Änderung an der Seite - kann also nicht schauen, warum sich da weiterhin die Container überlappen.

Was mir als Erstes auffällt, ist deine etwas ungeschickte Konfiguration des 'Headers'.. da hast du so was stehen:

<a class="banner-homelink" href="index.php"><header></header></a>

und dem <header> gibst du ein Hintergrundbild ... dem <a> eine feste Höhe. Ich denke, das ist Teil deines Problems.
Versuche doch mal, ob du durch eine andere Anordnung der Element und einfügen des Bildes als Bild (nicht als Hintergrund) eine Verbesserung erzielen kannst.

<header><a class="banner-homelink" href="index.php"><img src="hier.dein.Bild.jpg" alt=""></a></header>

Im CSS muss dann die Höhe für a weg.
Für den header das Hintergrundbild weg... im header dann 'text-align: center;' notieren.
und für das Bild... 'header .banner-homelink img {width: 100%; max-width: 488px;}

Da ich das nicht 'live' testen kann, musst du es einfach mal versuchen.. mehr als schief gehen kann es nicht.

Nein, CSS gehört nicht in den <header>!!! Der <header>... </header> ist ein HTML5 Element, das dessen Inhalt als Kopfteil deiner sichtbaren Webseite ausweist.
CSS gehört in den <head>...</head> Bereich deiner Seite. Und zwar wird in diesem Bereich ein mittels <style>...</style> ein Bereich eingefügt, der alle deine CSS-Formatierungen beinhaltet.

<!DOCTYPE html>
<html lang="de">
<head>


    <!--  Hier kommen noch alle weiteren Kopfdaten hin, die du für deine Seite brauchst-->  


<style>


    /*  Hier kommen alle deine Formatierungen für die aktuelle Seite hin  */


</style>
</head>


<body>


<header><!--  Hier der 'Header' (Kopfteil) deiner Seite     --></header>


<!-- ...und hier der ganze Rest deiner Seite  -->  


</body>
</html>

Allerdings ist dieses Setup nur gut, wenn du dein CSS nur für diese eine Seite benutzen willst. Besser wäre es, das CSS in eine separate Datei (meine_formate.css) auszulagern und dann ebenfalls im <head>... </head> mittels...

<link rel="stylesheet" type="text/css" href="meine_formate.css">

einzubinden.
Dann kannst du dein CSS auf mehreren Seiten verwenden und hast immer (nur) eine zentrale Stelle, um Änderungen durchzuführen.
CSS hat den Vorteil (im Gegensatz zu JavaScript), dass ein Besucher es nicht so ohne weiteres Abschalten kann - JavaScript hingegen lässt sich mit einem Klick deaktivieren.
Außerdem (meiner Meinung nach) sollte man alles, was man ohne zusätzliche Mittel wie zB JavaScript, irgendwelche zusätzlichen Frameworks und Libaries, nur mit den nativen Möglichkeiten von HTML und CSS erledigen kann, auch nur mit HTML und CSS erledigen.
Nachteil von CSS, gerade, wenn es um im CSS3 neu eingeführte Formatierungen geht, nicht alle älteren Browser unterstützen CSS3 zu 100%. Das kann man aber im Einzelfall prüfen auf https://caniuse.com/
Im vorliegenden Fall mit 'user-select' würde das so aussehen:
https://caniuse.com/#feat=user-select-none
Natürlich kannst du auch JS nutzen... niemand hindert daran... deine Seite, dein Code. Solange du damit zufrieden bist und der von dir produzierte Code valide ist... wähle einfach die für dich am besten passende Methode aus und mach einfach

Als Erstes solltest du deinen Code gemäß dem gültigen HTML Standard erstellen - das heißt:
Das Dokument beginnt mit dem Doctype... also <!DOCTYPE html> in die erste Zeile.
Dann folgt der Rest vom Grundgerüst:

<html lang="de">
<head>


</head>


<body>


</body>
</html>

In den <head>... </head> Bereich kommen alle deine Kopfangaben für das Dokument - inklusive eines <style>...</style> Bereiches, in dem du alle Formatierungen für die Elemente im 'body' einfügst.
Das Erste, was du da reinschreibst ist:

body {
   background-image: url("main-background.jpg");
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
}
main {
   width: 90%;
   max-width: 960px;
   margin: 10px auto;
   padding: 20px;
   background-color: #ffffff;
}

Jetzt musst du diesen <main> Container in deinen Code einfügen.
direkt hinter dem <body> schreibst du <main>
und direkt vor dem </body> schreibst du </main>

Dann kannst du nach und nach alle Formatierungen, die du jetzt als inline-style hast nach oben in den <style>...</style> übertragen.
also...

a {
   color: #2a0a29;
}
a:hover {


}


.img150 {
   float: left;
   margin-left: 5px;
   height: 293px;
}


p {
   text-align: justify;
   color: #000000;
   font-size: 1.3em;
}


h1 {
   text-align: center;
   color: #000000;
}

Die inline-styles, die du nach oben gebracht hast, musst du natürlich im Code dann löschen.

Der Rest sollte dann nur noch 'spielen mit den Werten sein!

- - - Aktualisiert - - -

Edit... alle html Tags sollten mit kleinen Buchstaben geschrieben sein!
Also <html> statt <HTML>

und dieser <FONT...></FONT> solltest du ersatzlos löschen - dafür hast du dein CSS.

Nicht den Mut verlieren... basti1012 hat zwar Recht, aber das kann man alles fixen!
ABER!!! Bevor du dir diese Mühe machst, solltest du zunächst prüfen, ob (wenn dein Teil in die Schulseite integriert werden soll) dieses überhaupt so möglich ist?
Die Schulseite nutzt ein Conten Management System (CMS) ... hier Joomla... und das ist normalerweise sehr störrisch und lässt solche Aktionen, wie einbinden einer 'fremden' Seite kaum zu.
Wenn du deine Seite separat von der Schulseite erstellen willst, dann mach das, was basti1012 dir geraten hat - erkläre uns, wie das aussehen soll.
Bisher hast du da nur eine Überschrift und ein paar Textabschnitte drin... soll das alles sein?

Die Elemente 'language' und 'content' gibt es nicht im HTML (und meines Wissens auch in keinem anderen HTML Standard).
Mache daraus jeweils ein <div class="language">...</div> bzw ein <div class="content">...</div> und spreche die Elemente dann im CSS mit .language und .content an.
Dein <header></header> ist im Code ein Kindelement von einem <a....>...</a>! Damit richtet sich die Header-Höhe nach der Höhe des Elternelements!
Gib dem <a...> die Höhe, die du für dein Layout brauchst und der Header (in dem <a..>) wird sich entsprechend (mit height: 100%;) dem anpassen.
Wenn es noch mehr Probleme und Fragen gibt, einfach melden.... hier wirst du geholfen!

Du solltest als Erstes die Fehler beseitigen, die in deinem Dokument vorhanden sind!
Siehe w3c Validator
https://validator.w3.org/check?uri=http…=Inline&group=0
... und dich dann daran begeben, das, was an Problemen übrig bleibt, zu beheben.

Warum versuchst du es nicht mit CSS?
https://css-tricks.com/almanac/properties/u/user-select/

Das wird nichts nützen.... ich denke nicht, dass sich jemand die Mühe machen wird für dich ein > 1400 Wörter style.css durchzuackern!
Ist ja aber auch nicht nötig, befasse dich etwas mit den Grundlagen (PHP, HTML, CSS) und beschäftige dich etwas mit den DevTools (Entwicklerwerkzeuge, die jeder Browser von Haus aus eingebaut hat), dann wirst du sehr schnell solche Probleme selber lösen können!
Zumal ich dir die Antwort in Beitrag #3 schon gegeben habe! 2 Zeilen CSS Code in das 'zusätzliche CSS' im Customizer (vom Dashboard -> Design -> Customizer -> zusätzliches CSS) ... und dein Problem wäre behoben.
Und in dem ebenfalls in #3 angehängtem Tutorial-Video wird dir auch visuell gezeigt, wie man solche Änderungen im 'zusätzlichen CSS' durchführen kann.
Jetzt versuche es erst mal auf diesem Weg und wenn es da Probleme gibt, dann liefere mehr Informationen als...

Zitat

...ich habe versucht mit dem von dir verlinkten youtube video weiter zu kommen, aber wegen dem Trennen von Balken und Bild hatte ich dann meine Probleme.

sonst ist es mit helfen sehr schwierig... hellsehen können wir alle nicht!

- - - Aktualisiert - - -

@Bandit ... Danke... wenigstens einer versteht mich :-D!

craftsmen22 - hast du meinen Beitrag #3 gelesen und den Vorschlag zur Behebung der Überlappung mal ausprobiert?
Was ist dabei rausgekommen?

Mit einer lokalen WordPress Installation ist das mit dem Link zur Seite nicht so einfach... aber es gibt zu dem WP-Theme eine Demo im Netz:
https://demo.themegrill.com/radiate/
craftsmen22
Leider kann ich mit deiner Problembeschreibung nicht wirklich was anfangen... du willst den 'Balken(?)', also deine Navigation weg haben oder weniger 'fett' machen? Wie soll das dann aussehen?
Zu der Überlagerung von Bild und Menüleiste könntest du versuchen dem <div...> mit dem Bild ein margin-top zu geben so dass das Bild um die Höhe des Menübalkens weiter nach unten rutscht!
zB.

#parallax-bg {
   margin-top: 60px;
}

Die 60px musst du natürlich noch an die tatsächliche Höhe deines Balkens anpassen.
Und das Ganze bitte in das 'zusätzliche CSS' im Customizer eintragen - wenn du nicht weißt, wie das geht dann hier mal ein kleines Video(Tutorial)
https://www.youtube.com/watch?v=KJpZT5IkOpc

zu 1
https://www.traens.com/tipps/microsof…en-einfach.html
zu 2
https://support.office.com/de-de/article/…b5-1d8552ccf0c0

Was ist dein Problem? .. der kleine Spalt zwischen dem Bild und der unteren Border?

Dann setze mal in deinem CSS für die Bilder 'img' das 'vertical-align: bottom;'

Per Default ist dieser auf 'baseline' gesetzt... aber 'baseline' ist eben nicht unten und das führt zu ein paar Pixeln Abstand zum 'bottom' des Elements.