Hi Leute, ich bin erst seit knap 1 Monat in dieser schönen Programmierwelt von HTML und CSS drine und bitte um gnade bei Formfehlern^^
Also ich habe eine Website (noch nicht online) wo ein Antriebssystemrechner bzw. vergleicher implementiert ist (Python).
Ich Habe bereits 4 unter Seiten in der Navigation und es klappt alles gut...bis auf dass seit heute meine Unterseite wo der Rechner ist von unten anfängt.
Ich habe lange rumprobiert und weis nicht was ich getan habe...alle anderen seiten fangen normal von oben an.
Ich schicke hier mal meinen HTML und CSS Code von dieser Seite, evtl. entdeckt ja jemand einen groben schnitzer^^
HTML
<!DOCTYPE html>
<html lang='de'>
<head>
<title>
Elektromotoreffizienz-Rechner
</title>
<h1>
Der Elektromotoreffizienz-Rechner
</h1>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style_rechner.css') }}">
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
{% extends 'base.html'%}
{% block content %}
<div id='main'>
<div id='ASYVSSYNRM'>
<p>
Asynchron Vs. Synchron-Reluktanzmotor
</p>
</div>
</div>
<br>
<div class='flex-container'>
<div class='flex-item'>
<img src="{{ url_for('static', filename='img/motor1.png') }}" alt="Bitcoin" width='700' height='400' title='Bitcoin'>
</div>
<div class='flex-item2'>
<br><br><br><br>
Dieser Rechner ermittelt eine energetische Gegenüberstellung zwischen Asynchronmotoren und Synchron-Reluktanzmotoren.
Dabei werden die möglichen jährlichen Ersparnisse in Killowattstunden und in Euro ermittelt.
Außerdem zeigt dieser Rechner die CO2 Ersparnis auf die jährlich bei einem Wechsel zu den effizienteren Synchron-Reluktanzmotoren
entstehen würde.
</div>
</div>
<form>
<h2>Tragen sie die Eckdaten ihres Antriebssystems ein!</h2>
<p>
<label for="Vorname">Bemessungsleistung des Asynchronmotors in KW:</label>
<input type="text" id="Vorname" name="Vorname" autofocus>
</p>
<p>
<label for="Nachname">Energiepreis €/KWh:</label>
<input type="text" id="Nachname" name="Nachname">
</p>
<p>
<label for="Anfrage">Anzahl der Asynchronmotoren:</label>
<input type='text'id='huuh'name="Anfrage" >
</p>
<p>
<label for="Anfrage">Betriebsstunden im Jahr bei 100% Last:</label>
<input type='text'id='huuh'name="Anfrage" >
</p>
<p>
<label for="Anfrage">Betriebsstunden im Jahr bei 75% Last:</label>
<input type='text'id='huuh'name="Anfrage" >
</p>
<p>
<label for="Anfrage">Betriebsstunden im Jahr bei 50% Last:</label>
<input type='text'id='huuh'name="Anfrage" >
</p>
<p>
<label for="Anfrage">Betriebsstunden im Jahr bei 25% Last:</label>
<input type='text'id='huuh'name="Anfrage" >
</p>
<p>
<button type="submit">Berechnung Starten!</button>
</p>
</form>
{% endblock %}
</body>
</html>Und CSS:
Code
body{
font-family:Georgia, 'Times New Roman', Times, serif;
background-color:rgb(55, 194, 50);
}
#navigation a {
color:rgb(19, 16, 73);
padding: 8px;
font-size: 16px;
}
#navigation a:hover {
color: rgb(151, 68, 68);
font-size:18px;
}
#main{
max-width:800px;
margin:auto;
font-family:Georgia, 'Times New Roman', Times, serif;
font-size:17px;
}
#footer{
text-align: center;
padding:18px;
color:rgb(214, 201, 165);
}
nav ul li a{
padding:14px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.mitte {
display: flex;
justify-content: center;
align-items: center;
}
#pic{
display: flex;
justify-content: center;
align-items: center;
}
button{
font-size:20px;
background-color: rgb(224, 69, 8);
padding: 5px;
transition: all ease-in-out 0.2s;
}
button:hover{
transform:translateY(-10px);
background-color: green;
}
h1{
font-size:70px;
background-color:darksalmon;
text-align: center;
}
#kontakt{
font-size:18px;
text-align:center;
}
#top {
text-align:center;
}
#logo {
color:rgb(170, 5, 19);
background-color:lightsalmon;
font-size: 50px;
font-weight: bold;
padding: 8px;
margin-top: 16px;
}
#logo-name {
font-size:52px;
font-weight:bold;
margin:16px;
}
#image{
padding:48px;}
h2{
font-size:25px;
}
#ASYVSSYNRM{
font-size:48px;
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
justify-content: space-between;
}
.flex-container{
display: grid;
grid-template-columns: 700px 700px ;
grid-template-rows: 500px ;
column-gap:55px;
justify-self:center;
}
.flex-item{
padding:16px;
}
.flex-item2{
justify-self:start;
font-size:22px;
}
form {
border: 1px solid black;
width: 45%;
background-color: rgb(241, 200, 225);
margin: 0 auto;
padding: 0 1em;
justify-content: center;
}
form label {
display: block;
font-size: 0.8em;
color: darkslategrey;
padding-left: 3px;
}Die Änderungen wurden im unteren drittel bei der CSS Datei gemacht.
Liebe Grüße
Johann
jetzt läufts