# Java Html Menü oder so



## Crushmeifyoucan (14. Dezember 2004)

Hallo,

ich möchte ein menü auf meiner homepage einbauen über java und layer aber wie kann ich das einstellen das die layer an der richtigen stelle erscheinen egal bei welcher auflösung ?

Quelltext Beispiel
  <div style="visibility:hidden; margin-left:477px; position:absolute; top:184px; left: 89px; height: 0px;" id="sub4" onClick="display('h','sub4')">
    <table height="57" border="1"  cellspacing="0"cellpadding="0">
        <tr>
          <td width="150">Tools</td>
        </tr>
        <tr>
          <td width="150">Trailer</td>
        </tr>
        <tr>
          <td width="150">Spiele-Demos</td>
        </tr>
    </table>
  </div>


----------



## con-f-use (14. Dezember 2004)

Ein Wort: Forensuche! Das Thema hatte wir schon ziemlich oft im Forum. Such doch einfach mal danach. Unter http://de.selfhtml.org wird's sogar ausführlich erklärt.

 P.S.
 Du meinst JavaScript und nicht Java - ist ein großer Unterschied.


----------



## Crushmeifyoucan (14. Dezember 2004)

okay wonach suche ich da ?


----------



## con-f-use (14. Dezember 2004)

Mit "DHTL Menu" oder "JavaScript Menü" solltest du genug treffer haben, hab's aber nicht nachgeprüft. 
  Ansonsten würd ich eher mit div's als mit layern arbeiten ;-] (Schon klar ich weiß du bentzt divs, aber dann nenn sie auch so).
   Wenn's Auflösungsunabhängig sein soll wirst du wohl kaum um Prozentangaben bei den Abständen und Größen rumkommen...


----------



## Crushmeifyoucan (14. Dezember 2004)

cool es funktioniert ! ich danke dir  ich dachte ich finde nie eine lösung welches menü ich nehmen soll und wie es


----------



## Crushmeifyoucan (14. Dezember 2004)

es klappt doch nich so ganz der firefox behält die richtige position aber der ie nicht 

wo muss ich die prozentzahl angeben ?

Die höhe stimmt, nur die abstand nach links nicht 

<div style="visibility:hidden; margin-left:477px; position:absolute; top:184px; left: 89px; height: 0px;" id="sub4" onClick="display('h','sub4')">


----------



## con-f-use (14. Dezember 2004)

Kannst du mal den ganzen Source posten - an dem Bisschen ist es etwas schwierig zu sagen, woran es liegt...
 ... es wäre auch schön zu wissen, wo die einzelenen Dinger hin sollen


----------



## Crushmeifyoucan (14. Dezember 2004)

<script type="text/javascript">

  var subs=new Array('sub1','sub2','sub3','sub4','sub5');

  function hideall(){
    for(x=0; x<subs.length;x++){
      document.getElementById(subs[x]).style.visibility='hidden';
    }
  }

  function display(mode,ele){
    if(mode=='s'){
      hideall();
      document.getElementById(ele).style.visibility='visible';
    }else{
      document.getElementById(ele).style.visibility='hidden';
    }
  }
  </script>

......

