Beiträge von Sailor

Sailor

Oh je... da hast du wirklich ein echtes 'Schätzchen' ... über 600 Fehler alleine auf der Startseite ... siehe https://validator.w3.org/nu/?doc=https%….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.

Sailor

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.

Sailor

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?

Sailor

Nein, eigentlich nicht.

Mach mal folgendes in dein CSS:

Code

* {
   box-sizing: border-box;
}
html, body {
   margin: 0;
   padding: 0;
}

Wen es dann nicht besser ist, dann brauchen wir deinen Quellcode (HTML und CSS) oder besser noch einen Link zur Seite.

Sailor

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

Sailor

Versuche mal ...

Code

dt:target {
   color: #f00;
}

Sailor

Schau dir mal Flexbox an https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - das sollte auch mit WordPress funktionieren.

Sailor

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.

Sailor

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.

Sailor

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.

Sailor

Zitat von Mr.Crack

Da bin ich mir nicht sicher ob ich den gesamten Code hier veröffentlichen möchte

Erstellst du eine Website oder ein Geheimdokument? Wenn du sie nicht öffentlich machen willst, dann darfst/kannst du sie später auch nicht ins Netz stellen... könnte ja sonst jemand deinen Code sehen .

Sailor

Zitat von Mr.Crack

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).

Sailor

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:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Ver. 2</title>
    <style>
      .level_2 {
         margin-left: 2em;
         }
    </style>
</head>
<body bgcolor=B5C0E8 text=black>
<h1 align=center>Version 2: 2 Einrückungen mit falscher Syntax</h1>
<dl>
        <dt><h2><a name="Kapitel1">Kapitel 1</a></h2></dt>
</dl>
<dl class="level_2">
        <dt><h3><a name="Abschnitt1">Abschnitt 1</a></h3></dt>
            <dd><a href="https://link_11.de">Link-11</a></dd>
            <dd><a href="https://link_12.de">Link-12</a></dd>
            <dd><a href="https://link_13.de">Link-13</a></dd>
</dl>
<dl class="level_2">
        <dt><h3><a name="Abschnitt2">Abschnitt 2</a></h3></dt>
            <dd><a href="https://link_21.de">Link-21</a></dd>
            <dd><a href="https://link_22.de">Link-22</a></dd>
            <dd><a href="https://link_23.de">Link-23</a></dd>
</dl>
</body>
</html>

Alles anzeigen

Sailor

Zitat von Hubertus

... obwohl ich schon 66 bin.

Na und? Da hast du nur einen unbedeutenden Vorsprung . Gerade deswegen, dem Jungvolk zeigen, wo es längs geht.

Sailor

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....

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Internet-Portal</title>
</head>
<body bgcolor=B5C0E8 text=black>
<h1 align=center>Internet-Portal</h1>
<dl>
    <dt><a name="Favoriten">Favoriten</a></dt>
        <dd><a href="https://de.wikipedia.org">Wikipedia</a></dd>
        <dd><a href="https://de.was_anderes.com">Was anderes</a></dd>
        <dd><a href="https://de.hier_auch.de">hier auch</a></dd>
<!-- Hier etliche genauso aufgebaute Zeilen mit weiteren Links -->
</dl>
</body>
</html>

Dann klappt das ach mit den Abständen - ansonsten kann man mit etwas CSS nachhelfen.

Alles anzeigen

Sailor

... ach... da fällt mir gerade auf! Lass doch bitte bitte mal deine Seite durch den w3.org Validator laufen...

https://validator.w3.org/check?uri=http…=Inline&group=0

Da sind einige Fehler drin, die zwar nichts mit dem Fehlverhalten zu tun haben, das du beseitigen willst, aber die doch ganz erheblichen Einfluss auf die Darstellung deiner Seite haben können.

Sailor

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!

Sailor

Zitat von Hubertus

Ich habe alle möglichen Einstellungen probiert, aber der Effekt ist immer noch der selbe.

Was hast du probiert... und was ist immer noch das Selbe... und wie solle es sein, wenn es so, wie es ist, nicht richtig ist?

Sailor

Doppelpost https://www.html.de/threads/proble…06/#post-400243

Sailor

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)

Beiträge von Sailor

Primitive Seite -> mobile Darstellung

Fortfahren trotz required?

bereits festgelegte Schriftfarbe ändern

DIV Positionierung mit fixed und relative

DIV Positionierung mit fixed und relative

Farbliche hervorhebung von Textten bei a href

Mediathek erstellen

bereits festgelegte Schriftfarbe ändern

bereits festgelegte Schriftfarbe ändern

(Laie) Suche möglichkeit, Hintergrundbild hinzuzufügen in HTML

Bildergalerie mit Abstand zur linken Seite ohne Spalten zu beeinflussen

Bildergalerie mit Abstand zur linken Seite ohne Spalten zu beeinflussen

Text einrücken

HTML5 Fenster schliessen und zu Menü zurück

Text einrücken

HTML5 Fenster schliessen und zu Menü zurück

HTML5 Fenster schliessen und zu Menü zurück

HTML5 Fenster schliessen und zu Menü zurück

Problem beim Erstellen eines Footers mit Copyright, Impressum und Datenschutz

HTML5 Fenster schliessen und zu Menü zurück