Bei Fixed Haeder die Ankerposition ändern

[NoWissen]

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:

.position::before {
   display: block;
   content: "";
   height:108px;
   margin-top: -108px;
   visibility: hidden;
   }

Diese Notierung steht in meiner Layout Datei(.CSS) die mit dem Aufruf der Seite mit hoch geladen wird.

Hier der Ausschnitt der Seite wie sie aus sehen soll wenn die Ankerpunkte richtig angesprungen wurden.

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.

<ul class="blu_ball" id="DE-BY_b6">
<li>
    <p>
       <a class="list1b" href="http://www.bad-abbach.de/" target="_blank">Bad&nbsp;Abbach</a>
    </p>
        </li>
</ul>

Und so sieht es aus bei der ersten Art der Positionierung.

Hier die erste Notierung der Positionierung zu oberen Bild.

<ul class="blu_ball  position" id="DE-BY_b6">
<li>
    <p>
       <a class="list1b" href="http://www.bad-abbach.de/" target="_blank">Bad&nbsp;Abbach</a>
    </p>
        </li>
</ul>

Durch diese Art der Notierung enstehen wie man sieht oberhalb der Einträge etwa zweimal so breite Zeilenabstände die keinen Sinn machen.

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:

Dazu gehörende Notierung

<ul class="blu_ball" id="DE-BY_b6">
<li>
    <p>
       <a class="list1b  position" href="http://www.bad-abbach.de/" target="_blank">Bad&nbsp;Abbach</a>
    </p>
        </li>
</ul>

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.

Wer kann mir hier helfen oder einen Tipp geben um zum finalen Erfolg zu kommen?

[Felix Riesterer]

Liebe(r) NoWissen,

ich hätte da mal ne Gegenfrage.

1. Warum müssen die <li>-Elemente ein <p> enthalten? Warum kannst Du Deine Inhalte nicht "einfach so" in das Listenelement schreiben?
2. Warum zwingst Du den Browser mit einem geschützten Leerzeichen (Bad Abbach) 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?
3. Benötigst Du wirklich alle diese Klassen, oder geht es auch rein mit der ID, welche das <ul>-Element hat?

Vielleicht magst Du mal eine Beispielseite verfügbar machen, damit man sich das live und in Farbe anschauen kann?

Liebe Grüße

Felix Riesterer

[NoWissen]

@@Felix Riesterer

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

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

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

   Liebe Grüße

   NoWissen

[Gunnar Bittersmann]

@@NoWissen

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?

.position::before {
   display: block;
   content: "";
   height:108px;
   margin-top: -108px;
   visibility: hidden;
   }

Wo kommen die 108px her? Das ist eine magic number und sowas ist keine gute Idee.

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 …

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 diesem Pen gemacht. (Denk dir die Grafik weg.)

Ohne JavaScript darf der Header dann nicht fixiert sein.

Eine andere Möglichkeit ist, nicht die gesamte Seite zu scrollen, sondern nur den Bereich unter dem Header, wie in jenem Pen gemacht. Die Aufteilung des body in den feststehenden Header und den scrollbaren Bereich erfolgt dabei mit Flexbox oder Grid.

LLAP 🖖

[NoWissen]

@@Gunnar Bittersmann

Ich hoffte durch die einzelne Beschreibungen und Bilder dass es etwas verständlich ist. Na ja.

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.

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.

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.

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.

Dir Gunnar trotzdem herzlichen Dank für deine Bemühungen

[Gunnar Bittersmann]

@@NoWissen

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.

Die von mir genannten Gründe sprechen nicht für Prozentwerte, sondern für gar keine Werte – weder in Pixel noch in Prozent.

Mit „in meinem Fall“ meinst du „auf meinem System“? Auf deinem System mögen die 108 Pixel richtig sein; auf Systemen anderer 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.

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.

Die notwendigen Änderungen wären im JavaScript bzw. im Stylesheet, also an einer Stelle – egal, wieviele Seiten mit wievielen Dateien darauf zugreifen.

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.

Felix sagte ja schon, dass die p-Elemente in den li keinen Sinn machen.

Ansonsten bitte einen Link zur problematischen Seite.

LLAP 🖖

[NoWissen]

@@Gunar Bittersmann

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.

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?

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.

Hier zuerst eine Seite der HP im Ausschnitt

<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Bayern</title>
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<meta charset="utf-8">
<meta name="DC.language" content="de">

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

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


</head>

