Beiträge von Sailor

    Oh je... da hast du wirklich ein echtes 'Schätzchen' ... über 600 Fehler alleine auf der Startseite ... siehe https://validator.w3.org/nu/?d…richis-lab.de%2Findex.htm.

    Das alles richtig machen wird sich nicht lohnen.... neu machen und dann gleich richtig mit aktuellem HTML und CSS ist da einfacher.

    Aber als kurzfristige Lösung könntest du folgendes versuchen:

    Kopiere folgenden Code in den <head>...</head> Bereich aller deiner Seiten:

    Code
    <meta name=viewport content="width=device-width, initial-scale=1">
    <style>
    img {
      width: 100%;
      max-width: 700px;
      height: auto;
    }
    </style>

    Und dann prüfe, ob es besser ist oder ob irgendwo Anzeigefehler auftauchen - wenn ja, wieder melden und genau angeben, wo das Problem ist.

    Dein Code ist fehlerhaft und unvollständig - bitte poste den gesamten Code von <form>... bis ... </form>.

    Und korrigiere deinen Code, so, wie er dort steht dürfte gar nichts funktionieren.

    Zeile 1. Schließende spitze Klammer ( > ) fehlt.

    Zeile 3. Fehlendes Leerzeichen hinter id="..." / das Styleattribut endet mit den Anführungszeichen hinter 97%... der ganze Rest findet nicht statt und erzeugt nur Fehler.

    Du könntest dir diese ganze rumexperimentieren ersparen ... und hättest schon längst eine funktionierende Lösung... wenn du uns einfach einen Link zu deiner Seite postest. Oder den gesamten Quellcode (HTML und CSS).

    Oder ist deine Seite so geheim?

    Das ist allerdings genau das, was du mit position: fixed; festlegst. Ein so formatiertes Element ist aus dem Textfluss raus und positioniert sich eben da, wo du es hinsetzt - überdeckt dabei alles, was sich sonst noch an dieser Stelle befindet.

    Alternativ könntest du es mit position: sticky; versuchen... https://www.w3schools.com/howto/howto_css_sticky_element.asp. Das funktioniert allerdings nicht im InternetExplorerer!

    Es wäre auch mit CSS Flexbox zu realisieren, wenn du ein umschließendes Element (zB <body>) als Flexcontainer festlegst und deine beiden Div's als Flexitems hineinpackst und entsprechend formatierst.

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Die schlechteste Möglichkeit.. weil nicht responsiv... wäre eine margin-top für den Container sec1

    Da du einen Link <a...> innerhalb einer Überschrift <h2> ansprechen willst, dann wäre der Selektor

    Code
    h2 a {...}

    passend.

    Der ändert dann aber auch die Formate für alle <a>'s innerhalb einer Überschrift <h2>.

    Wenn du was anderes brauchst/willst, dann musst du dem a oder dem der h2 eine Klasse geben, dann kann man gezielter ansprechen.

    Dein Stylesheet ist fehlerhaft:

    Die schließende geschweifte Klammer ( } ) am Ende der body-Formatierung fehlt.

    Des weiteren ist es üblich, im CSS die Kleinschreibung beizubehalten .. also color und nicht Color. Daran solltest du dich halten.


    Damit der Vorschlag von LoSti's World funktioniert, musst du zwischen dem a und dem h2 ein Leerzeichen setzen und den Punkt weglassen, denn

    a.h2 spricht einen Hyperlink (a) an, der eine Klasse h2 ( class="h2") hat. Ich denke, dass das bei dir nicht der Fall ist.

    Mit a h2  wird ein h2 Element innerhalb eines a Tags ( <a....><h2>..</h2></a> ) angesprochen.

    Das liegt daran, dass dein Browser das Format, welches nur für den Dateimanager auf Windows-Systemen gültig ist... also das mit den Back-Slashes (\) als Trenner, nicht kennt.

    Für gültige URL's in einem Webbrowser nutzt man das Slash (/)... und zusätzliche, wenn es sich um einen lokalen (absoluten) Link zu einer Datei auf deiner Festplatte handelt, muss du folgendes Format nutzen:

    file:///C:/Users/Damien/Desktop/Hintergrund.png

    Teste das mal und melde dich, wenn es nicht funktioniert.

    allerdings weiß ich nicht wie ich die Bildergallerie gruppieren kann bzw. wo ich das <div> tag einsetzen soll

    Damit dir hier jemand helfen kann, um diese Stelle zu finden - oder einen anderen Lösungsweg vorzuschlagen - müssten wir schon den gesamten Code (HTML und CSS) sehen. Am besten wäre ein Link zur Seite.

    Und wenn du schon Code hier einfügen musst, dann bitte mit der Einfügefunktion des Editors... das ist das </> Symbol oben in der Menüleiste (dritte von rechts).

    Ja... denn weiterhin erlaubt der HTML Standard keine <dl> innerhalb einer <dl>

    Mit CSS ist das aber kein Problem... selbst mehrere Eben der Einrückung wären machbar.

    Alles was du machen musst ist, deine zusammengängenden Listeneinträge (also die <dt> und <dd>) jeweils in eine eigene Definitionsliste zu stellen und dann mit CSS den dl's, die du weiter einrücken willst, zunächst eine Klasse (class) zu geben und dann in einem Stylesheet dieser Klasse einen beliebigen 'margin-left' zu geben.

    Das würde dann so aussehen:

    Die Definitionsliste <dl>...<dl> ist falsch aufgebaut und außerdem darf innerhalb eine Definitionsliste keine weitere Definitionsliste enthalten sein.

    Eine Definitionsliste erlaubt zwei Arten von Kindelementen <dt>...</dt>und <dd>...</dd> siehe hier...

    https://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/dl

    dann sollte dein Code so aussehen....

    Also entweder du hast es wieder in den alten Zustand (mit dem target="_blank") zurückversetzt oder du hast was falsch gemacht... so wie es jetzt ist, war es ja schon und hat ja nicht funktioniert.

    Aber für das, was du erreichen willst, ist JavaScript eindeutig nicht notwendig... das ist pures HTML!

    Ich weiß zwar nicht so genau, wo dein Problem liegt, aber ich gebe mal das zum Besten, was mir an deinem Setup auffällt und vielleicht besser gelöst werden könnte.

    1. du hast auf der 'Geschichten-Seite' deine Hyperlinks mit dem 'target="_blank" ausgezeichnet. Somit öffnet sich die Folgeseite in einem neuen Browsertab... also 'Geschichten' und die Folgeseite sind geöffnet. Wenn dann auf den Zurückpfeil geklickt wird, geht der Browser nicht zurück zur Ursprungsseite, sonder bleibt im gleichen Tab und du hast dann die Geschichten-Seite zweimal auf... und bei jeder weiteren Geschichte bekommst du noch einen zusätzlichen, geöffneten Tab.

    Um das zu verhindern, musst du entweder das target auf "_self" setzen... oder ganz weglassen.

    2. Die Rückkehr auf die Geschichten-Seite erfolgt immer so, dass die Seite in der oberen Position steht - also nicht zu der Position scrolled, von der die Unterseíte aufgerufen wurde. Wenn das dein Problem ist, dann schau mal hier.... https://de.wikipedia.org/wiki/Anker_(HTML)