Probleme bei sauberen CSS Code, Befehle müssen doppelt erscheinen?

Loyalty

Hallo ihr Lieben,
ich sitze momentan an meiner Jahresarbeit (10. Klasse) zu dem Thema HTML und CSS. Nun bin ich dabei meine Codes aufzuräumen und komme bei der CSS Geschichte an meine Grenzen. Wie man in unten stehenden Code sehen kann, sind manche Befehle doppelt oder es handelt sich um andere Befehle mit derselben Bedeutung. Sobald ich einen von ihnen lösche ändert sich meine Webseite drastisch. Um euch die Sucharbeit zu vereinfachen: Es geht um das doppelte Erscheinen des "html, body" TAGs, die ID "#was" muss doppelt dastehen, so bald sie alleine mit allen Attributen ist stimmt etwas an der Seite nicht und das erste "#was" sowie ".tr1" definieren beide die Hintergrundfarbe für den gleichen Ort, können aber nicht ohne den anderen. CSS sowie HTML Quelltext werde ich einfügen, sorry für die Unordnung und mögliches Halbwissen bei der Sache.. Ich gebe echt mein bestes, aber irgendwie reicht das bei dem Thema nicht..
Danke im Voraus,
Luise

HTML:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<title> Overwatch - wichtigste Informationen</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <link href="allgdesign.css" rel="stylesheet">
</head>
    <body>
       <p><img src="kolbanner.jpg">
        </p>
        <div id="navi"><ul>
            <li><a href="index.html">Startseite</a></li>
        <li><a href="Helden.html">Helden</a></li>
           <li> <a href="karten.html">Spielkarten</a></li>
           <li> <a href="Spielmodi.html">Spielmodi</a></li>
           <li> <a href="Events.html">Events</a></li>
            </ul>  </div>
        <br /><br /><br /><br />





        
 
   <table border="1"  cellspacing="0"align="left" id="was"><tr><th class="tr1">Was ist Overwatch?
       <br /></th></tr>
      <tr><td> Bei Overwatch handelt es sich um einen MOBA-Shooter<br /> kreiert von Blizzard Entertainment. Im Spiel muss man<br /> vom Spielmodus abhängige Ziele erreichen, welche man<br /> nur mit seinen Teamkameraden meistern kann. Dieses<br /> schnelllebige Spiel lebt von seiner großen Heldenauswahl,<br /> in der es vier Klassen gibt: offensive Helden, defensive<br /> Helden, Tanks und Heiler. Jeder Charakter besitzt einzig -<br />artige Fähigkeiten, welche das Spielgeschehen beeinflussen.<br /> Der Reiz des Spieles besteht durch Errungenschaften, die<br /> durch Level Anstieg (kein bekanntes Limit) erhaltenen Boxen<br /> mit Items für die Helden und das Ranglisten System.
     </td></tr></table>
    <table border="1" cellspacing="0" align="left"><tr><th class="tr1">Wo kann man es kaufen?</th></tr>
        <tr><td><div class="kauf">
                   <a href="https://www.amazon.de/Activision-Blizzard-Deutschland-72984GM-Overwatch/dp/B017KHBI42/ref=sr_1_1?ie=UTF8&qid=1482243030&sr=8-1&keywords=overwatch&th=1"target="_blank"><b>PC</b></a>
                      <br />
                   <a href="https://www.amazon.de/Activision-Blizzard-Deutschland-72984GM-Overwatch/dp/B017KHBN2E/ref=sr_1_1?ie=UTF8&qid=1482243030&sr=8-1&keywords=overwatch&th=1"target="_blank"><b>Playstation 4</b></a>
                <br />
                   <a href="https://www.amazon.de/Activision-Blizzard-Deutschland-72984GM-Overwatch/dp/B017KHBQNK/ref=sr_1_1?ie=UTF8&qid=1482243030&sr=8-1&keywords=overwatch&th=1"target="_blank"><b>Xbox One</b></a>
        <br />
                </div></td></tr></table>
        <table border="1" cellspacing="0" align="left" id="blizz"><tr><th class="tr1">Blizzard Entertainment</th></tr>
            <tr><td><div >
                <a href="http://eu.blizzard.com/de-de/"target="_blank"><b>Internetseite</b></a><br />
        <a href="https://eu.battle.net/support/de/?locale=de_DE"target="_blank"><b>Support</b></a><br />
                <a href="http://gear.blizzard.com/overwatch"target="_blank"><b>Merch</b></a><br /></div></td></tr></table> 
        <div id="lucke"> <img src="swg.PNG" width="700"></div>

        <br />
        <br />
       <div id="fuss"><hr /> <br /> zuletzt aktualisiert: 08.01.2017 </div> 
    </body>
</html>

Alles anzeigen

CSS:

Code

<style type="text/css">      
   html, body {
      font-family:arial, "lucida console", sans-serif;
             font-size:15pt;
            color: black;
            background-color: aliceblue;
}
        html, body {
      font-family:arial, "lucida console", sans-serif;
             font-size:15pt;
            color: black;
            background-color: aliceblue;
            line-height: 1.4em;
            text-align: center;
            margin-left: auto;
            margin-right: auto; }
 #navi {
        text-align: center;
        margin: 10px;
        margin-bottom: 10px; }
