Links,Umlaute und weitere Probleme

[mizekatze]

Hallo, Ich bin am verzweifeln. Nichts funktioniert was ich möchte. Ich habe verschiedene Links die ich ganz gerne unterschiedlich formatieren möchte. Jedoch erkennt dies mein Browser nicht (Mozilla Firefox). Außerdem möchte das der Link auf dem man sich gerade befindet z.B. Grün angezeigt werden soll,jedoch wenn ich bei a:active es ändere zeigt er es nur für einen kurzen Moment,wie mache das richtig das der Link auf dem man sich gerade befindet Gründ gemacht wird bis man auf einen anderen klickt. Ich habe auf meiner rechten Navigationsleiste verschiedene Icons die sich beim drüber gehen ändern die auch gleichzeitig Links sind. Habe zwar in CSS reingeschrieben das sie nichts machen sollen,jedoch werden die Icons mit schwarzen Hintergrund angezeigt was man auf dem Bild sehr gut erkennen kann.

Aufjedenfall, Das größte Problem das sich die verschiedene Links nicht formatieren lassen. Das die ä,ö,ü nicht angezeigt werden. Und ich habe die Seite in verschiedene Bereiche eingeteilt,aber da jeder PC-bildschirm unterschiedlich ist,wie mache ich das die Seite automatisch sich an den Bildschirm anpasst.

Wäre nett wenn ihr mir helfen könntet,und nicht so streng sein zu mir lerne das erst alles in der Schule. Und falls ihr es nicht verstanden habt oder ich mich nicht richtig ausgedrückt habe lasst es mich wissen.