<body>


  <p style="text-align:center;"><span class="titel">Bayern</span></p>


  <div class="floating-menu">


  <div id="Rahmen"><ul id="Navigation">


    <li><a href="DE-BY_a.html">A</a></li>

    <li><a href="DE-BY_b.html">B</a></li>

    <li><a href="DE-BY_c.html">C</a></li>

    <li><a href="DE-BY_d.html">D</a></li>

    <li><a href="DE-BY_e.html">E</a></li>

    <li><a href="DE-BY_f.html">F</a></li>

    <li><a href="DE-BY_g.html">G</a></li>

    <li><a href="DE-BY_h.html">H</a></li>

    <li><a href="DE-BY_i.html">I</a></li>

    <li><a href="DE-BY_j.html">J</a></li>

    <li><a href="DE-BY_k.html">K</a></li>

    <li><a href="DE-BY_l.html">L</a></li>

    <li><a href="DE-BY_m.html">M</a></li>

    <li><a href="DE-BY_n.html">N</a></li>

    <li><a href="DE-BY_o.html">O</a></li>

    <li><a href="DE-BY_p.html">P</a></li>

    <li><a href="DE-BY_q.html">Q</a></li>

    <li><a href="DE-BY_r.html">R</a></li>

    <li><a href="DE-BY_s.html">S</a></li>

    <li><a href="DE-BY_t.html">T</a></li>

    <li><a href="DE-BY_u.html">U</a></li>

    <li><a href="DE-BY_v.html">V</a></li>

    <li><a href="DE-BY_w.html">W</a></li>

    <li><a href="DE-BY_x.html">X</a></li>

    <li><a href="DE-BY_y.html">Y</a></li>

    <li><a href="DE-BY_z.html">Z</a></li>

  </ul></div></div>


  <!-- Ende Navigation und Seitenkopf -->

  <div style="position:relative; top:150px;">



<ul class="blu_ball" id="DE-BY_b3">
<li>
    <a class="list1b" title="Gemeinde" href="http://www.baar-ebenhausen.de/" target="_blank">Baar Ebenhausen</a>
</li>
</ul>
.
.
.
usw. mit Einträgen
.
.
.
</div>
</body>
</html>

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.

div.floating-menu {position:fixed; background: #C6D6E6;border:0px solid #ffcc00; width:1600px; z-index:100000000000;}
div.floating-menu a {text-align:center;}{display:block; margin:0.5em;}
a:link {text-decoration:none;}

body {
    font: normal 72.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #C6D6E6;0
  }

  div#Rahmen {
    width: 119.1em;
    padding: 0.8em;
    /*border: 0px solid #C6D6E6;*/
    background-color: #C6D6E6;
  }
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 48.7em;
    width: 47.1em;
  }
  div#Rahmen div {
     clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width-nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.0em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
    background-color:silver; padding-bottom:0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 1.1em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.1em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #C6D6E6;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: silver;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
  }

Dann hier noch ein kleiner Ausschnitt aus der Datei für das Layout in CSS (layout.css)

 body { background-color:#C6D6E6; }
 a:link { text-decoration:none; font-weight:bold; color:#E00000; }
 a:visited { text-decoration:none; font-weight:bold; color:#800000; }
 a:hover { text-decoration:none; font-weight:bold; background-color:#FFFF00; }
 a:active { text-decoration:none; font-weight:bold; background-color:#CCFFFF; }

 .blu_ball {
   list-style-image:url('../gif/balls/b_blue.gif');
   }

 .list1b {
   font-size: 1.6em;
   font-weight: bold;
   }
 .titel {
   font-size: 2.1em;
     }

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.

[Matthias Apsel]

Hallo NoWissen,

Da es eine reine Offline HP ist kann ich keinen Link geben.

Ich hoffe dass man damit eine Seite rekonstruieren kann und die Funktion erkennen.

https://bplaced.net erlaubt das kostenfreie Hochladen. Die Seite kannst du dann auch wieder löschen.

Bis demnächst
Matthias

[Felix Riesterer]

Liebe(r) NoWissen,

Zunächst handelt sich um ein Stichwortverzeichnis unter anderem mit URL's das ständig wächst.

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.

Das Verzeichnis ist als Offlineverzeichnis gedacht.

Also fällt serverseitige Programmlogik aus. Wir sprechen also nur noch von JavaScript. Da sehe ich noch genau zwei Dateien:

1. HTML-Dokument mit JavaScript-Logik und Stylesheets
2. XML-Dokument mit den eigentlichen Daten

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.

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.

Das sollte nun absolut Dein letztes Problem sein. Wie es aussieht kommt im Grunde erst dann, wenn klar ist, wie es funktioniert!

Liebe Grüße

Felix Riesterer

[NoWissen]

Hallo Felix,

nach den ganzen Aufräumarbeiten möchte ich auch dir Antworten.

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.

Gruß

NoWissen

[Rolf B]

Hallo NoWissen,

Übrigens, diesen feststehenden Header habe ich in Einzelteilen aus dem alten SelfHTML Version 8.12 damals übernommen.

Was möchtest Du uns mit deinem "Übrigens" mitteilen?

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.

Wie auch immer. Hast Du 1300 Seiten mit position:fixed Navigation? Oder ein Stichwortverzeichnis für 1300 Seiten?

Ich nehme an, letzteres. Wir reden also von einer Seite mit 26 Ankern. Das sollte machbar sein.

Rolf

[NoWissen]

Hallo Rolf,

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.

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.

Also keine so einfache Sache. Deshalb lege ich auch so großen Wert darauf nicht all zuviel zu ändern am Bestand.

Gruß NoWissen