NoWissen: Site auteilen in CSS und HTML

Hallo zusammen,

wer kann mir eventuell, mit möglichst etwas ausführlicher, Erklärung bei meinem Problem helfen? Bin noch ein ziemlicher Frischling auf dem Gebiet von CSS und in HTML auch noch nicht sooo tief drin.

Bislang hatte ich meine Intranetpage über eine Javascriptnavigation bedient. Da aber mit jedem neuen Browser auch das Navigationsprogramm geändert werden muß wollte ich eigentlich mit der von SELFHTML vorgestellten "Dynamischen CSS-Navigation für moderne Browser" (Link dort hin: http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm) weiterarbeiten.

Nun zur bisherigen Vorgehensweise:
Nach dem ich es geschafft habe die Größen und Farben der Button an meine Bedürfnisse in CSS anzupassen, habe ich diese gesamte Site in mehrere Dateien aufgeteilt. Zum einen den CSS-Anteil in eine eben solche Datei, den HTML-Anteil in eine HTML-Datei und den Javascript-Anteil auch in eine eigene Datei gegeben und gespeichert.
Danach habe ich eine ganz neue Site begonnen die dann in der Struktur so aussieht:

<html>
<head>
  <meta-Daten>
  <link rel="stylesheet" type="text/css" href="Navi/navi.css"> (Formatierung der Navigation)
  <script type="text/javascript" src="Navi/navi.js"></script> (Java zur Navigation)
</head>

<body>
  <h1>Überschrift</h1>

<div id="Rahmen"><ul id="Navigation">
  <script type="text/html" src="Navi/navi.html"></script> (Links zur Sitenavigation)
  </ul><div></div></div>

Sitetext

</body>
</html>

