CSS / JavaScript: Eigenes Navigationsmenu

[Felix Riesterer]

Lieber Remo,

Ich verstehe dies Erklärung nicht.

Vergiss es, denn meine Vermutung hat sich nicht bestätigt. Schau Dir Deinen Code nochmal an:

            <div class="navigation">  
              <h1>navigation</h1>  
              <a class="nav-item" href="?nav=0" onMouseover="javascript:show('home');">  
                  <img border="0" src="images/orange_block.gif" width="11" height="11">  
                  Home  
              </a>  
  
              <div class="sub-nav-item" id="home" onMouseout="javascript:hide('home');">home</div>  
              <a class="nav-item" href="?nav=1" onMouseover="javascript:show('about');">  
                  <img border="0" src="images/orange_block.gif" width="11" height="11">  
                  &Uuml;ber mich  
              </a>  
              <div class="sub-nav-item" id="about" onMouseout="javascript:hide('about');">über mich</div>  
              <a class="nav-item" href="?nav=2">  
                  <img border="0" src="images/orange_block.gif" width="11" height="11">  
  
                  ETH  
              </a>  
              <a class="nav-item" href="?nav=3">  
                  <img border="0" src="images/orange_block.gif" width="11" height="11">  
                  Hürnen  
              </a>  
  
              <a href="" onMouseover="javascript:show('gallery');" class="nav-item">  
                  <img border="0" src="images/orange_block.gif" width="11" height="11">  
                  Bilder  
              </a>  
  
              <div class="sub-nav-item" id="gallery" onMouseout="javascript:hide('gallery');">  
                   <a href="?nav=15">USA 04/05</a><br>  
                   <a href="?nav=16">Test</a>  
              </div>  
              <a class="nav-item" href="?nav=5">  
                  <img border="0" src="images/orange_block.gif" width="11" height="11">  
                  Links  
              </a>  
  
            </div>

Du hast nicht konsequent zu jedem Element, dem Du einen mouseOver gegeben hast, auch einen mouseOut gegeben. Damit bleiben manche Elemente sichtbar, da Du sie nicht unsichtbar machst.

Aber Ingo hatte mit seiner Kritik recht: Dein Quelltext ist von seiner Bedeutung her völlig daneben! Nach einer Überschrigt (die ist in Ordnung!) kommt plötzlich irgend so ein Textlink daher, der nicht in ein Blockelement (Textabsatz, Überschrift, Aufzählung, etc.) eingebunden ist. Semantisch also völlig Gaga. Und die DIVs ergeben auch keinen strukturellen Sinn. Es wäre sehr sinnvoll Deine HTML-Struktur komplett zu überarbeiten!

Also nochmal in Ingos Worten: Warum notierst Du den Quelltext nicht als <ul> mit <li>s drinnen, um sie per CSS entsprechend zu steuern? (Oder in meinen Worten:)

Schau mal in SelfHTML über CSS-Navigation nach. Dort steht, wie Du das _richtig_ machst!

Ich muss mich wiederholen!

Ich habe mir natürlich zuerst die Navigationsmenus von SELFHTML angeschaut, welche ich aber für zu gross für meinen Bedarf empfinde. Daher würde ich gerne mein Menu vervollständigen.

WAAAS??? Und was hindert Dich daran, die CSS-Angaben entsprechend anzupassen, damit die Optik für Dich passt? Ich vermute, dass Deine CSS-Kenntnisse noch im Anfangsstadium stecken, sonst würdest Du soetwas nicht schreiben.

Also: Zurück auf "Los!" und nochmal das Kapitel, dass ich Dir nannte durchgeackert. Vor allem die CSS-Angaben sorgäfltig studieren! Kopiere Dir die HTML-Datei mit dem Klapp-Beispiel auf den Desktop und fummle so lange an den CSS-Rulesets herum, bis Du verstanden hast, welche Änderungen welche Effekte haben. Dann kannst Du dieses Beispiel für Deine Seite anpassen.

Und du hast Recht, all die table Formatierungen gehören ausgelagert.

"Ausgelagert"??? Ersatzlos gestrichen meinst Du wohl!?

Liebe Grüße aus Ellwangen,

Felix Riesterer.