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>