Bei dieser Vorgehensweise kann man die Farbe entsprechend der Formatierung in der CSS-Datei sehen. Die Überschrift und den Sitetext sind ebenfalls zu sehen, aber keine Buttons und auch kein Buttontext.
Läst man alles in einer Datei so wird alles wie gewünscht angezeigt, aber das ist nicht der Sinn der Sache denn bei mehr als 1400 Seiten (Tendenz steigend) sollen und müssen diese einzeln gesteuert werden.
Möglicher Weise fehlt es an der Übergabe von Variablen??? Darum wenn hier mir jemand entsprechenden Typ(s) geben könnte wär ich schon dankbar dafür.

  1. Hallo!

    <script type="text/html" src="Navi/navi.html"></script> (Links zur Sitenavigation)
      </ul><div></div></div>

    text/html ist kein gültiger Mime-Typ für eine Scriptsprache sondern für Html.
    Ein script-Tag nimmt auch keine Ausgaben vor sondern das angegebene Script.

    Möglicher Weise fehlt es an der Übergabe von Variablen??? Darum wenn hier mir jemand entsprechenden Typ(s) geben könnte wär ich schon dankbar dafür.

    Es gibt verschiedene Möglichkeiten externe HTML-Elemente in ein bestehendes Dokument einzubetten. Die gängigste ist wohl über eine Serverseitige Sprache z.B. PHP. Es geht aber auch mit <http://de.selfhtml.org/servercgi/server/ssi.htm@title=Server Side Includes>, mit Java und was dein Server sonst noch so unterstützt. Eine andere, unschöne, Möglichkeit wäre auch das Nachladen per AJAX.

    Grüße, Matze

    1. Hallo!

      <script type="text/html" src="Navi/navi.html"></script> (Links zur Sitenavigation)
        </ul><div></div></div>

      text/html ist kein gültiger Mime-Typ für eine Scriptsprache sondern für Html.
      Ein script-Tag nimmt auch keine Ausgaben vor sondern das angegebene Script.

      Möglicher Weise fehlt es an der Übergabe von Variablen??? Darum wenn hier mir jemand entsprechenden Typ(s) geben könnte wär ich schon dankbar dafür.

      Es gibt verschiedene Möglichkeiten externe HTML-Elemente in ein bestehendes Dokument einzubetten. Die gängigste ist wohl über eine Serverseitige Sprache z.B. PHP. Es geht aber auch mit <http://de.selfhtml.org/servercgi/server/ssi.htm@title=Server Side Includes>, mit Java und was dein Server sonst noch so unterstützt. Eine andere, unschöne, Möglichkeit wäre auch das Nachladen per AJAX.

      Grüße, Matze

      Hallo Matze,

      vielen Dank für deine Antwort.
      Offensichtlich bedauerlich aber wahr dass ich auf jeder Site jetzt dieses ~~~html

      <li><a href="intern_vz_a.html">A</a></li>

      <li><a href="intern_vz_b.html">B</a>
            <ul>
              <li><a href="#Beispiel">Ba</a></li>
              <li><a href="#Beispiel">Be</a></li>
            </ul>
          </li>

      <li><a href="intern_vz_c.html">C</a></li>

      <li><a href="intern_vz_d.html">D</a>
            <ul>
              <li><a href="#Beispiel">Da</a></li>

      <li><a href="#Beispiel">Db</a></li>
            </ul>
          </li>

      <li><a href="intern_vz_e.html">E</a></li>

      <li><a href="intern_vz_f.html">F</a></li>

      usw.

        
      vorneweg eintragen muß um nicht noch mehr Aufwand treiben zu müssen.
      
      1. Hallo!

        Bitte vermeide "Vollzitate" im Forum sondern zitiere nur die Stellen auf die du dich in deiner Antwort beziehst. Das ist wesentlich übersichtlicher!

        vielen Dank für deine Antwort.
        Offensichtlich bedauerlich aber wahr dass ich auf jeder Site jetzt dieses [..]
        vorneweg eintragen muß um nicht noch mehr Aufwand treiben zu müssen.

        Was spricht gegen eine Lösung mit PHP oder SSI? Du müsstest jeweils dein <script> durch den entsprechenden Befehl ersetzen (Baba gab dir bereits das Beispiel für PHP, wie SSI funktionieren habe ich dir verlinkt), etwas das du jetzt sowieso ändern musst und dann die Dateiendungen anpassen.
        Eine .htaccess würde zwar auch reichen aber alle html auf htmls bzw. php umzuleiten wäre nicht besonders schön.

        Grüße, Matze

  2. Hallo,
    Deine Überschrift verrät einen kleinen Denkfehler. Was für css und JS so einfach möglich ist (und was du auch völlig richtig umgesetzt hast) funktioniert so nicht für HTML.

    Dazu brauchst Du einer der Möglichkeiten die Matze vorgestellt hat.

    Da aber mit jedem neuen Browser auch das Navigationsprogramm geändert werden muß

    Was genau meinst Du mit "mit jedem neuen Browser"?

    wollte ich eigentlich mit der von SELFHTML vorgestellten "Dynamischen CSS-Navigation für moderne Browser" (Link dort hin: http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm) weiterarbeiten.

    Dynamisch ist hier m.E. missverständlich. Wenn ich "dynamische" Navigation sage, dann meine ich eher was Du suchst: eine Navigation, die sich aus Deinem vorhandenen Content selbst generiert (Menüpunkte, Untermenüpunkte). Das leistet das Selfbeispiel aber auf Keinsten.

    <div id="Rahmen"><ul id="Navigation">
      <script type="text/html" src="Navi/navi.html"></script> (Links zur Sitenavigation)
      </ul><div></div></div>

    Wie gesagt, es gibt kein "include" in html. Hättest Du php zur Verfügung sähe das schon anders aus:

    <div id="Rahmen"><ul id="Navigation">
      <?php include "Navi/navi.html"; ?>
      </ul><div></div></div>

    Richtig sinnvoll wird es aber erst, wenn Du ein Script erstellst, was Dir zum Beispiel die Dateistruktur ausliest und daraus eine Liste bastelt. Das ganze noch mit Cachefunktion, um Ressourcen zu sparen und du bist der Sieger.

    Also erstmal rausfinden, ob Du php im Intranet zur Verfügung hast.

    Cheers,
    Baba

    1. Hallo,
      Deine Überschrift verrät einen kleinen Denkfehler. Was für css und JS so einfach möglich ist (und was du auch völlig richtig umgesetzt hast) funktioniert so nicht für HTML.

      Dazu brauchst Du einer der Möglichkeiten die Matze vorgestellt hat.

      Da aber mit jedem neuen Browser auch das Navigationsprogramm geändert werden muß
      Was genau meinst Du mit "mit jedem neuen Browser"?

      wollte ich eigentlich mit der von SELFHTML vorgestellten "Dynamischen CSS-Navigation für moderne Browser" (Link dort hin: http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm) weiterarbeiten.
      Dynamisch ist hier m.E. missverständlich. Wenn ich "dynamische" Navigation sage, dann meine ich eher was Du suchst: eine Navigation, die sich aus Deinem vorhandenen Content selbst generiert (Menüpunkte, Untermenüpunkte). Das leistet das Selfbeispiel aber auf Keinsten.

      <div id="Rahmen"><ul id="Navigation">
        <script type="text/html" src="Navi/navi.html"></script> (Links zur Sitenavigation)
        </ul><div></div></div>

      Wie gesagt, es gibt kein "include" in html. Hättest Du php zur Verfügung sähe das schon anders aus:

      <div id="Rahmen"><ul id="Navigation">
        <?php include "Navi/navi.html"; ?>
        </ul><div></div></div>

      Richtig sinnvoll wird es aber erst, wenn Du ein Script erstellst, was Dir zum Beispiel die Dateistruktur ausliest und daraus eine Liste bastelt. Das ganze noch mit Cachefunktion, um Ressourcen zu sparen und du bist der Sieger.

      Also erstmal rausfinden, ob Du php im Intranet zur Verfügung hast.

      Cheers,
      Baba

      Danke auch dir Baba für die Antwort.

      Ich werde jetzt eben so verfahren müssen wie ich es auch Matze geschrieben habe, allerdings stelle ich gerade fest dass ich mich geirrt habe in der momentanen Ausführung. Es war CSS und Java in der Datei und lediglich die HTML-Datei hatte ich versucht nachzuladen. Damit haben die Formatierungen gepasst. Jetzt wo ich die Sache umdrehe und HTML in der Datei habe und CSS und Java nachlade stimmt keine der Formatierungen mehr. Die Farbe fehlt und die Anordnung ist nicht horizontal wie vorgesehen sondern vertikal. Jetzt geht die Fehlersuche weiter.
      Bislang hatte ich coolmenus3 zur Navigation genutzt und jedes mal wenn es z.B. einen neueren IE oder Firefox gab mußte das Menü angepasst werden.

      1. Noch einmal. Bitte vermeide "Vollzitate" im Forum sondern zitiere nur die Stellen auf die du dich in deiner Antwort beziehst! Das ist wesentlich übersichtlicher!

        Jetzt wo ich die Sache umdrehe und HTML in der Datei habe und CSS und Java nachlade stimmt keine der Formatierungen mehr. Die Farbe fehlt und die Anordnung ist nicht horizontal wie vorgesehen sondern vertikal. Jetzt geht die Fehlersuche weiter.

        Dein CSS hat vermutlich nie auf die Liste gegriffen. Da gilt es jetzt die Liste entsprechend zu formatieren. Natürlich in deiner externen CSS-Datei die du völlig richtig eingebunden hast.

        Bislang hatte ich coolmenus3 zur Navigation genutzt und jedes mal wenn es z.B. einen neueren IE oder Firefox gab mußte das Menü angepasst werden.

        Vermutlich ist dein Quelltext nicht valide. Das solltest du zu allererst beheben.

        Und noch einmal: Bitte vermeide in deinen folgenden Antworten Vollzitate!

      2. Hi,

        Hallo,
        [...]
        Cheers,
        Baba

        was hast du an "Bitte vermeide "Vollzitate"" nicht verstanden? Wenn du dich mit jemandem unterhältst, wiederholst du doch auch nicht jeden Satz deines Gesprächspartners, bevor du ihm antwortest. Oder doch?

        Es war CSS und Java in der Datei ...

        Nein. Java und Javascript sind zwei völlig verschiedene Sprachen.

        Jetzt wo ich die Sache umdrehe und HTML in der Datei habe und CSS und Java nachlade stimmt keine der Formatierungen mehr. Die Farbe fehlt und die Anordnung ist nicht horizontal wie vorgesehen sondern vertikal. Jetzt geht die Fehlersuche weiter.

        Dann zeig doch mal, was du jetzt hast. Vermutlich ist es nur eine Kleinigkeit, ein kleines Verständnisproblem irgendwo.

        Bislang hatte ich coolmenus3 zur Navigation genutzt und jedes mal wenn es z.B. einen neueren IE oder Firefox gab mußte das Menü angepasst werden.

        Kenne ich nicht - aber tu dir und deinen künftigen Website-Besuchern einen Gefallen und baue etwas so Wichtiges wie die Site-Navigation nicht auf Javascript auf.

        Ciao,
         Martin

        --
        Wer keiner Fliege etwas zuleide tut, darf sich nicht über die Maden im Fleisch wundern.
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        1. Hallo Martin,

          Senioren sind nicht immer clever genug um gleich alles umzusetzen. Ich hoffe dass jetzt kein Vollzitat mehr kommt.

          Nein. Java und Javascript sind zwei völlig verschiedene Sprachen.

          Ist mir klar, war eben nur etwas zu kurz (bequem)!

          Dann zeig doch mal, was du jetzt hast. Vermutlich ist es nur eine Kleinigkeit, ein kleines Verständnisproblem irgendwo.

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
          <html>  
          <head>  
          <title>Internet und Stichwortverzeichniss</title>  
          <meta name="generator" content="Ulli Meybohms HTML EDITOR">  
          <meta http-equiv="Content-Style-Type" content="text/html; charset=ISO-8859-1">  
            
          <link rel="stylesheet" type="text/css" href="Navi/navi.css">  
            
            
          <!-- <script type="text/javascript" src="Navi/navi.js"></script> -->  
            
          </head>  
            
          <body>  
            
            
            <h1>Internet und Stichwortverzeichniss</h1>  
            
            <div id="Rahmen"><ul id="Navigation">  
            
            
            
                  <li><a href="intern_vz_a.html">A</a></li>  
            
              <li><a href="intern_vz_b.html">B</a>  
                <ul>  
                  <li><a href="#Beispiel">Ba</a></li>  
                  <li><a href="#Beispiel">Be</a></li>  
                </ul>  
              </li>  
            
              <li><a href="intern_vz_c.html">C</a></li>  
            
              <li><a href="intern_vz_d.html">D</a>  
                <ul>  
                  <li><a href="#Beispiel">Da</a></li>  
            
                  <li><a href="#Beispiel">Db</a></li>  
                </ul>  
              </li>  
            
              <li><a href="intern_vz_e.html">E</a></li>  
            
              <li><a href="intern_vz_f.html">F</a></li>  
            
              <li><a href="intern_vz_g.html">G</a></li>  
            
              <li><a href="intern_vz_h.html">H</a></li>  
            
              <li><a href="intern_vz_i.html">I</a></li>  
            
              <li><a href="intern_vz_j.html">J</a></li>  
            
              <li><a href="intern_vz_k.html">K</a></li>  
            
              <li><a href="intern_vz_l.html">L</a></li>  
            
              <li><a href="intern_vz_m.html">M</a></li>  
            
              <li><a href="intern_vz_n.html">N</a></li>  
            
              <li><a href="intern_vz_o.html">O</a></li>  
            
              <li><a href="intern_vz_p.html">P</a></li>  
            
              <li><a href="intern_vz_q.html">Q</a></li>  
            
              <li><a href="intern_vz_r.html">R</a></li>  
            
              <li><a href="intern_vz_s.html">S</a></li>  
            
              <li><a href="intern_vz_t.html">T</a></li>  
            
              <li><a href="intern_vz_u.html">U</a></li>  
            
              <li><a href="intern_vz_v.html">V</a></li>  
            
              <li><a href="intern_vz_w.html">W</a></li>  
            
              <li><a href="intern_vz_x.html">X</a></li>  
            
              <li><a href="intern_vz_y.html">Y</a></li>  
            
              <li><a href="intern_vz_z.html">Z</a></li>  
            
            </ul><div></div></div>  
            
            
          <ul style="list-style-image:url('gif/balls/b_blue.gif')">  
            
          <li><p><b><font size="+1"><a title="Stadt" href="http://www.aach.de/" target="_blank">Aach</a></font></b></p></li>  
            
          </ul>  
            
          
          

          Bislang hatte ich coolmenus3 zur Navigation genutzt und jedes mal wenn es z.B. einen neueren IE oder Firefox gab mußte das Menü angepasst werden.

          Kenne ich nicht - aber tu dir und deinen künftigen Website-Besuchern einen Gefallen und baue etwas so Wichtiges wie die Site-Navigation nicht auf Javascript auf.

          War von der Funktion und Site-Aufbau nicht schlecht, war eine schwebende Site-Navigation aber von der Sicherheit her sicher nicht das Beste - sehe ich ein.

          Dank dir Martin

          Bis bald
          NoWissen

          1. Hello,
            Mal der Kürze halber als Stichpunkte:

            • das ist unvollständiger html code
            • wir können die externen Resourcen nicht sehen
            • die Scripteinbindung von navi.js ist auskommentiert
            • Du verwendest inline Styleangaben
            • wäre es super, wenn Du uns die Sache online in Aktion zeigen könntest.

            Vielen Dank für ein Onlinebeispiel und die Antwort, wie Du "dynmische" Navigation gedenkst aufzufassen / umzusetzen (siehe vorheriger Beitrag).

            Liebe Grüße und gutes weiteres Gelingen.
            Baba

            1. Hallo,

              jetzt nochmal ausführlich!

              • das ist unvollständiger html code

              den HTML Code habe ich nur teilweise gezeigt da die entscheidenden Punkte im oberen Teil des    Listings sind.D.h. die Einbindung von navi.css bzw. navi.js

              • wir können die externen Resourcen nicht sehen

              die externen Resourcen habe ich nicht dazu gegeben weil ich diese 1:1 von selfhtl übernommen hatte und lediglich Anpassungen in Rahmen-/Buttongröße und in der Beschriftung vorgenommen habe. War auch davon ausgegangen dass dies auch dort eingesehen wird. Aber zur Vollständigkeit hier jetzt mal als erstes ein Ausschnitt einer Site mit Gesamtlisting wie von mir übernommen und für mich angepasst.

              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/loose.dtd">  
              <html>  
              <head>  
              <title>Stichwortverzeichnis</title>  
              <meta name="author" content="Dieter">  
              <meta name="editor" content="html-editor phase 5">  
                
                
              <style type="text/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; } */  
              h1 {  
               font-size: larger;  
              }  
                
                body {  
                  font: normal 100.01% Helvetica, Arial, sans-serif;  
                  color: black;  
                }  
                
                  div#Rahmen {  
                  width: auto;  
                  padding: 0;  
                }  
                * html div#Rahmen {  /* Korrektur fuer IE 5.x */  
                  width: 48.7em;  
                  w\idth: 47.1em;  
                }  
                div#Rahmen div {  
                  clear: left;  
                }  
                ul#Navigation {  
                  margin: 0; padding: 0;  
                  text-align: center;  
                }  
                
                ul#Navigation li {  
                  list-style: none;  
                  float: left;  
                  width: 2.58em;  
                  position: relative;  
                  margin: 0.2em; 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.7em; left: 0.6em;  
                  display: none;  /* Unternavigation ausblenden */  
                }  
                * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */  
                  left: -1.5em;  
                  lef\t: -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;  
                  padding: 0.2em 0.5em;  
                  text-decoration: none; font-weight: bold;  
                  border: 1px solid black;  
                  border-left-color: white; border-top-color: white;  
                  color: maroon; background-color: #ccc;  
                }  
                * html ul#Navigation a, * html ul#Navigation span {  /* nur fuer IE erforderlich */  
                  width: 100%;  
                  w\idth: 6.4em;  
                }  
                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;  
                }  
                
              </style>  
                
              <script type="text/javascript">  
              if(window.navigator.systemLanguage && !window.navigator.language) {  
                function hoverIE() {  
                  var LI = document.getElementById("Navigation").firstChild;  
                  do {  
                    if (sucheUL(LI.firstChild)) {  
                      LI.onmouseover=einblenden; LI.onmouseout=ausblenden;  
                    }  
                    LI = LI.nextSibling;  
                  }  
                  while(LI);  
                }  
                
                function sucheUL(UL) {  
                  do {  
                    if(UL) UL = UL.nextSibling;  
                    if(UL && UL.nodeName == "UL") return UL;  
                  }  
                  while(UL);  
                  return false;  
                }  
                
                function einblenden() {  
                  var UL = sucheUL(this.firstChild);  
                  UL.style.display = "block"; UL.style.backgroundColor = "silver";  
                }  
                function ausblenden() {  
                  sucheUL(this.firstChild).style.display = "none";  
                }  
                
                window.onload=hoverIE;  
              }  
              </script>  
                
              </head>  
              <body>  
                
                <h1>Internet und Stichwortverzeichniss</h1>  
                
                <div id="Rahmen"><ul id="Navigation">  
                
                
                
                  <li><a href="intern_vz_a.html">A</a></li>  
                
                  <li><a href="intern_vz_b.html">B</a>  
                    <ul>  
                      <li><a href="#Beispiel">Ba</a></li>  
                      <li><a href="#Beispiel">Be</a></li>  
                    </ul>  
                  </li>  
                
                  <li><a href="intern_vz_c.html">C</a></li>  
                
                  <li><a href="intern_vz_d.html">D</a>  
                    <ul>  
                      <li><a href="#Beispiel">Da</a></li>  
                
                      <li><a href="#Beispiel">Db</a></li>  
                    </ul>  
                  </li>  
                
                  <li><a href="intern_vz_e.html">E</a></li>  
                
                  <li><a href="intern_vz_f.html">F</a></li>  
                
                  <li><a href="intern_vz_g.html">G</a></li>  
                
                  <li><a href="intern_vz_h.html">H</a></li>  
                
                  <li><a href="intern_vz_i.html">I</a></li>  
                
                  <li><a href="intern_vz_j.html">J</a></li>  
                
                  <li><a href="intern_vz_k.html">K</a></li>  
                
                  <li><a href="intern_vz_l.html">L</a></li>  
                
                  <li><a href="intern_vz_m.html">M</a></li>  
                
                  <li><a href="intern_vz_n.html">N</a></li>  
                
                  <li><a href="intern_vz_o.html">O</a></li>  
                
                  <li><a href="intern_vz_p.html">P</a></li>  
                
                  <li><a href="intern_vz_q.html">Q</a></li>  
                
                  <li><a href="intern_vz_r.html">R</a></li>  
                
                  <li><a href="intern_vz_s.html">S</a></li>  
                
                  <li><a href="intern_vz_t.html">T</a></li>  
                
                  <li><a href="intern_vz_u.html">U</a></li>  
                
                  <li><a href="intern_vz_v.html">V</a></li>  
                
                  <li><a href="intern_vz_w.html">W</a></li>  
                
                  <li><a href="intern_vz_x.html">X</a></li>  
                
                  <li><a href="intern_vz_y.html">Y</a></li>  
                
                  <li><a href="intern_vz_z.html">Z</a></li>  
                
                </ul><div></div></div>  
                
                
              <!-- erste Zeile einer Site der Page-->  
                
              <ul style="list-style-image:url('gif/balls/b_blue.gif')" id="aachen">  
              <li><p><b><font size="+1"><a title="Stadt" href="http://www.aach.de/" target="_blank">Aach</a></font></b></p></li>  
              </ul>  
              
              

              </body>
              </html>

              Da dieses Listing so funktioniert und das Nachladen des HTML-Anteils nicht so funktioniert wie ich es mir vorstellte, habe ich eben versucht wie folgt zu verfahren (siehe auch):

              <html>
              <head>
                <meta-Daten>

              <link rel="stylesheet" type="text/css" href="Navi/navi.css"> (Formatierung der Navigation)
                <script type="text/javascript" src="Navi/navi.js"></script> (Javascript zur Navigation)

              </head>

              <body>

              <h1>Überschrift</h1>

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

              Links zur Sitenavigation (z.B. <li><a href="intern_vz_a.html">A</a></li> usw. )

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

              **Ab hier steht dann der Site-Text**

              <ul style="list-style-image:url('gif/balls/b_blue.gif')" id="aachen">
              <li><p><b><font size="+1"><a title="Stadt" href="http://www.aach.de/" target="_blank">Aach</a></font></b></p></li>
              </ul>

              </body>
              </html>

              • die Scripteinbindung von navi.js ist auskommentiert

              ist ein Fehler entstanden durch ewiges Experimentieren. Außerdem wird das Javascript auch nur bei verwenden des IE5 oder 6 benötigt - ändert im Grunde nichts an der Funktion.

              • Du verwendest inline Styleangaben

              was ist daran falsch?

              • wäre es super, wenn Du uns die Sache online in Aktion zeigen könntest.

              Leider nicht möglich da keine öffentliche HP

              Vielen Dank für ein Onlinebeispiel und die Antwort, wie Du "dynmische" Navigation gedenkst aufzufassen / umzusetzen (siehe vorheriger Beitrag).

              Grundsätzlich habe ich den Titel für die Navigation von SELFHTML übernommen wegen der Eindeutigkeit beim nachlesen auf der angegebenen Site. Dynamisch weil eine weitere Ebene eingeblendet und Benutzt werden kann.

              Danke und Grüße zurück

              NoWissen

              1. Hallo.

                Ich verstehe Dein Problem jetzt so

                • ursprünglich ging es Dir darum den HTML code, der das Menü erzeugt, auszulagern.
                • jetzt geht es aber nur noch darum, dass der ausgelagerte CSS code interpretiert wird.
                  Gehe ich richtig in der Annahme?
                • wir können die externen Resourcen nicht sehen

                Wenn Obiges korrekt ist geht es genau darum, dass Deine Ressourcen nicht korrekt verlinkt sind.

                die externen Resourcen habe ich nicht dazu gegeben weil ich diese 1:1 von selfhtl übernommen hatte und lediglich Anpassungen in Rahmen-/Buttongröße und in der Beschriftung vorgenommen habe.

                Sie werden aber anscheinend nich eingebunden.

                <link rel="stylesheet" type="text/css" href="Navi/navi.css">

                Du hast sie so eingebunden, dass sie in einem Unterordner Navi gesucht werden, relativ zu Deinem html Dokument. Ist das korrekt? Liegt die navi.css im Unterordner "Navi"? Die korrekte Einbindung im Firefox kannst Du am schnellsten so überprüfen: STRG + U, klick auf den Link des CSS-Pfades -> dann sollte der CSS-Code erscheinen.

                • Du verwendest inline Styleangaben
                  was ist daran falsch?

                Nun, es ist nicht empfehlenswert. Z.B. widerspricht es dem Konzept Inhalt und Layout voneinander zu trennen. Das wäre für Dich als Entwickler früher oder später ein Vorteil. Was wenn Du das Bild für die Navipunkte später ändern willst. Würdest Du Dich dann Richtung html oder Richtung css wenden wollen?

                • wäre es super, wenn Du uns die Sache online in Aktion zeigen könntest.
                  Leider nicht möglich da keine öffentliche HP

                Entweder Du registrierst Webspace bei einem Freehoster wie bplaced, oder zu erstellst zumindest ein fiddle. Ich habe mal Deinen Code reingeworfen, der übrigens zu gehen scheint. Allerdings hast Du noch ein CSS-PRoblem. Du musst dafür sorgen, dass die Unterpunkte von B nicht unter den folgenden Buchstaben landen.

                Vielen Dank für ein Onlinebeispiel und die Antwort, wie Du "dynmische" Navigation gedenkst aufzufassen / umzusetzen
                Grundsätzlich habe ich den Titel für die Navigation von SELFHTML übernommen wegen der Eindeutigkeit beim nachlesen auf der angegebenen Site. Dynamisch weil eine weitere Ebene eingeblendet und Benutzt werden kann.

                Du hast aber mindestens einmal versucht, den Menü-*content* auch dynamisch zu laden. ZITAT:

                Läst man alles in einer Datei so wird alles wie gewünscht angezeigt, aber das ist nicht der Sinn der Sache denn bei mehr als 1400 Seiten (Tendenz steigend) sollen und müssen diese einzeln gesteuert werden.

                Mit dieser Zweigleisigkeit hast Du mich verwirrt.

                Cheers,
                Baba

      3. Lieber NoWissen,
        Du musst schon ein bisschen auf das antworten, was wir zurückfragen...

        Cheers,
        Baba