#navi ul { 
            list-style: none;  }
#navi li {
           text-align: center;
    float: left;
            margin-left: 200px;
            width: 100px;
            background-color: gray;
            border-right-width: 4px;
             border-bottom-width: 4px;
             border-top-width: 4px;
             border-left-width: 17px;
            border-color: darkgray;
            border-style: solid;
            padding-top: 4px;
            padding-bottom: 4px;
            padding-right: 4px;
            padding-left; 4px;  }
        a:link { 
            color: darkslategray;
            text-decoration: none;  }
        a:visited {
            color: darkslategray;
            text-decoration: none;  }
        a:hover { 
            color: darkslategray;
            text-decoration: underline; }
h2 { 
    color: black;
    text-decoration: underline;
    font-size: 18pt; }
h3 { text-decoration: underline;
    font-size: 16pt; }
#fuss { clear: both;
    background-color: #c0c6cc;
    margin: 0;
    padding: 0;
    color: dimgrey;
    text-align: center;
}




INDEX
     #was { background-color: silver;

}




.tr1 { background-color: silver;
     text-decoration: underline;
}




#blizz { margin-left: 7%;
        margin-right: 15%;
}
#was {
    margin-left: 15%;
        margin-right: 7%;
}
#lucke { margin-top: 10%;
}

Alles anzeigen

Und Entschuldigung falls der Beitrag von den Normen des Forums abweicht... Ich brauche einfach nur dringend Hilfe!

Bandit

Was bitte hat eine Tabelle da zu suchen? Du hast keine tabellarischen Daten, also ist eine Tabelle schon mal falsch.

Außerdem wäre es gut, wenn du die Code-Tags des Forums nutzen würdest, damit das alles leserlicher wird:

[noparse]

Code

Quellcode

[/noparse]

Loyalty

Mir ist klar, dass eine Tabelle dort nicht unbedingt die beste Lösung ist... Ich bin da leider (wie bei fast allen Seiten) nach dem Motto "Hauptsache es funktioniert" ran gegangen. Ist das Erscheinen der Tabellen etwa Schuld an meinem Problem?
Danke für den Tipp, werde ich sofort ändern!

Bandit

Dein Quellcode hat auch einige Fehler, prüfe das mal auf https://validator.w3.org/

Code

<style type="text/css">

Das gehört nicht in eine CSS-Datei

Loyalty

Danke für den Tipp, werde ich machen.:-) Nur mein eigentliches Problem mit der CSS Datei ist damit noch nicht gelöst... Hast du da zufällig noch'n Tipp?

Bandit

Korrigiere erst mal alle Fehler, dann kann man weiter sehen.

Loyalty

Na ja nachdem was mir die Testseite ausgespuckt hat, handelt es sich ja mehr um Form Fehler als um Fehler die etwas an der Nutzung verändern.. Zumindest mir erscheinen demzufolge die Fehler irrelevant gegenüber meinen oben geposteten Problem (korrigiere mich, wenn es anders ist), weshalb eine Antwort dazu ziemlich hilfreich wäre, denn ich muss meinen CSS Code bis Mittwoch in einen Text aus Sätzen verwandeln -> habe nicht mehr sonderlich viel Zeit.

Bandit

Code

html, body {
  font-family:arial, "lucida console", sans-serif;
  font-size:15pt;
  color: black;
  background-color: aliceblue;
  line-height: 1.4em;
  text-align: center;
  margin-left: auto;
  margin-right: auto; 
}
#navi {
  text-align: center;
  margin: 10px;
  margin-bottom: 10px;
}
#navi ul { 
  list-style: none;  
}
#navi li {
  text-align: center;
  float: left;
  margin-left: 200px;
  width: 100px;
  background-color: gray;
  border-right-width: 4px;
  border-bottom-width: 4px;
  border-top-width: 4px;
  border-left-width: 17px;
  border-color: darkgray;
  border-style: solid;
  padding: 4px;
}
a:link, a:visited { 
  color: darkslategray;
  text-decoration: none;  
}
a:hover { 
  text-decoration: underline; 
}
h2 { 
  color: black;
  text-decoration: underline;
  font-size: 18pt; 
}
h3 { 
  text-decoration: underline;
  font-size: 16pt; 
}
#fuss { 
  clear: both;
  background-color: #c0c6cc;
  margin: 0;
  padding: 0;
  color: dimgrey;
  text-align: center;
}
.tr1 { 
  background-color: silver;
  text-decoration: underline;
}
#blizz { 
  margin-left: 7%;
  margin-right: 15%;
}
#was {
  background-color: silver;
  margin-left: 15%;
  margin-right: 7%;
}
#lucke { 
  margin-top: 10%;
}

Alles anzeigen

Es ändert aber nichts an der Tatsache, dass dein HTML-Code Schrott ist.