NoWissen: Bei Fixed Haeder die Ankerposition ändern

Beitrag lesen

SELF-Forum

Bei Fixed Haeder die Ankerposition ändern

NoWissen
– Informationen zu den Bewertungsregeln

@@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&#45;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.

Beitrag melden
–
Informationen zu den Bewertungsregeln