Navigation-Problem!

( HTML, PHP, Javascript & Co ... )
Doppelwhopper55
Beiträge: 665
Registriert: 02.06.2010, 19:21

Beitrag von Doppelwhopper55 »

Hallöchen,

denke mal das Jürgen hier der richtige Mann ist.

Hab mir bei Self-Html eine nette Navigation ausgesucht, bzw. mein Schwiegersohn.
Sie sollte so FUNKTIONIEREN

Tut sie aber nicht, also bei mir. Ich denke ich hab alles korrekt ugbebastelt und die entsprechenden Gif's auf den Server gepackt.

Klappt einfach nicht aus, da muss ich mal den Profi ran lassen :wink:

Hier der Code:

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Amazonencorps-Frechen</title>
<meta name="description" content="Tanzen Spass und Karneval">
<meta name="author" content="Amazonencorps">
<meta name="keywords" content="Amazonencorps Frechen">
<meta name="keywords" content="Tanzengruppen Frechen">
<meta name="robots" content="index, follow">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
function Menue () {
  if (typeof window.pageYOffset == "number") {
    if (NS4) {
      getElement("id", "Nav").top = window.pageYOffset + 50;
    } else {
      getElement("id", "Nav").style.top = window.pageYOffset + 50;
    }
  } else {
    if (typeof document.body.scrollTop == "number")
      getElement("id", "Nav").style.top = document.body.scrollTop + 50;
  }
  if (OP)
    getElement("id", "NavLinks").style.pixelTop = NavLinksPos;
  if (NS4) {
    getElement("id", "Nav").visibility = "show";
  } else {
    getElement("id", "Nav").style.visibility = "visible";
  }
}

function noMenue () {
  if (NS4) {
    getElement("id", "Nav").visibility = "hide";
  } else {
    getElement("id", "Nav").style.visibility = "hidden";
  }
}

function handleMove (ev) {
  if (!ev)
    ev = window.event;
  var mausposition = ev.pageX ? ev.pageX : ev.clientX;
  if (mausposition < 20) {
      Menue();
  } else {
    if (mausposition > 250) {
      noMenue();
    }
  }
}

function Event_init () {
  if (document.addEventListener) {
    document.addEventListener("mousemove", handleMove, true);
  } else {
    if (NS4) {
      document.captureEvents(Event.MOUSEMOVE);
      document.onmousemove = handleMove;
    } else {
      document.body.onmousemove = handleMove;
    }
  }
  if (OP) {
    NavLinksPos = 42; // Position des Bereiches NavLinks
    getElement("id", "NavLinks").style.pixelTop = NavLinksPos;
  }
}
</script>

<style type="text/css">
body { color:black; background-color:red; background-image:url(http://www.amazonencorps-frechen.de/bilder/navigation_back.gif);
  margin:0; padding:20px 50px; font-family:Tahoma,sans-serif; }
#Nav { position:absolute; top:50px; left:0; visibility:hidden; }
#NavLinks { position:absolute; top:42px; left:42px; }
#Nav a:link {color:#000080; font-weight:bold; font-size:13px; text-decoration:none; }
#Nav a:visited { color:#000080; font-weight:bold; font-size:13px; text-decoration:none; }
#Nav a:hover { color:#FFFFFF; background-color:#000080; font-weight:bold;
  font-size:13px; text-decoration:none; }
#Nav a:active { color:#000080; font-weight:bold; font-size:13px; text-decoration:none; }
</style>
</head>
<body onload="Event_init()">

<div id="Nav">
 <img src="http://www.amazonencorps-frechen.de/bilder/navigation.gif" width="250" height="450" border="0" alt="">
 <div id="NavLinks">
  <a href="http://www.amazonencorps-frechen.de">Home</a><br>
  <a href="http://www.amazonencorps-frechen.de">Leer</a><br>
  <a href="http://www.amazonencorps-frechen.de">Leer</a><br>
  <a href="http://www.amazonencorps-frechen.de">Leer</a><br>
 </div>
</div>

<h3><< Navigation </h3>

<center><img src="http://www.amazonencorps-frechen.de/bilder/plakat.jpg" /></center>

</body>
</html>
Vielleicht findet ihr ja was :wink:
Benutzeravatar
Lighty
Beiträge: 8394
Registriert: 24.08.2006, 02:28

Beitrag von Lighty »

Hallo Franz !

Wo hast du denn die Datei "dhtml.js" hingepackt !?
... und ein Beispiel wie es aussehen soll wäre gut ! ;)
LG, Lighty
Doppelwhopper55
Beiträge: 665
Registriert: 02.06.2010, 19:21

Beitrag von Doppelwhopper55 »

Moin Jürgen,

hmm.....also ein dhtml.js habe ich nirgendwo hingepackt. Hab ja gar keine :wink:

So wie ich das hier
http://de.selfhtml.org/dhtml/beispiele/navigation.htm#quelltext
verstanden hatte ist das im Script eingebaut.

Aber ich glaub ich weiß was du meinst. In Zeile 13 wird auf eine Quelle verwiesen und ab Zeile 14 ist der eigentliche script nochmals aufgeführt. Das kann sich natürlich beißen.
Aussehen soll das wie im Anzeigevorschau in obigem Link, allerdings halt in unserem roten Layout.

Da ich auf Arbeit bin kann ich das im Moment nicht testen :wink:

Wo krieg ich denn die .js her? Das Script als dhtml.js Datei abspeichern und in den Html Ordner des Serves packen?





Benutzeravatar
Lighty
Beiträge: 8394
Registriert: 24.08.2006, 02:28

Beitrag von Lighty »

Moin Franz !

Wenn du die Datei hast, läuft es ! ;)
http://www.j-remmer.de/doppelwhopper/

