Boxen nicht auf gleicher Höhe!?

[Bengman]

He, Ich habe das Problem, dass Ich die Boxen nicht richtig platziert bekomme!

<section>
<div id="formular">
<form action="registrieren.php?page=erfolg" method="post">
<h4>EMail:</h4><input type="text" name="email"><br />
<h4>Bentuzername:</h4><input type="text" name="benutzername"><br />
<h4>Passwort:</h4><input type="password" name="passwort"><br />
<h4>Passwort wiederholen:</h4><input type="password" name="passwort2"><br /><br />
<input class="register" type="submit" name="erfolg" value="Registrieren"><br /><br />klicken,
stimmen sie automatisch den <a href="/regeln.html">Richtlinien</a> zu!
</form>
</div>
<div id="formular">
<form action="index.php?save" method="post">
<h4>Benutzername:</h4><input type="text" name="benutzername"><br />
<h4>Passwort:</h4><input type="password" name="passwort"><br/>
<input class="login" type="submit" value="Anmelden"><br /><br />
<input type="checkbox" > Login merken?
</form>
<br /><br /><br /><br /><br />
Noch nicht registriert?
Hier <a href="registrieren.php">registrieren!</a>
</div>
</section>

Die Rot umrandete Box soll auf die gleiche höhe, wie die andere. Das Problem habe Ich schon erkannt, und zwar, sieht man am grünen Strich, dass sich die Box immer so platziert, dass alles was in der Box steht, genau gleich abschließt.

Kann mir einer helfen?

 

[MrMurphy]

Hallo

du musst CSS lernen und anwenden. Ohne geht es nicht.

Zudem enthält dein HTML-Quellcode einige Konstrukte, die beim Layouten stören. So sollen zum Beispiel Abstände nicht mit dem br-Element erzeugt werden. Oder alle Texte gehören in geeignete Container und nicht einfach in div- oder ähnliche Container.

Gruss

MrMurphy

 

[Tronjer]

2. <div id="formular">
...
12. <div id="formular">

fail!

Schon wegen solcher Dinge sollten IDs niemals als CSS-Hooks verwendet werden.

 

[Bengman]

@MrMurphy, Ich kann ja schon einiges an Css ;) Und wie mache Ich es jetzt richtig? Das die br Lösung nicht wirklich gut ist, hatte Ich schon befürchtet.

 

[Bengman]

@Tronjer Ich habe die Divs gleich bennant, damit sie beide auf die selben Design Einstellungen greifen können und Ich nicht alles doppelt und dreifach schreiben muss!

 

[MrMurphy]

Hallo

damit sie beide auf die selben Design Einstellungen greifen können

Dann benutze anstatt id class.

Und wie mache Ich es jetzt richtig?

Du musst dein bisheriges CSS für das Formular löschen damit es nicht stört und durch folgendes ersetzen:

section {
   display: flex;
}
section>* {
   padding: 0.5rem;
   border: 2px solid silver;
   border-radius: 0.5rem;
   margin: 0.5rem;
}

Gruss

MrMurphy

 

[Bengman]

Ah, Cool, Danke :)