<table border="0" cellpadding="0" cellspacing="0">
    <tr> 
      <td width="6"><img src="gifs/balken1.gif" width="6" height="20"></td>
      <td width="30">News</td>
      <td width="6"><img src="gifs/balken1.gif" width="6" height="20"></td>
      <td width="43">Kontakt</td>
      <td width="6"><img src="gifs/balken1.gif" width="6" height="20"></td>
      <td  width="42" onMouseOver="display('s','sub1')">Goodies</td>
      <td width="6"><img src="gifs/balken1.gif" width="6" height="20"></td>
      <td width="67" onMouseOver="display('s','sub2')">Workshop`s</td>
      <td width="6"><img src="gifs/balken1.gif" width="6" height="20"></td>
      <td width="55" onMouseOver="display('s','sub3')">Knowledge</td>
      <td><img src="gifs/balken1.gif" width="6" height="20"></td> 
      <td width="60">G&auml;stebuch</td>
      <td width="6"><img src="gifs/balken1.gif" width="6" height="20"></td>
      <td width="37">Forum</td>
      <td width="6"><img src="gifs/balken1.gif" width="6" height="20"></td>
      <td width="57" onMouseOver="display('s','sub4')">Downloads</td>
      <td width="6"><img src="gifs/balken1.gif" width="6" height="20"></td>
      <td width="27">Links</td>
      <td width="6"><img src="gifs/balken1.gif" width="6" height="20"></td>
      <td onMouseOver="display('s','sub5')">Info</td>
    </tr>
  </table>
  <div style="visibility:hidden; margin-left:15%; "id="sub1" onClick="display('h','sub1')">
    <table height="68" border="0"  cellspacing="0"cellpadding="0">
      <tr>
          <td width="150">Präsentationen</td>
        </tr>
        <tr>
          <td width="150">Wallpapers</td>
        </tr>
        <tr>
          <td width="150">Lustiges</td>
        </tr>
        <tr>
          <td width="150">Du </td>
        </tr>
    </table>
  </div>
  <div style="visibility:hidden; margin-left:15%; top:184px;" id="sub2" onClick="display('h','sub2')">
  <table height="34" border="0"  cellspacing="0"cellpadding="0">
      <tr>
          <td width="150" height="17">Windows Styling</td>
      </tr>
      <tr>
        <td width="150">Grillparty</td>
      </tr>
  </table>
  <div style="visibility:hidden; margin-left:208px; position:absolute; top:184px;" id="sub3" onClick="display('h','sub3')">
    <table height="90" border="0"  cellspacing="0"cellpadding="0">
        <tr>
        <tr>
          <td width="150"><a href="index.php?content=fruher">Pukalani</a></td>
        </tr>
        <tr>
          <td width="150"><a href="index.php?content=beepworld">Beepworld</a></td>
        </tr>
        <tr>
          <td width="150"><a href="index.php?content=google">Google</a></td>
        </tr>
        <tr>
          <td width="150"><a href="index.php?content=loveyou">Love You</a></td>
        </tr>
        <tr>
          <td width="150"><a href="index.php?content=think">Think!</a></td>
        </tr>
        <tr>
          <td width="150"><a href="index.php?content=philo">Philosophie</a></td>
        </tr>
    </table>
  </div>
  <div style="visibility:hidden; margin-left:20%; position:absolute; top:184px; left: 15%; height: 0px;" id="sub4" onClick="display('h','sub4')">
    <table height="57" border="1"  cellspacing="0"cellpadding="0">
        <tr>
          <td width="150">Tools</td>
        </tr>
        <tr>
          <td width="150">Trailer</td>
        </tr>
        <tr>
          <td width="150">Spiele-Demos</td>
        </tr>
    </table>
  </div>
  <div style="visibility:hidden; position:absolute; top:184px; left: 653px; height: 0px; width: 30px;" id="sub5" onClick="display('h','sub5')">
    <table width="90" height="38" border="0"cellpadding="0" cellspacing="0">
        <tr>
          <td width="150"><a href="index.php?content=banner">Banner</a></td>
        </tr>
	    <tr>
	        <td width="150"><a href="index.php?content=disc">Disclaimer</a></td>
	      </tr>
    </table>
  </div>
      </div>
      </td>


----------



## con-f-use (14. Dezember 2004)

Jetzt hast du's geschafft mich zu verwirren, wo soll was jetzt wo hin. Sorry, ich glaub ich hab da was falsch verstanden.


----------



## Crushmeifyoucan (14. Dezember 2004)

http://www.crush85.de/2005/index.php


----------



## Crushmeifyoucan (15. Dezember 2004)

wieso schreibst du nun nichts mehr


----------



## con-f-use (15. Dezember 2004)

Sorry, musste gestern dann weg. Du hast die Frage nicht so wirklich beantwortet. Sollen die einzelnen - ich nenn sie jetzt mal Untermenüs - also sollen die jetzt leicht versetzt unter die jeweilgen Hauptpunkte und das in jeder Auflösung oder wie?


----------



## Crushmeifyoucan (15. Dezember 2004)

ja ganz genau ! das menü von goodies soll unter "goodies" stehen und bei downloads auch etc. verstehst du was ich meine ?


----------



## con-f-use (15. Dezember 2004)

Hab jetzt endlich den Thread gefunden, den ich meinte:
http://www.tutorials.de/tutorials131875.html
 Du musst nud noch dafür sorgen, dass die Tabellenzellen ne feste weite haben und dann klappts


----------



## Gumbo (15. Dezember 2004)

Besser wäre jedoch ein weit aus dynamischeres Script zu verwenden, welches zusätzlich noch auf semantischen Elementen basiert, wie z. B. das in einem Tutorial beschriebene „Javascript-TreeMenu“. Der Vorteil daran ist, dass auch Anwender mit deaktivierter JavaScript-Unterstützung die Semantik verstehen.


----------



## Crushmeifyoucan (15. Dezember 2004)

das ist genau der quelltext den ich auch benutze !?


----------



## con-f-use (15. Dezember 2004)

Ich sag doch du musst noch für ne feste Tabellenbreite sorgen. Schreib einfach width="[Summe der Spaltenbreiten in der Navigationstabelle]" in den <table>-tag der Navigationstabelle und richte die anderen Tabellen danach aus:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>Unbenanntes Dokument</title>
 <style type="text/css"><!--
 td {
 width: 150px;
 }
 --></style>
 </head>
   <script type="text/javascript">
 
   var subs=new Array('sub1','sub2','sub3','sub4','sub5');
 
   function hideall(){
 	for(x=0; x<subs.length;x++){
 	  document.getElementById(subs[x]).style.visibility='hidden';
 	}
   }
 
   function display(mode,ele){
 	if(mode=='s'){
 	  hideall();
 	  document.getElementById(ele).style.visibility='visible';
 	}else{
 	  document.getElementById(ele).style.visibility='hidden';
 	}
   }
   </script>
 
 
 <body>
 <div>
   <table border="1" cellspacing="0" cellpadding="0" width="500px">
 	<tr>
 	  <td style="width:100px;" height="20" onMouseOver="display('s','sub1')">Test</td>
 	  <td style="width:100px;" height="20" onMouseOver="display('s','sub2')">Test</td>
 	  <td style="width:100px;" height="20" onMouseOver="display('s','sub3')">Test</td>
 	  <td style="width:100px;" height="20" onMouseOver="display('s','sub4')">Test</td>
 	  <td style="width:100px;" height="20" onMouseOver="display('s','sub5')">Test</td>
 	</tr>
   </table>
 </div>
 
 <div style="visibility:hidden; margin-left:0px; position:absolute; top:40px;" id="sub1" onClick="display('h','sub1')">
   <table height="90" border="1"  cellspacing="0" cellpadding="0">
 	<tr><td style="width:150px;">Test</td></tr>
 	<tr><td style="width:150px;">Test</td></tr>
 	<tr><td style="width:150px;">Test</td></tr>
 	<tr><td style="width:150px;">Test</td></tr>
 	<tr><td style="width:150px;">Test</td></tr>
   </table>
 </div>
 
 <span style="visibility:hidden; margin-left:100px; position:absolute; top:40px;" id="sub2" onClick="display('h','sub2')">
   <table height="90" border="1"  cellspacing="0" cellpadding="0">
 	<tr><td style="width:150px;">Test2</td></tr>
 	<tr><td style="width:150px;">Test</td></tr>
 	<tr><td style="width:150px;">Test</td></tr>
 	<tr><td style="width:150px;">Test</td></tr>
 	<tr><td style="width:150px;">Test</td></tr>
   </table>
 </span>
 
 <div style="visibility:hidden; margin-left:200px; position:absolute; top:40px;" id="sub3" onClick="display('h','sub3')">
   <table height="90" border="1"  cellspacing="0" cellpadding="0">
 	<tr><td style="width:150px;">Test3</td></tr>
 	<tr><td style="width:150px;">Test</td></tr>
 	<tr><td style="width:150px;">Test</td></tr>
 	<tr><td style="width:150px;">Test</td></tr>
 	<tr><td style="width:150px;">Test</td></tr>
   </table>
 </div>
 
 <div style="visibility:hidden; margin-left:300px; position:absolute; top:40px;" id="sub4" onClick="display('h','sub4')">
   <table height="90" border="1"  cellspacing="0" cellpadding="0">
 	<tr><td style="width:150px;">Test4</td></tr>
 	<tr><td style="width:150px;">Test</td></tr>
 	<tr><td style="width:150px;">Test</td></tr>
 	<tr><td style="width:150px;">Test</td></tr>
 	<tr><td style="width:150px;">Test</td></tr>
   </table>
 </div>
 
 <div style="visibility:hidden; margin-left:400px; position:absolute; top:40px;" id="sub5" onClick="display('h','sub5')">
   <table height="90" border="1" cellspacing="0" cellpadding="0">
 	<tr><td style="width:150px;">Test5</td></tr>
 	<tr><td style="width:150px;">Test</td></tr>
 	<tr><td style="width:150px;">Test</td></tr>
 	<tr><td style="width:150px;">Test</td></tr>
 	<tr><td style="width:150px;">Test</td></tr>
   </table>
 </div>
 
 </body>
 </html>
```


----------



## Crushmeifyoucan (15. Dezember 2004)

hab das menü noch mal komplett neu gemacht, und es war im nachhinen ganz easy hatte wohl irgendwas gelöscht oder so


----------

