Navigationsleiste versteck

kaepten · 16 März 2015

Hallo,
Wenn du auf die Seite gehst http://www.w3schools.com/html/default.asp
und du dann beispielsweise auf CSS klickst dann ändert sich ja links unten die Sachen.
Und wenn man wieder auf HTML drückt kommt was anders,genau so was würde ich auch machen.
Aber ich habe keine Ahnung wie ich das machen soll.
Jetzt zu meiner Seite wenn ich auf Schulplan drücke soll dann links Hautfächer und und kommen,und wenn ich auf der Startseite bin,soll da nichts stehen erst wenn ich auf Schulplan drücke.
Für alle die die Codes brauchen.
hier die Indexdatei:

HTML:

<!--

Copyright geschützt bei der oben genannten Person
!-->
<!DOCTYPE html>
<html>

  <head>
   <link  rel="stylesheet" type="text/css" href="formatindex.css"  />
   <meta chraset="UTF-8">
   <title> Willkommen auf der Startseite des BKWI </title>
   <link href="bilder/favicon.ico" rel="shortcut icon">
  </head>

<body>
<div class="titel">
<img src="bilder/bkwi.png" alt="BKWI" width="200" height="90" />

</div>


<div class="navi">


<a target="unten" href="start.html"><img src="bilder/930.png" alt="BKWI" width="49" height="49"/></a>
<<a target="unten"href="schulplan.html"><img src="bilder/schulplan.png" alt="BKWI" width="153" height="49"/></a>
<a target="unten" href="anmeldeformular.html">Anmeldeformular</a></td>
<a target="unten" href="kontakt.html"><img src="bilder/kontakt.png" alt="BKWI" width="49" height="49"/></a>



</div>


<div class="naviunten">
<br /><br /><br />
<h3><a target="unten" href="hauptfaecher.html">Hauptfächer</a></h3>
<h3><a target="unten" href="nebenfaecher.html">Nebenfächer</a> </h3>
<h3><a target="unten" href="pruefung.html">Prüfung<br></a></h3>

</div>

<iframe name="unten" src="start.html" class="iframe" >
</iframe>

<div class="navi2">
Kontakt
<br />
So erreichen Sie uns:

</div>
</body>

</html>

das dazugehörige Stylesheet:

Code:

body
    {
     font-size: 12pt;
     color: black;
     background-color: #FFFFFF;
     font-family: verdana;
     /* cursor:  url(bilder/cat.ani), progress; */
    }
h1
    {
     font-size: 16pt;
    }
 
h2
    {
     font-size: 14pt;
    }
h3
    {
     font-size: 14pt;
     color: #0066FF;
    }
h4
    {
     font-size: 13pt;
    }

h5  {
     background-color: darkred;
     color: FFFFFF;
     padding: 8px;
    }



 
a:hover
       {
         cursor:  url(bilder/finger.cur), progress;
       }
/*       Nicht mehr wichtig da a:hover
.mauszeiger
          body, a:hover {cursor: url(bilder/mittelfinger.cur), progress;} */

ul
    {
     list-style-type: circle;
    }
 
.mitte
    {
     text-align:center;
    }
.rechts
    {
     text-align:right;
    }
 
table
    {
      width: 85%;
      background-color: #FFFFF;
    }

td
    {
      color: #D2D2D2;
    }

.spalte1
    {
      background-color: #C0C0C0;
      width: 2%;
    }
 
.farbe1
    {
      background-color: #99CCFF;
    }
 
.farbe2
    {
      background-color: #FFFF00;
    }
 
.farbe3
    {
      background-color: #FFFFFF;
    }
 
.farbe4
    {
      background-color: #FF0000;
    }
 
.farbe5
    {
      background-color: #00CC00;
    }
 
.farbe6
    {
      background-color: #FF00FF;
    }
 
.farbe7
    {
      background-color: #FFCCFF;
    }
 
.farbe8
    {
      background-color: #800080;
    }
 
.farbe9
    {
      background-color: #FFCC00;
    }


.titel
       {
          width: 1300px;
          height: 100px;
          background-color: #FFFFFF;
       
       }

       }
.navi
       {
          width: 1300px;
          height: 50px;
          background-color: #494949;
          color: #D2D2D2;
       }
    
.naviunten
       {
          width: 150px;
          height: 800px;
          background-color: #D6D6D6;
          color: #000000;
          float: left;
    
       }
    
.iframe
       {
          text-algin: left;
          width: 700px;
          height: 1000px;
          background-color: #FFFFFF;
          overflow: auto;
          float: left;
       }
.iframelinks
       {
          width: 150px;
          height: 800px;
          background-color: #FFFFFF;
          color: #000000;
          float: left;
          overflow: auto;
       }

.navi2
       {
          width: 200px;
          height: 800px;
          background-color: #FFFFFF;
          color: #000000;
       }

Falls ihr noch mehr Codes braucht lass es mich wissen.
Und das Bild sieht ganz anders aus wenn ich es in PsPad angucke.
Wie mache ich das es einheitlich ausschaut?
Das Endergbis sollte so ausschauen wie auf dem Bild mit w3schools

Nitamud · 16 März 2015

Bei einem click , lautet das Stichwort js/jQuery-Accordeon Menü. Falls du allerdings nur ein Dropdown Menü beim hover suchst, musst du Css Dropdown als Suchbegriff verwenden :-)

Navigationsleiste versteck

kaepten

Mitglied

Nitamud

Mitglied

Neueste Beiträge