Die Datei gehört Standard in das gleiche Verzeichnis wo auch die index liegt !
Du kannst aber auch einen Ordner, z.B. "scripts" erstellen und die Datei da rein packen !
Zeile 14 dann entsprechend ändern ! ;)
<script type="text/javascript" src="scripts/dhtml.js"></script>

Datei, dhtml.js, gepackt im Anhang !
LG, Lighty
Doppelwhopper55
Beiträge: 665
Registriert: 02.06.2010, 19:21

Beitrag von Doppelwhopper55 »

Supi,

das werd ich dann gleich mal testen zu Hause. Danke schön erst mal :grin:
Was allerdings jetzt nicht klappte, war dass bei runtergescrollter Seite das Menü sich trotzdem im aktuellen Bereich öffnet. Konnte ich hier im Netbook gut sehen da ich hier einiges scrollen muss um ans Ende der Seite zu gelangen.
Das Menü öffnet sich, aber an der Standardposition oben.
Doppelwhopper55
Beiträge: 665
Registriert: 02.06.2010, 19:21

Beitrag von Doppelwhopper55 »

HILFE????
wie krieg das ganze Umlautfähig???? Sonst muss ich einen ellenlangen Text umschreiben....... :grmpf:
Benutzeravatar
Lighty
Beiträge: 8394
Registriert: 24.08.2006, 02:28

Beitrag von Lighty »

Hallo Franz !

Die Position ist "fix" - steht aber auch auf der Seite ! ;)
Und jetzt kommen noch etliche leere Absätze, damit auch sichtbar wird, dass das Menü immer an der gleichen Stelle angezeigt wird, egal wie weit man scrollt.
Umlaute werden per Ampersands angegeben ! ;)
& nbsp; - Leerzeichen
& auml; - kleines ä
& Auml; - großes Ä
& ouml; - kleines ö
& Ouml; - großes Ö
& uuml; - kleines ü
& Uuml; - großes Ü
& szlig; - ß
( Angabe natürlich ohne Leerzeichen ) ;)
LG, Lighty
Doppelwhopper55
Beiträge: 665
Registriert: 02.06.2010, 19:21

Beitrag von Doppelwhopper55 »

Lighty hat geschrieben:Orginalbeitrag Lesen

Hallo Franz !

Die Position ist "fix" - steht aber auch auf der Seite ! ;)
Und jetzt kommen noch etliche leere Absätze, damit auch sichtbar wird, dass das Menü immer an der gleichen Stelle angezeigt wird, egal wie weit man scrollt.
Hmm....mit den Leerabsätzen war ja nur zu Demozwecken. Viellicht liegts daran das im Mom auf der Startseite nur das Jpg ist. Mal sehen wie es sich verhält wenn da Text o.ä. steht.

Umlaute werden per Ampersands angegeben !
Naja, genau das umschreiben wollte ich mir sparen. Bei Npage die hatten mir einen Metatag mitgeteilt der das Problem gelöst hat. war irgendwas mit Charset.
Von daher war ich jetzt etwas überrascht das das es nicht umgesetzt wurde. Da dieses UTF 8 ja im Code drin ist :sad:



Doppelwhopper55
Beiträge: 665
Registriert: 02.06.2010, 19:21

Beitrag von Doppelwhopper55 »

Jepp

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

genau diesen Tag habe ich seinerseits bekommen und alle Umlaute wurden angezeigt?!?

Merlin
Beiträge: 4567
Registriert: 31.08.2006, 23:08

Beitrag von Merlin »

Doppelwhopper55 hat geschrieben:genau das umschreiben wollte ich mir sparen
Nimm Notepad++ und nutze die Suchen & Ersetzen-Funktion. Suchen nach: ä, Ersetzen mit & auml; (ohne Leerzeichen). Das auch für Großbuchstaben und alle anderen Umlaute.
Benutzeravatar
Lighty
Beiträge: 8394
Registriert: 24.08.2006, 02:28

Beitrag von Lighty »

... jüpp, Editor benutzen und ggf. autom. umwandeln !
( Windows Notepad, Notepad ++ / Linux kwrite, gedit )

Es wird auch generell empfohlen die Ampersands zu verwenden !
( bessere Kompatibilität mit anderen Systemen und/oder Datenbanken )
LG, Lighty
Doppelwhopper55
Beiträge: 665
Registriert: 02.06.2010, 19:21

Beitrag von Doppelwhopper55 »

Okay, ich geb mich geschlagen :wink:
Denke ihr hört dann so in 5 Jahren wieder von mir...... :lol1:
Doppelwhopper55
Beiträge: 665
Registriert: 02.06.2010, 19:21

Beitrag von Doppelwhopper55 »

Pst....und die Anführungsstrichelchen Unten sowie oben in was werden die umbenannt?
Benutzeravatar
Lighty
Beiträge: 8394
Registriert: 24.08.2006, 02:28

Beitrag von Lighty »

... die sollte man so setzen können !
( oder waren es Standard nur oben !? ) :???:

... naja, hier die Angaben ... ! ;)

& bdquo; - „
& ldquo; - “

& ldquo; - “
& rdquo; - ”

Doppelpfeile ( spitze Klammern ), falls gewünscht ...

& laquo; - «
& raquo; - »
LG, Lighty
Doppelwhopper55
Beiträge: 665
Registriert: 02.06.2010, 19:21

Beitrag von Doppelwhopper55 »

Jepp, Danke dir :wink:

Kurioserweise sind diese aber automatisch korrekt dargestellt worden nach dem die Umlaute stimmten.

Aber trotzdem gut zu wissen wie man es hinkriegt wenn's mal nicht so klappt :wink:

Antworten

Zurück zu „Webdesign“