Habe die Datein mal als .rar Datei bereit gestellt,damit ihr die ganze Seite sehen könnt. ( http://workupload.com/file/XSewbJNF )

Aber falls ihr die CSS Datei und eine Seite sehen wollt:

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:link
    {
     text-decoration: none;
     color: #C0C0C0;  
     text-underline: none;
     font-size: 18pt;
    }
    
a:active
    { 
     text-underline: none;
     color: #C0C0C0;
     background-color: #008800;
    } 
     

a:visited 
    {
     text-decoration: none; 
     text-underline: none;
     color: #C0C0C0;
     
    }
    
a:hover
    {
      cursor:  url(bilder/finger.cur), progress;     
      background-color: #000000;

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

/* a.Tabelle ist die Klasse für die Tabelle */

a.tabelle:link
    {
     text-decoration: none;
     text-underline: none;
    }
    
a.tabelle:active
    {
     text-decoration: none; 
     text-underline: none;
    } 
     

a.tabelle:visited 
    {
     text-decoration: none; 
     text-underline: none;
    }
    
a.tabelle:hover
    {
      cursor:  url(bilder/finger.cur), progress;
    }
/* a.links ist die Klasse für die Navi links */

a.links:link
    {
     text-decoration: none;
     text-underline: none;
    }
    
a.links:active
    {
     text-decoration: none; 
     text-underline: none;
     font-weight: bold;
    } 
     

a.links:visited 
    {
     text-decoration: none; 
     text-underline: none;
    }
    
a.links:hover
    {
      cursor:  url(bilder/finger.cur), progress; 
      background-color: #D2D2D2; 
    }
    
a.icon:hover
    {
      cursor:  url(bilder/finger.cur), progress;
      text-decoration: none; 
      text-underline: none;
    }

ul
    {
     list-style-type: circle;
    }
    
.mitte
    {
     text-align:center;
    }
.rechts
    {
     text-align:right;
    }
    
table
    {
      width: 85%;
      border-width: 3pt;
      border-style: solid;
      border-color: #000000;
      background-color: #C0C0C0;
    }
    
th
    {
      background-color: #99FFFF; 
    }

td  
    {
      border-width: 1pt;
      border-style: solid;
      border-color: #000000;
    }

.spalte1
    {
      background-color: #C0C0C0;
      width: 15%;
    }
    
.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;  
       }

       
.navioben
       {
          width: 1300px;
          height: 45px; 
          background-color: #494949;
          color: #D2D2D2; 
          padding-bottom: 15px;
          padding-top: 15px;   
       }
       
.navilinks
       {
          width: 140px;
          height: 1800px; 
          background-color: #E0E0E0;
          color: #000000;
          float: left;
       }
       
.inhalt
       {
          text-algin: left;   
          width: 1010px;
          height: 1800px;
          background-color: #FFFFFF;
          overflow: auto;
          float: left;
       }
       


.navirechts
       {
          width: 150px;
          height: 1800px; 
          background-color: #FFFFFF;
          color: #000000;
          float: left;
       }

/* KONTAKTFORMULAR */
form {
  background-color: #d9d9d9;
  width: 370px; /* Breite des Formulars */ 
  padding: 20px; 
  border: 1px solid #8c8c8c;
}
label { /* Beschriftung auf eigener Zeile */
  display: block; 
  cursor: pointer;  /* Mauszeiger wird zur Hand */ 
}
input#besuchername, 
input#besuchermail, 
textarea { 
  width: 300px;
  border: 1px solid #8c8c8c;
  margin-bottom: 1em;
}
textarea {
  height: 7em;
}
input:focus, 
textarea:focus {
  background-color: #C0C0C0; 
}

<!DOCTYPE html>
<html>
  
  <head>
   <link  rel="stylesheet" type="text/css" href="formatindex.css"  />
   <meta chraset="UTF-8">
   <title> BKWI - Schulplan </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="navioben">


<a href="index.html"><img src="bilder/930.png" alt="BKWI" width="43" height="43"/></a> 
<a href="schulplan.html">Schulplan</a>
<a href="informatik.html">Informatik</a>
<a href="anmeldeformular.html">Anmeldeformular</a>
<a href="kontakt.html">Kontakt</a>



</div>


<div class="navilinks">

<a href="#haupt" class="links"><h3>Hautpfächer</h3></a>
<a class="links" href="#neben"><h3>Nebenfächer</h3></a>
<a class="links" href="#pru"><h3>Prüfungen</h3></a>  
</div>

<div class="inhalt">


<table>

<colgroup>
<col class="spalte1" />
<col class="spalte1" />
<col class="spalte1" />
<col class="spalte1" />
<col class="spalte1" />
<col class="spalte1" />
</colgroup>

<tr>
<th> Zeit </th>
<th> Montag </th>
<th> Dienstag </th>
<th> Mittwoch </th>
<th> Donnerstag </th>
<th> Freitag </th>
</tr>

<tr>
<td> 7:45-8:30 </td>
<td rowspan="2"> - </td>
<td class="farbe5" rowspan="3"><a  class="2" href="#haupt">BWL</a></td>
<td class="farbe5" rowspan="2"> BWL/IKT </td>
<td class="farbe3" rowspan="2"> WI </td>
<td class="farbe8" rowspan="2"> GW </td>
</tr>

<tr>
<td> 8:30-9:15 </td>
</tr>

<tr>
<td> 9:35-10:20 </td>
<td class="farbe3" rowspan="2"> WI </td>
<td class="farbe7" rowspan="2"> GGK </td>
<td class="farbe5" rowspan="2"> BWL </td>
<td class="farbe9" rowspan="2"> BM </td>
</tr>

<tr>
<td> 10:20-11:05 </td>
<td class="farbe6"> Religon  </td>
</tr>

<tr>
<td> 11:20-12:05 </td>
<td class="farbe1" rowspan="2"> Mathe </td>
<td class="farbe2" rowspan="2"> Deutsch </td>
<td class="farbe5" rowspan="2"> BWL </td>
<td class="farbe4" rowspan="2"> Englisch </td>
<td class="farbe3" rowspan="2"> WI </td>
</tr>

 <tr>
<td> 12:15-13:00 </td>
</tr>

<tr>
<td> 13:00-13:45 </td>
<td colspan="5"> M I T T A G S P A U S E </td>
</tr>

<tr>
<td> 13:50-14:35 </td>
<td class="farbe2", rowspan="2"> Deutsch </td>
<td>  </td>
<td>  </td>
<td>  </td>
<td class="farbe4", rowspan="2"> Englisch </td>
</tr>

<tr>
<td> 14:45-15:20 </td>
</tr>




</table>




<h3> Hautpfächer </h3>
<a id="haupt" </a>
</br>
Betriebswirtschaftslehre
<a id="bwl" </a>
</br>
6. Arbeiten im Jahr.
</br>
Deutsch
</br>
4. Arbeiten im Jahr.
</br>
Englisch
</br>
4. Arbeiten im Jahr.
</br>
Mathe
</br>
3. Arbeiten im Jahr.
</br>


<h3>Nebenfächer</h3>
<a id="neben" </a>
</br>
Büromangment
</br>
2. Arbeiten im Jahr.
</br>
Gesamtwirtschaft
</br>
2. Arbeiten im Jahr.
</br>
Geschichte
</br>
2. Arbeiten im Jahr.
</br>
IKT
</br>
2. Arbeiten im Jahr.
</br>
Religon
</br>
2. Arbeiten im Jahr.
</br>
Wirtschaftsinformatik
</br>
<a id="wi" </a>
Ihr arbeitet euch zu einem Programmierer an.
Die ersten Schritte werdet ihr in EXCEL tätige.
Danach kommen Datenbanken tran,wie sie überall zu finden sie wie z.B. bei Amazon.
Falls ihr das abgearbeitet habt kommt HTML mit PHP.
Und im zweiten Jahr witmet ihr euch nur noch den Programmieren.
6. Arbeiten im Jahr.


<h3>Prüfung</h3>
<a id="pru" </a>
Abschlussprüfung Fachhochschulreife in den schriftlichen Prüfungsfächern:
<p> Deutsch,Englisch, Betriebswirtschaftslehre,Mathematik und einem mündlichen Prüfungsfach. </p>
</div>

<div class="navirechts">
<br /><br /><br /><br /><br />
<a href="hausaufgaben.html" class="icon"><img src="bilder/ha1.png" alt="Hausaufgaben" onmouseover="src='bilder/ha2.png'" onmouseout="src='bilder/ha1.png'" width="35" height="35" /></a>
<a href="information.html"><img src="bilder/info1.png" alt="Informationen" onmouseover="src='bilder/info2.png'" onmouseout="src='bilder/info1.png'" width="35" height="35" /></a>
<a href="kontakt.html"><img src="bilder/mail.png" alt="E-Mail" onmouseover="src='bilder/mail2_1.png'" onmouseout="src='bilder/mail.png'" width="35" height="35" /></a>


</div>
</body>

</html>