[CSS/JavaScript] Unbeschreiblicher Fehler in meiner Navigation

Lord Alien · 12. September 2007

Hallo alle Computer Spezialisten,

ich hab einen richtig komischen Fehler in meine Navigationleiste. Und ich hab denn Code schon so oft durchgelesen das ich ihn schon auswendig kann,
aber der Fehler ist weiterhin nicht gefunden. Deshalb brauch ich eure Hilfe!!

Da der Fehler schwer zu beschreiben ist, werd ich hier die Screenshots mit Kommentar posten und untendrunter denn Code meiner Pages:

Als erstes die ganz normale Navigation:

Und das passiert wenn ich mit meinem Zeiger auf denn "Startseite"-Button komme (mein zeiger bleibt drauf stehen).

Und das ist nun die Navigationsleiste nach dem ich alle Buttons einmal "überfahren" habe (bleibe mit meinem Button auf dem "so finden sie uns"-Button stehen.

Wie ihr seht wird jeder Button auf denn ich drauf komme nach oben verschoben. Wie es der gleiche Code aussehen sollte seht ihr auf http://www.die-haefners.de.

Da er aber auf meinem Rechner nicht tut werd ich hier noch die Sourc-Codes posten:

Alls erstes die Navigation selber:

Code:

<html>
<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Navigation</title>
		<base target="Panorama-Frame">
		<link rel="stylesheet" type="text/css" href="formate,hp.css">
		<style media="screen" type="text/css">
		</style>
		
		
<script type="text/javascript">
Normal1 = new Image();
Normal1.src = "bilder/starts.gif";     /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "bilder/starts_k.gif"; /* erste Highlight-Grafik */

Normal2 = new Image();
Normal2.src = "bilder/aktuel.gif";     /* zweite Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "bilder/aktuel_k.gif"; /* zweite Highlight-Grafik */

Normal3 = new Image();
Normal3.src = "bilder/ueberu.gif";     /* dritte Standard-Grafik */
Highlight3 = new Image();
Highlight3.src = "bilder/ueberu_k.gif"; /* dritte Highlight-Grafik */

Normal4 = new Image();
Normal4.src = "bilder/freihof.gif";     /* vierte Standard-Grafik */
Highlight4 = new Image();
Highlight4.src = "bilder/freihof_k.gif"; /* vierte Highlight-Grafik */

Normal5 = new Image();
Normal5.src = "bilder/archai.gif";     /* fünfte Standard-Grafik */
Highlight5 = new Image();
Highlight5.src = "bilder/archai_k.gif"; /* fünfte Highlight-Grafik */

Normal6 = new Image();
Normal6.src = "bilder/sofisu.gif";     /* sechste Standard-Grafik */
Highlight6 = new Image();
Highlight6.src = "bilder/sofisu_k.gif"; /* sechste Highlight-Grafik */

/* usw. fuer alle weiteren zu benutzenden Grafiken */

function Bildwechsel (Bildnr, Bildobjekt) {
  window.document.images[Bildnr].src = Bildobjekt.src;
}

/* Variablen deklarieren*/

var starts = false;
var aktuel = false;
var ueberu = false;
var freihof = false;
var archai = false;
var sofisu = false;

</script>
</head>

<body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">

<table border="0" cellpadding="3" cellspacing="0" class="naviga">
	<tr>
		<td>
			<a title="Startseite" href="starts/starts.php"
			onmouseover="Bildwechsel(0, Highlight1)"
			onmouseout="if(starts == false)Bildwechsel(0, Normal1)"
			onclick="if(starts == false)starts = true, aktuel = false, ueberu = false, freihof = false, archai = false, sofisu = false,
			Bildwechsel(0, Highlight1),Bildwechsel(1, Normal2),Bildwechsel(2, Normal3),Bildwechsel(3, Normal4),Bildwechsel(4, Normal5),Bildwechsel(5, Normal6)"
			target="mitte"><img src="bilder/starts.gif"
			width="177" height="45" border="0" alt="Startseite"></a><br>
		</td>
	</tr>
	<tr> 
		<td>
			<a title="Akutelles" href="aktuel/aktuel.html"
			onmouseover="Bildwechsel(1, Highlight2)"
			onmouseout="if(aktuel == false)Bildwechsel(1, Normal2)"
			onclick="if(aktuel == false)aktuel = true, starts = false, ueberu = false, freihof = false, archai = false, sofisu = false,
			Bildwechsel(1, Highlight2),Bildwechsel(0, Normal1),Bildwechsel(2, Normal3),Bildwechsel(3, Normal4),Bildwechsel(4, Normal5),Bildwechsel(5, Normal6)"
			target="mitte"><img src="bilder/aktuel.gif"
			width="177" height="45" border="0" alt="Aktuelles"></a><br>
		</td>
	</tr>
	<tr>
		<td>
			<a title="&Uuml;ber uns" href="ueberu/ueberu.html"
			onmouseover="Bildwechsel(2, Highlight3)"
			onmouseout="if(ueberu == false)Bildwechsel(2, Normal3)"
			onclick="if(ueberu == false)ueberu = true, starts = false, aktuel = false, freihof = false, archai = false, sofisu = false,
			Bildwechsel(2, Highlight3),Bildwechsel(0, Normal1),Bildwechsel(1, Normal2),Bildwechsel(3, Normal4),Bildwechsel(4, Normal5),Bildwechsel(5, Normal6)"
			target="mitte"><img src="bilder/ueberu.gif"
			width="177" height="45" border="0" alt="Über uns"></a><br>
		</td>
	</tr>
	<tr>
		<td>
			<a title="Freizeithof" href="freihof/freihof.html"
			onmouseover="Bildwechsel(3, Highlight4)"
			onmouseout="if(freihof == false)Bildwechsel(3, Normal4)"
			onclick="if(freihof == false)freihof = true, starts = false, aktuel = false, ueberu = false, archai = false, sofisu = false,
			Bildwechsel(3, Highlight4),Bildwechsel(0, Normal1),Bildwechsel(1, Normal2),Bildwechsel(2, Normal3),Bildwechsel(4, Normal5),Bildwechsel(5, Normal6)"
			target="mitte"><img src="bilder/freihof.gif"
			width="177" height="45" border="0" alt="Freizeithof"></a><br>
		</td>
	</tr>
	<tr>
		<td>
			<a title="Archaisches" href="archai/archai.html"
			onmouseover="Bildwechsel(4, Highlight5)"
			onmouseout="if(archai == false)Bildwechsel(4, Normal5)"
			onclick="if(archai == false)archai = true, starts = false, aktuel = false, ueberu = false, sofisu = false,
			Bildwechsel(4, Highlight5),Bildwechsel(0, Normal1),Bildwechsel(1, Normal2),Bildwechsel(2, Normal3),Bildwechsel(3, Normal4),Bildwechsel(5, Normal6)"
			target="mitte"><img src="bilder/archai.gif"
			width="177" height="45" border="0" alt="Archaisches"></a><br>
		</td>
	</tr>
	<tr>
		<td>
			<a title="So finden Sie uns" href="sofisu/sofisu.html"
			onmouseover="Bildwechsel(5, Highlight6)"
			onmouseout="if(sofisu == false)Bildwechsel(5, Normal6)"
			onclick="if(sofisu == false)sofisu = true, starts = false, aktuel = false, ueberu = false, archai = false,
			Bildwechsel(5, Highlight6),Bildwechsel(0, Normal1),Bildwechsel(1, Normal2),Bildwechsel(2, Normal3),Bildwechsel(3, Normal4),Bildwechsel(4, Normal5)"
			target="mitte"><img src="bilder/sofisu.gif"
			width="177" height="45" border="0" alt="So finden Sie uns"></a><br>
		</td>
	</tr>  
			<tr height="51">
				<td align="center" valign="bottom" height="51"><font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" size="1">Erstellt von:</font><br>
					<font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular" size="1"><a href="mailto:webmaster@die-haefners.de">Dipl.-Ing.(FH) H.-P. H&auml;fner<br>
						</a>und<br>
						<a href="mailto:christoph@die-haefners.de">Christoph H&auml;fner</a></font>
				</td>
			</tr>
			<tr>
				<td align="center"><font size="1" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Stand: <?php print (date ("d.m.Y"));?></font>
			</td>
			</tr>
			</td>
		</table>
	</body>
</html>

Und hier der Code der Datei in der er angezeigt werden soll:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Die H&auml;fners: Startseite</title>
<link rel="stylesheet" type="text/css" href="formate,hp.css">
<style type="text/css">
 
</style>
</head>
<body class="rest">

<ul> <? include ('kopfzl.html'); ?> </ul>

<ul class="navpos"> <? include ('naviga.html'); ?> </ul>

<div class="inhalt">
  <h2>Die H&auml;fners: <a href="starts.php">Startseite</a></h2>
  <p>	<table border="0" cellpadding="3" cellspacing="0">
				<tr height="51">
					<td width="310" height="51" align="center"><font size="6"><h1>Die <span class="Häfner">H&auml;fner</span>s</h1></font></td>
				</tr>
				<tr>
					<td width="310">
						<div align="center">
							<font size="3">vom F&ouml;rstleinweg in <a href="http://www.eberstadt.org/">Eberstadt</a></font>
							<p><font size="3"><a href="../freihof/freihof.html" title="Zum Freizeithof" target="mitte">Freizeithof</a></font></p>
							<p><font size="3"><a href="../die-haefnersgocss/inhalt.php" target="_self"><img src="../die-haefnersgocss/bilder/whof01.jpg" border="0" width="253" height="172" alt="Das Paradies auf Erden"></a></font></p>
							<p><font size="3">&nbsp;<br>
								</font><font size="3">Fam. W. H&auml;fner<br>
									F&ouml;rstleinweg 5<br>
									<a href="http://www.buchen.de/index.php?option=com_content&task=view&id=28&lang=de">
									74722 Buchen-Eberstadt</a><br>
										Telefon: 06292 / 443<br>
										e-mail: <a href="mailbx/mailbx.html" target="_self">info@die-Haefners.de</a></font></p>
					</td>
				</tr>
				<tr>
					<td width="310">
		</table>
		<table border="2" cellspacing="2" cellpadding="5" bgcolor="#ffcc99">
								<tr>
									<td>
									<span class="exlink">
									<b><font size="2">Wichtiger Hinweis:<br></font></b>
									<font size="1">Auf dieser Website gibt es Links zu anderen Seiten im Internet . F&uuml;r all diese Links gilt: &quot;Wir m&ouml;chten ausdr&uuml;cklich betonen, dass wir keinerlei Einfluss auf die Gestaltung und die Inhalte der gelinkten Seiten haben. Deshalb distanzieren wir uns hiermit ausdr&uuml;cklich von allen Inhalten aller gelinkten Seiten auf unserer gesamten Website inkl. aller Unterseiten&rdquo;.
									Diese Erkl&auml;rung gilt f&uuml;r alle auf unserer Homepage vorhandenen Links und f&uuml;r alle Inhalte der Seiten, zu denen Links oder Banner f&uuml;hren.
									</font></span>
									</td>
								</tr>
		</table></p>
</div>

<p class="fußzei"><a title="Zur&uuml;ck" href="javascript:history.back()" target="mitte">Zurück</a> <a title="Home" href="starts.php">Home</a></p>
</body>
</html>

Ich hoffe ihr findet denn Fehler, denn ich bin total am verzweifeln!!

ps.: ich weiß das jetzt allen Spezialisten wahrscheinlich die Haare zu berge stehen,
wegen meinem Java Script und wahrscheinlich kann man das alles noch viel einfach und besser machen,
aber es funktioniert so und so versteh ich das auch und deshalb möchte ich euch bitten diskussiono über mein Javascript zu vermeiden.

Lord Alien · 14. September 2007

Hm...

Da schon einige mein Thread angeschaut haben, aber nicht geantwortet, würde ich natürlich gern wissen: Warum ??

Braucht ihr noch mehr Infos ?? Oder ist das ein Problem das, an dem ich nicht der einzigste bin der daran Verzweifelt ??

Es wäre net wenn jmd wenigstens etwas schreiben würde, denn in diesem Fall ist keine Antwort wirklich keine Antwort!!

Alien

Zweipunktnull · 15. September 2007

Lord Alien schrieb:
Da schon einige mein Thread angeschaut haben, aber nicht geantwortet, würde ich natürlich gern wissen: Warum ??

Ich habe ihn mir durchgelesen - und war mal wieder sehr unglücklich, dass bei solch elementaren Sachen wie der Navigation JavaScript eingesetzt wird, zumal man sämtliche Rollover-Effekte auch mit CSS realisieren kann.

Ich möchte es kurz machen: Ich habe keine Lust, nach einer Lösung für ein Problem zu suchen, dass eigentlich gar nicht existieren würde, wenn man ordentlich entwicklen würde.

Nun stand ich vor der Wahl, ob ich dir schreiben solle, dass du das mit CSS machen sollst anstatt mit JavaScript. Ich hab's gelassen. Wieso? Gerade in letzter Zeit reagieren Anfänger irgendwie recht gereizt, wenn man nicht genau auf ihre Frage antwortet, sondern ihnen einen ganz anderen Lösungsweg nennt - ohne ihr gepostetes Problem zu lösen. Desweiteren hatte ich noch ein Zitat von Astrid Steinmann (SELFHTML) im Kopf:

Astrid Steinmann (SELFHTML) schrieb:
Auch erwarten wir von euch, dass ihr _erst_ Lösungsvorschläge für das beschriebene Problem macht und _dann erst_ auf die Untauglichkeit diverser Techniken (Tabellenlayout, Frames) hinweist. Wenn der Mensch zunächst eine Antwort auf die Frage bekommt, die er gestellt hat, fühlt er sich ernst genommen und dann ist er meistens deutlich offener für Vorschläge, die diejenigen Probleme lösen, die aus einem eventuell doch nicht so guten Ansatz heraus entstehen.

Und da ich wie gesagt keine Lust hatte und habe über eine Lösung eines Problems nachzudenken, dass eigentlich gar nicht existieren sollte, habe ich dann auch die Nennung eines anderen Ansatzes gelassen.

Aber wenn du so direkt fragst, wieso niemand antwortet, wollt ich dir doch mal antworten.

Aber btw: Ich kann auch dein Problem nicht nachvollziehen: Im FF und im MSIE7 funktioniert deine Navigation bei mir. Ich sehe das Problem nicht. Bei mir werden auch im MSIE7 keine Buttons irgendwie noch oben verschoben beim Rollover...

Lord Alien · 16. September 2007

Also gleich mal zu Anfang:

Ein Freund von mir hat das problem gelöst.

Als zweites:

Auf der Homepage funktioniert es ja, aber bei der CSS-Version der Homepage trat der beschriebene Fehler auf.

Computer Freak schrieb:
Nun stand ich vor der Wahl, ob ich dir schreiben solle, dass du das mit CSS machen sollst anstatt mit JavaScript.

Das ich einen Roll-Over effekt mit CSS machen kann war mir bewusst. Allerdings weiß ich nicht wie man genau das was auf http://www.die-haefners.de als Navigation besteht mit CSS realisieren kann. Weil das ja nicht nur ein normaler Roll-Over effekt ist, sondern auch noch das, das ein Button Highlight bleibt wenn man draufklickt.

Aber wenn du schon behauptest das ich für meine Navigation kein Javascript brauche, sondern das auch mit CSS machen kann, dann hätte ich doch mal gerne ein Beispiel für.

Suche

Lord Alien

Lt. Junior Grade

Lord Alien

Lt. Junior Grade

Zweipunktnull

Commander

Lord Alien

Lt. Junior Grade

Ähnliche Themen