Hey Leute,
ich will eine Seite erstellen, auf der man für verschiedene Fächer lernen kann und wo mein sein Thema selbst auswählt. Nun soll jedes Thema in den 4 Schritten bearbeitet werden und durch das klicken auf die Buttons "Start" soll sich ein neues Fenster öffnen. Diese Links müssen sich je nach Themenauswahl ändern ( weil es immer andere Hilfsseiten sind). Hat irgendjemand ne Ahnung wie ich das machen kann?
HTML
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>4 Schritte lernen/Mathematik</title>
- <style type="text/css">
- #header{
- margin-top: -10px;
- margin-left: -10px;
- margin-right: -10px;
- padding-bottom: -20px;
- background-color: #068587;
- }
- #Suchleiste{
- padding: 2px 2px 5px 20px;
- background-color: #004156;
- width: 100%;
- float: left;
- margin-left: -10px;
- margin-right: -10px;
- }
- #Suchleiste ul{
- margin-left: 40px;
- }
- #Suchleiste li {
- padding-top:-1px;
- list-style: none;
- float: left;
- }
- #Suchleiste a {
- padding:10px 140px 10px 140px;
- }
- #Suchleiste a:link {
- text-decoration: none;
- text-color: white;
- }
- #Suchleiste a:hover {
- color:black;
- background-color: white;
- text-decoration: none;
- }
- a:link {
- font-family: "Roboto medium", "Arial Black";
- color: white;
- text decoration: none;
- }
- a:visited{
- color: white;
- }
- .Schritte {
- background-color: white;
- width: 250px;
- height: 300px;
- border: 3px black solid;
- float: left;
- margin-top: 305px;
- margin-right: 150px;
- left: 200px;
- position: relative;
- border-radius: 20px;
- }
- #Hintergrund{
- background-color: #4FB99F;
- width: 2000px;
- height: 350px;
- margin-left:-10px;
- margin-top: 300px;
- padding: 25px 50px 25px 50px;
- }
- .Start{
- width: 140px;
- height: 40px;
- margin-left: 55px;
- margin-top: 100px;
- border-radius: 20px;
- border: 1px black solid;
- background-color: #F2B134;
- font-size: 30px;
- }
- .Start:hover{
- border: 2px black solid;
- font-size: 32px;
- }
- #Themenwahl{margin-top: 150px;
- margin-bottom: -200px;
- }
- #Themenauswahl{
- width: 250px;
- height: 60px;
- font-size: 18px;
- border-radius: 20px 0px 0px 20px;
- border: 3px #004156 solid;
- background-color: #068587;
- color: white;
- }
- #Themenauswahl:hover{
- border: 4px #004156 solid;
- color: #F2B134;
- }
- #Button{
- height: 60px;
- width: 250px;
- background-color: white;
- font-size: 15px;
- border-radius: 0px 20px 20px 0px;
- font-size: 18px;
- border: 3px #004156 solid;
- background-color: #068587;
- color: white;
- }
- #Button:hover{
- border: 4px #004156 solid;
- color: #F2B134;
- }
- .Text{ font-size: 25px;
- padding-top: 60px;
- font-family: "Roboto Black", "Arial Black";
- }
- .Erklärung{
- font-size: 18px;
- font-family: "Roboto medium", "Roboto Thin", "Arial", "Arial Black","Arial Narrow";
- }
- </style>
- </head>
- <body>
- <div id="header">
- <center><img alt="self-Logo" src="Logo 4 Schritte lernen.svg" width="1374" height="226"/></center>
- </div>
- <div id="Suchleiste">
- <ul>
- <li><a href="Unbenannt-4.html">Biologie</a></li>
- <li><a href="Unbenannt-4.html">Physik</a></li>
- <li><a href="Mathemathik Themenauswahl.html">Mathematik</a></li>
- <li><a href="Unbenannt-4.html">Geschichte</a></li>
- <li><a href="Unbenannt-4.html">Pädagogik</a></li>
- </ul>
- </div>
- <div id="Themenwahl"><center> <select id="Themenauswahl" name="Themenauswahl" >
- <option value="1"> Ableitung</option>
- <option value="2"> Kopfrechnen</option>
- <option value="3"> Hochpunkte</option>
- <option value="4"> H-Methode</option>
- </select>
- <button id="Button">Auswahl bestätigen</button></center>
- </div>
- <div id="Schritt1" class="Schritte"><center>
- <p class="Text">Schritt 1:</p>
- <p class="Erklärung">Einführung und Erklärung</p></center>
- <a href="Nullstellen.html"><button id="1" class="Start" onClick="loadDoc()">Start</button></a></div>
- <div id="Schritt2" class="Schritte"><center>
- <p class="Text">Schritt 2:</p>
- <p class="Erklärung">Einfache Aufgaben</p></center>
- <a href="Nullstellen Aufgaben.html"><button id="2" class="Start" onClick="loadDoc()">Start</button></a></div>
- <div id="Schritt3" class="Schritte"><center>
- <p class="Text">Schritt 3:</p>
- <p class="Erklärung">Vertiefende Aufgaben</p></center>
- <a href="Kopfrechnen Mathe.html"><button id="3" class="Start" onClick="loadDoc()">Start</button></a></div>
- <div id="Schritt4" class="Schritte">
- <center><p class="Text">Schritt 4:</p>
- <p class="Erklärung">Prüfung</p></center>
- <a href="Kopfrechnen Mathe.html"><button id="4" class="Start" onClick="loadDoc()">Start</button></a>
- </div>
- <div id="Hintergrund"></div>
- <script type="text/javascript">
- </script>
- </body>
- </html>