Bei Fixed Haeder die Ankerposition ändern – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Bei Fixed Haeder die Ankerposition ändern Sat, 01 Jun 19 19:59:51 Z https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1749768#m1749768 https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1749768#m1749768 <p>Bin seit einiger Zeit mit meiner HP mit Fixed Header beschäftigt. Mein Problem ist seit längerem schon wie kann ich die Ankerposition festlegen. Nun fand ich bei Google eine Lösung (siehe unten), aber es verändert mir die Anordnung vom Text. Zunächst mal die CSS Notierung wie ich sie übernommen habe:</p> <pre><code class="block language-css"><span class="token selector">.position::before</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>108px<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> -108px<span class="token punctuation">;</span> <span class="token property">visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Diese Notierung steht in meiner Layout Datei(.CSS) die mit dem Aufruf der Seite mit hoch geladen wird.</p> <p>Hier der Ausschnitt der Seite wie sie aus sehen soll wenn die Ankerpunkte richtig angesprungen wurden.</p> <p><a href="/images/0ebe39ef-3381-45fc-b235-cb884431d96a.gif" rel="noopener noreferrer"><img src="/images/0ebe39ef-3381-45fc-b235-cb884431d96a.gif?size=medium" alt="vor und nach der Änderung" title="Bild_1" loading="lazy"></a></p> <p>Hier das Beispiel der Notierung für eine Zeile, allerdings ohne die Verweispfeile und Texte wegen der Übersichtlichkeit und da in diesem Fall nicht relevant.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blu_ball<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_b6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list1b<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.bad-abbach.de/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Bad<span class="token entity named-entity" title="&nbsp;">&nbsp;</span>Abbach<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p>Und so sieht es aus bei der ersten Art der Positionierung.</p> <p><a href="/images/2844f998-01f5-49f0-97b7-f3718a02e5dd.gif" rel="noopener noreferrer"><img src="/images/2844f998-01f5-49f0-97b7-f3718a02e5dd.gif?size=medium" alt="erster Versuch" title="Bild_2" loading="lazy"></a></p> <p>Hier die erste Notierung der Positionierung zu oberen Bild.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blu_ball position<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_b6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list1b<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.bad-abbach.de/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Bad<span class="token entity named-entity" title="&nbsp;">&nbsp;</span>Abbach<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p>Durch diese Art der Notierung enstehen wie man sieht oberhalb der Einträge etwa zweimal so breite Zeilenabstände die keinen Sinn machen.</p> <p>Bei der zweiten Notierung entstehen ebenfalls im Grund genommen doppelt breite Leerzeilen, jedoch am linken Rand der zweiten Leerzeile bleibt der blaue Ball. Während der Text in seiner Zeile stehen bleibt. Hierzu das Bild:</p> <p><a href="/images/9a4dcc18-f43d-49e1-83ee-db0b58947f84.gif" rel="noopener noreferrer"><img src="/images/9a4dcc18-f43d-49e1-83ee-db0b58947f84.gif?size=medium" alt="Blauer Ball versetzt" title="Bild_3" loading="lazy"></a></p> <p>Dazu gehörende Notierung</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blu_ball<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_b6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list1b position<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.bad-abbach.de/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Bad<span class="token entity named-entity" title="&nbsp;">&nbsp;</span>Abbach<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p>Es gibt noch einige mehr Varianten an Notierungen die ich ausprobiert habe die aber nicht so nah an das gewünschte Endergebnis kamen wie die obigen.</p> <p>Wer kann mir hier helfen oder einen Tipp geben um zum finalen Erfolg zu kommen?</p> Bei Fixed Haeder die Ankerposition ändern Sat, 01 Jun 19 21:32:37 Z https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1749770#m1749770 https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1749770#m1749770 <p>Liebe(r) NoWissen,</p> <p>ich hätte da mal ne Gegenfrage.</p> <ol> <li>Warum müssen die <code><li></code>-Elemente ein <code><p></code> enthalten? Warum kannst Du Deine Inhalte nicht "einfach so" in das Listenelement schreiben?</li> <li>Warum zwingst Du den Browser mit einem geschützten Leerzeichen (<code class="language-html">Bad<span class="token entity named-entity" title="&nbsp;">&nbsp;</span>Abbach</code>) dazu, den Inhalt bei Bedarf trotzdem nicht umzubrechen? Ist die Seite nur für Dich und keinesfalls mit Touchgeräten und kleinen Bildschirmen zu benutzen?</li> <li>Benötigst Du wirklich alle diese Klassen, oder geht es auch rein mit der ID, welche das <code><ul></code>-Element hat?</li> </ol> <p>Vielleicht magst Du mal eine Beispielseite <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Charta_des_SELFHTML-Forums#Weblinks" rel="nofollow noopener noreferrer">verfügbar machen</a>, damit man sich das live und in Farbe anschauen kann?</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> Bei Fixed Haeder die Ankerposition ändern Sat, 01 Jun 19 22:02:13 Z https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1749771#m1749771 https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1749771#m1749771 <p>@@NoWissen</p> <p>Wenn ich dich richtig verstanden habe (was bei deiner Problembeschreibung nicht gerade einfach ist), geht es dir darum, dass bei einem feststehenden Header beim Anspringen eines seiteninternen Fragments (Ankers) dieses an die obere Bildschirmkante scrollt und dort durch den Header verdeckt wird, richtig?</p> <blockquote> <pre><code class="block bad language-css"><span class="token selector">.position::before</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>108px<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> -108px<span class="token punctuation">;</span> <span class="token property">visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Wo kommen die <code>108px</code> her? Das ist eine <em lang="en">magic number</em> und sowas ist keine gute Idee.</p> <p>Das Problem ist, dass du nicht wissen kannst, wie hoch der Header ist. Das ist abhängig davon, ob beim Nutzer alles in eine Zeile passt, vom beim Nutzer verwendeter Schriftart und -größe und und und …</p> <p>Man kann die Höhe des Headers mit JavaScript auslesen und beim Anspringen eines seiteninternen Fragments (Ankers) die Seite um diesen Wert (evtl. plus etwas mehr für oberen Abstand) nach unten verschieben, wie in <a href="https://codepen.io/gunnarbittersmann/pen/NYqmVp" rel="noopener noreferrer">diesem Pen</a> gemacht. (Denk dir die Grafik weg.)</p> <p>Ohne JavaScript darf der Header dann nicht fixiert sein.</p> <p>Eine andere Möglichkeit ist, nicht die gesamte Seite zu scrollen, sondern nur den Bereich unter dem Header, wie in <a href="https://codepen.io/gunnarbittersmann/pen/MdZqEN" rel="noopener noreferrer">jenem Pen</a> gemacht. Die Aufteilung des <code>body</code> in den feststehenden Header und den scrollbaren Bereich erfolgt dabei mit Flexbox oder Grid.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Bei Fixed Haeder die Ankerposition ändern Sun, 02 Jun 19 13:24:12 Z https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1749844#m1749844 https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1749844#m1749844 <p>@@Felix Riesterer</p> <ol> <li> <p>Da ich schon länger an der HP bastle kann ich nicht mehr sagen warum die <li>-Elemente da nicht alleine stehen. Die <p>-Elemente sind sicherlich durch das ständige Kopieren mit herein gerutscht. Und da sie keinen Einfluss hatten blieben sie stehen und wurden weiter kopiert. Auf Grund deines Hinweis könnte ich sie im Rahmen von sonstigen Änderungen mal heraus nehmen.</p> </li> <li> <p>Auch hier gilt ähnliches wie oben, irgend wann sind die geschützten Leerzeichen gebraucht worden und wurden dann weiter mitgeschleppt. Außerdem ist nicht beabsichtigt diese HP online zu stellen.</p> </li> <li> <p>Die Ausschnitte zeigen nur einen klitze kleinen Teil des Gesamten. In anderen Notierungen benötige ich nur einen Teil von den Klassen und in anderen Zusammenhängen. Mit der Vielzahl der Klassen bin ich auch flexibler, behalte aber trotzdem die Übersicht.</p> <p>Liebe Grüße</p> <p>NoWissen</p> </li> </ol> Bei Fixed Haeder die Ankerposition ändern Sun, 02 Jun 19 10:54:48 Z https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1749820#m1749820 https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1749820#m1749820 <p>@@Gunnar Bittersmann</p> <p>Ich hoffte durch die einzelne Beschreibungen und Bilder dass es etwas verständlich ist. Na ja.</p> <p>Zunächst handelt sich um ein Stichwortverzeichnis unter anderem mit URL's das ständig wächst. Das Verzeichnis ist als Offlineverzeichnis gedacht. Im übrigen hast du mein Problem richtig verstanden.</p> <p>Da ich die Notierung aus dem Netz kopiert habe, habe ich gleich mit den vorgegebenen Masseinheiten weiter experimentiert somit mit den Pixeln. Diese 108 Pixel ergeben in meinen Fall die ideale Position vom oberen Bildschirmrand, aber endgültig werde ich sicherlich mit Prozentwerten arbeiten. Aus den von dir genannten Gründen.</p> <p>Deine Vorschläge mögen für meinen Fall auch passen, aber auf Grund des fortgeschrittenen Projekts mit rund 1300 Dateien/Seiten (Anzahl ständig steigend) bei mir ein immenser Aufwand für die Anpassung. Ich möchte möglichst mit dem Vorhandenen weiter arbeiten können, sowohl mit dem feststehenden Header als auch mit der untendurch fahrenden Seite. Übrigens, diesen feststehenden Header habe ich in Einzelteilen aus dem alten SelfHTML Version 8.12 damals übernommen.</p> <p>Es geht mir eigentlich nur noch darum wie bekomme ich die doppelt breiten Leerzeilen weg bzw. den Versatz zwischen blauem Ball und Text damit diese eine Zeile bilden.</p> <p>Dir Gunnar trotzdem herzlichen Dank für deine Bemühungen</p> Bei Fixed Haeder die Ankerposition ändern Sun, 02 Jun 19 11:52:04 Z https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1749833#m1749833 https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1749833#m1749833 <p>@@NoWissen</p> <blockquote> <p>Da ich die Notierung aus dem Netz kopiert habe, habe ich gleich mit den vorgegebenen Masseinheiten weiter experimentiert somit mit den Pixeln. Diese 108 Pixel ergeben in meinen Fall die ideale Position vom oberen Bildschirmrand, aber endgültig werde ich sicherlich mit Prozentwerten arbeiten. Aus den von dir genannten Gründen.</p> </blockquote> <p>Die von mir genannten Gründe sprechen nicht für Prozentwerte, sondern für <em>gar keine Werte</em> – weder in Pixel noch in Prozent.</p> <p>Mit „in meinem Fall“ meinst du „auf <em>meinem</em> System“? Auf <em>deinem</em> System mögen die 108 Pixel richtig sein; auf Systemen <em>anderer</em> sind sie es nicht. Wie gesagt, welcher Wert auf einem System der richtige wäre, kannst du nur auf dem jeweiligen System ermitteln – mit JavaScript.</p> <blockquote> <p>Deine Vorschläge mögen für meinen Fall auch passen, aber auf Grund des fortgeschrittenen Projekts mit rund 1300 Dateien/Seiten (Anzahl ständig steigend) bei mir ein immenser Aufwand für die Anpassung.</p> </blockquote> <p>Die notwendigen Änderungen wären im JavaScript bzw. im Stylesheet, also an einer Stelle – egal, wieviele Seiten mit wievielen Dateien darauf zugreifen.</p> <blockquote> <p>Es geht mir eigentlich nur noch darum wie bekomme ich die doppelt breiten Leerzeilen weg bzw. den Versatz zwischen blauem Ball und Text damit diese eine Zeile bilden.</p> </blockquote> <p>Felix sagte ja schon, dass die <code>p</code>-Elemente in den <code>li</code> keinen Sinn machen.</p> <p>Ansonsten bitte einen Link zur problematischen Seite.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Bei Fixed Haeder die Ankerposition ändern Sun, 02 Jun 19 12:24:09 Z https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1749838#m1749838 https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1749838#m1749838 <p>Liebe(r) NoWissen,</p> <blockquote> <p>Zunächst handelt sich um ein Stichwortverzeichnis unter anderem mit URL's das ständig wächst.</p> </blockquote> <p>aha! Da lohnt es sich darüber Gedanken zu machen, wie man die reinen Daten in einer abstrahierten Form speichert (z.B. in einem XML-Dokument), um sie dann mit einer Programmlogik (serverseitig z.B. PHP, clientseitig JavaScript) visuell und nutzbar aufbereitet.</p> <blockquote> <p>Das Verzeichnis ist als Offlineverzeichnis gedacht.</p> </blockquote> <p>Also fällt serverseitige Programmlogik aus. Wir sprechen also nur noch von JavaScript. Da sehe ich noch genau zwei Dateien:</p> <ol> <li>HTML-Dokument mit JavaScript-Logik und Stylesheets</li> <li>XML-Dokument mit den eigentlichen Daten</li> </ol> <p>Was gepflegt wird, ist das XML-Dokument, denn dort werden neue oder korrigierte Daten eingetragen. Das HTML-Dokument ist nach seiner Erarbeitung im Grunde fix, weil es automatisiert die Inhalte der XML-Datei via JavaScript verarbeitet.</p> <blockquote> <p>Es geht mir eigentlich nur noch darum wie bekomme ich die doppelt breiten Leerzeilen weg bzw. den Versatz zwischen blauem Ball und Text damit diese eine Zeile bilden.</p> </blockquote> <p>Das sollte nun absolut Dein letztes Problem sein. <em><strong>Wie es aussieht</strong></em> kommt im Grunde erst dann, wenn klar ist, <em><strong>wie es funktioniert</strong></em>!</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> Bei Fixed Haeder die Ankerposition ändern Sun, 02 Jun 19 19:11:15 Z https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1749877#m1749877 https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1749877#m1749877 <p>Hallo NoWissen,</p> <blockquote> <p>Übrigens, diesen feststehenden Header habe ich in Einzelteilen aus dem alten SelfHTML Version 8.12 damals übernommen.</p> </blockquote> <p>Was möchtest Du uns mit deinem "Übrigens" mitteilen?</p> <p>Die Mirrors von SelfHTML 8.1.2, die mir bekannt sind, zeigen unter CSS Layouts eine fixed-Navigation links. Und sie warnen vor einer fixed-Navigation oben im Zusammenhang mit Seitenankern. Zu Zeiten, wo man noch Fallbacks für den IE6 gebaut hat.</p> <p>Wie auch immer. Hast Du 1300 Seiten mit position:fixed Navigation? Oder ein Stichwortverzeichnis für 1300 Seiten?</p> <p>Ich nehme an, letzteres. Wir reden also von einer Seite mit 26 Ankern. Das sollte machbar sein.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Bei Fixed Haeder die Ankerposition ändern Mon, 10 Jun 19 14:14:46 Z https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1750158#m1750158 https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1750158#m1750158 <p>@@Gunar Bittersmann</p> <p>nachdem ich gründlich mit p Elementen und die geschützten Leerzeichen aufgeräumt habe, hab ich mich mal mit deinem Vorschlag mit JavaScript die Höhe des Haeders auszulesen beschäftigt. Nur bin ich nicht klar ob diese Vorgehensweise bei meinen Seitenaufbau funktioniert ohne doch bei jeder meiner Seiten das Java nachladen zu müssen oder gar auf jeder Seite zu installieren.</p> <p>Dazu folgendes: Bei diesem Header wie ich ihn mir mit Hilfe vom alten Self HTML zusammen konstruiert habe wird dieser bei jedem Auruf einer HTML Seite immer wieder neu nachgeladen. Und zwar werden jeweils nur der Rahmen und die Bottoms nachgeladen, nicht aber der Text (A,B,C,..), dieser ist in jeder HTML Seite hinterlegt. Ein erneuter Seitenaufruf entsteht ob ich auf der aktuellen Seite einen Anker anspringe oder auf einer ganz anderen Seite? Soweit mein Verständnis reicht (deshalb auch NoWissen) heißt das, dass erst nach dem erneuten laden des Headers die Lage/Höhe des selben festgestellt werden kann. Damit dann die Daten des JavaScripts erst geladen werden müssten. Weiter heißt das, damit müsste ich bei allen Dateien einen entsprechenden Link setzen zum JavaScript, wie bei den CSS Dateien oder gleich auf der jeweiligen Seite mit eintragen. Oder sehe ich das falsch?</p> <p>Da es eine reine Offline HP ist kann ich keinen Link geben. Deshalb zeige ich hier Teile von einer meiner Seiten und die dazu gehörenden CSS Dateien mit um zu zeigen wie ich notiert habe.</p> <p>Hier zuerst eine Seite der HP im Ausschnitt</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">HTML</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Bayern<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>generator<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Ulli Meybohms HTML EDITOR<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DC.language<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../CSS/layout.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../CSS/Menue.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>titel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Bayern<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>floating-menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rahmen<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Navigation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_a.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>A<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_b.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>B<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_c.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>C<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_d.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>D<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_e.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>E<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_f.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>F<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_g.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>G<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_h.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>H<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_i.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_j.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>J<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_k.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>K<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_l.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>L<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_m.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>M<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_n.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>N<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_o.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>O<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_p.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>P<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_q.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Q<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_r.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>R<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_s.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>S<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_t.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>T<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_u.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>U<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_v.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>V<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_w.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>W<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_x.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>X<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_y.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Y<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_z.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Z<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token comment"><!-- Ende Navigation und Seitenkopf --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>150px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blu_ball<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DE-BY_b3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list1b<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Gemeinde<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.baar-ebenhausen.de/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Baar Ebenhausen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> . . . usw. mit Einträgen . . . <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>als nächstes die CSS Datei (Menue.css) mit dem Haeder. Diese habe ich wie gesagt aus dem SefHTML 8.1.2 übernommen und für mich angepasst. Da schon einige Zeit darüber gegangen dürfte auch so der eine oder andere symantische Fehler darin sein bzw. man könnte/würde einiges aderst notieren.</p> <pre><code class="block language-css"><span class="token selector">div.floating-menu</span> <span class="token punctuation">{</span><span class="token property">position</span><span class="token punctuation">:</span>fixed<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #C6D6E6<span class="token punctuation">;</span><span class="token property">border</span><span class="token punctuation">:</span>0px solid #ffcc00<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>1600px<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span>100000000000<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">div.floating-menu a</span> <span class="token punctuation">{</span><span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span>0.5em<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">a:link</span> <span class="token punctuation">{</span><span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">font</span><span class="token punctuation">:</span> normal 72.01% Helvetica<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #C6D6E6<span class="token punctuation">;</span>0 <span class="token punctuation">}</span> <span class="token selector">div#Rahmen</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 119.1em<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0.8em<span class="token punctuation">;</span> <span class="token comment">/*border: 0px solid #C6D6E6;*/</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #C6D6E6<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">* html div#Rahmen</span> <span class="token punctuation">{</span> <span class="token comment">/* Korrektur fuer IE 5.x */</span> <span class="token property">width</span><span class="token punctuation">:</span> 48.7em<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 47.1em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">div#Rahmen div</span> <span class="token punctuation">{</span> <span class="token property">clear</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">ul#Navigation</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">ul#Navigation li</span> <span class="token punctuation">{</span> <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token comment">/* ohne width&#45;nach CSS 2.1 erlaubt */</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0.4em<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">* html ul#Navigation li</span> <span class="token punctuation">{</span> <span class="token comment">/* Korrektur fuer den IE 5 und 6 */</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> -0.4em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">*:first-child+html ul#Navigation li</span> <span class="token punctuation">{</span> <span class="token comment">/* Korrektur fuer den IE 7 */</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> -0.1em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">ul#Navigation li ul</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 1.0em<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> -0.4em<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token comment">/* Unternavigation ausblenden */</span> <span class="token punctuation">}</span> <span class="token selector">* html ul#Navigation li ul</span> <span class="token punctuation">{</span> <span class="token comment">/* Korrektur fuer IE 5.x */</span> <span class="token property">left</span><span class="token punctuation">:</span> -1.5em<span class="token punctuation">;</span> lef\<span class="token property">t</span><span class="token punctuation">:</span> -0.4em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">*:first-child+html ul#Navigation ul</span> <span class="token punctuation">{</span> <span class="token comment">/* Workaround fuer den IE 7 */</span> <span class="token property">background-color</span><span class="token punctuation">:</span>silver<span class="token punctuation">;</span> <span class="token property">padding-bottom</span><span class="token punctuation">:</span>0.4em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">ul#Navigation li:hover ul</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token comment">/* Unternavigation in modernen Browsern einblenden */</span> <span class="token punctuation">}</span> <span class="token selector">ul#Navigation li ul li</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 0.2em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">ul#Navigation a, ul#Navigation span</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 1.1em<span class="token punctuation">;</span> <span class="token comment">/* Breite den in li enthaltenen Elementen zuweisen */</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0.1em 1em<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> <span class="token property">border-left-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">border-top-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> maroon<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #C6D6E6<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">* html ul#Navigation a, * html ul#Navigation span</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 8.6em<span class="token punctuation">;</span> <span class="token comment">/* Breite nach altem MS-Boxmodell für IE 5.x */</span> w\<span class="token property">idth</span><span class="token punctuation">:</span> 6.4em<span class="token punctuation">;</span> <span class="token comment">/* korrekte Breite fuer den IE 6 im standardkonformen Modus */</span> <span class="token punctuation">}</span> <span class="token selector">ul#Navigation a:hover, ul#Navigation span, li a#aktuell</span> <span class="token punctuation">{</span> <span class="token property">border-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">border-left-color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">border-top-color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> gray<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">li a#aktuell</span> <span class="token punctuation">{</span> <span class="token comment">/* aktuelle Rubrik kennzeichnen */</span> <span class="token property">color</span><span class="token punctuation">:</span> maroon<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> silver<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">ul#Navigation li ul span</span> <span class="token punctuation">{</span> <span class="token comment">/* aktuelle Unterseite kennzeichnen */</span> <span class="token property">background-color</span><span class="token punctuation">:</span> maroon<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Dann hier noch ein kleiner Ausschnitt aus der Datei für das Layout in CSS (layout.css)</p> <pre><code class="block language-css"> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#C6D6E6<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a:link</span> <span class="token punctuation">{</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#E00000<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a:visited</span> <span class="token punctuation">{</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#800000<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a:hover</span> <span class="token punctuation">{</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#FFFF00<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a:active</span> <span class="token punctuation">{</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span>bold<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#CCFFFF<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.blu_ball</span> <span class="token punctuation">{</span> <span class="token property">list-style-image</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'../gif/balls/b_blue.gif'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.list1b</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.6em<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.titel</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 2.1em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Ich hoffe dass man damit eine Seite rekonstruieren kann und die Funktion erkennen. Eine Komplette Seite einschließlich Kompletter Steuerungsdateien hat das Forumfenster aus Platzgründen nicht zugelassen.</p> Bei Fixed Haeder die Ankerposition ändern Mon, 10 Jun 19 14:28:59 Z https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1750159#m1750159 https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1750159#m1750159 <p>Hallo Felix,</p> <p>nach den ganzen Aufräumarbeiten möchte ich auch dir Antworten.</p> <p>Lieben Dank für deinen Vorschlag für den anderen Aufbau meiner HP. Aber das Projekt hat jetzt doch einen ganz beträchtlichen Umfang angenommen und deshalb möchte ich mich nicht nochmal in neue Überlegungen zum Aufbau stürzen.</p> <p>Gruß</p> <p>NoWissen</p> Bei Fixed Haeder die Ankerposition ändern Mon, 10 Jun 19 15:08:14 Z https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1750160#m1750160 https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1750160#m1750160 <p>Hallo Rolf,</p> <p>der Verlauf bezüglich von Haedern bei SelfHTML 8.1.2 war wie ich mich noch erinnere folgender: Zunächst wurden Haeder inHTML und ohne fixed sowohl in horizontaler wie vertikale Auflistung entwickelt und gezeigt. Dazu gab es verschiedene Zusatzfunktionen und dann wurde erst übergeleitet zu CSS basierten Haedern. Die horizontale Anordnung wurde dabei genauso gezeigt wie die vertikale.</p> <p>Dann zu den Seiten. Ich habe jetzt knapp 1300 Seiten mit dem jeweiligen Texten und je nach Inhalt bis ca. 300 Ankerpunkten. Der Haeder wird auf jeder aufgerufenen Seite erneut aus CSS Datei neu geladen. Dabei wird nur das blanke äußere geladen ohne Textinhalt für die Buttons und ohne die Verlinkung zu der gewünschten Seite. Diese Daten stehen auf der jeweiligen Seite (siehe auch den Quelltext in meiner Antwort von heute an Gunar Bittermann). Das heißt knapp 1300 Seiten mit einem Haeder ohne textlichen Inhalt für alle Seiten. Beim Check der Links über alles ergeben sich derzeit rund 14300 Links, davon etwa 9800 interne Anker.</p> <p>Also keine so einfache Sache. Deshalb lege ich auch so großen Wert darauf nicht all zuviel zu ändern am Bestand.</p> <p>Gruß NoWissen</p> Bei Fixed Haeder die Ankerposition ändern Mon, 10 Jun 19 15:42:31 Z https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1750163#m1750163 https://forum.selfhtml.org/self/2019/jun/1/bei-fixed-haeder-die-ankerposition-aendern/1750163#m1750163 <p>Hallo NoWissen,</p> <blockquote> <p>Da es eine reine Offline HP ist kann ich keinen Link geben.</p> </blockquote> <blockquote> <p>Ich hoffe dass man damit eine Seite rekonstruieren kann und die Funktion erkennen.</p> </blockquote> <p><a href="https://bplaced.net" rel="nofollow noopener noreferrer">https://bplaced.net</a> erlaubt das kostenfreie Hochladen. Die Seite kannst du dann auch wieder löschen.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys.<br> ¯\_(ツ)_/¯ </div>