Richtige Formatierung bei HTML und CSS?
Ich habe eine Frage. Ich arbeite gerade als Anfänger an einer Website und habe folgendes Problem.
So sieht die Website eigentlich aus :
So sieht sie aus nach der ersten Skalierung mit responsive Webdesign (wo nach alles richtig ist.):
Doch wenn ich ein weiteres mal skalieren möchte passiert folgender Fehler (Es soll so wie auf dem zweiten Bild aussehen nur kleiner):
HTML: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<title>ToDo List</title>
</head>
<body>
<header class="site-header">
<form action="action_page.php" method="post">
<input type="text" id="todo-box" name="box-input" placeholder="Aufgabe eingeben" required maxlength="50" class="todo-input">
<input type="reset" class="todo-reset todo-reset-submit">
<input type="submit" class="todo-submit" class="todo-reset-submit">
</form>
</header>
<nav class="site-nav">
</nav>
<main class="site-main">
<h2>ToDo</h2>
<p class="todo-point">Müll rausbringen</p>
<p class="todo-point">Zimmer aufräumen</p>
<p class="todo-point">12345678901234567890123456789012345678901234567890</p>
</main>
<footer class="site-footer">
</footer>
</body>
</html>
CSS: .site-header
{
display: flex;
justify-content: center;
margin-bottom: 40px;
margin-top: 20px;
}
.todo-input
{
font-size: 20px;
width: 180px;
padding-left: 5px;
}
.todo-input::placeholder
{
color: black;
}
.todo-reset, .todo-submit
{
width: 150px;
font-size: 20px;
border: none;
cursor: pointer;
}
.todo-input, .todo-reset, .todo-submit
{
border-radius: 5px;
background-color: rgb(251, 255, 0);
border: none;
height: 45px;
transition: background-color 0.3s;
}
.todo-input:hover, .todo-reset:hover, .todo-submit:hover
{
background-color: rgb(213, 216, 13);
}
.site-main
{
display: flex;
flex-direction: column;
align-items: center;
font-size: 20px;
}
.site-footer
{
margin-top: 60px;
display: flex;
justify-content: center;
}
p.todo-point
{
margin: 3px 0;
padding: 2px;
border: 1mm solid black;
border-radius: 10px;
}
@media (max-width: 520px)
{
.todo-input
{
width: 480px;
margin: 0 5px 5px 5px;
}
.todo-reset, .todo-submit
{
width: 240px;
margin: 0 0 4px 4px;
}
p.todo-point
{
font-size: 19px;
}
}
@media (max-width: 500px)
{
.site-header
{
justify-self: unset;
}
.todo-input
{
display: flex;
justify-content: center;
width: 400px;
margin: 0 5px 5px 5px;
}
.todo-reset-sumbit
{
display: flex;
justify-content: center;
width: 200px;
margin: 0 0 4px 4px;
}
}
2 Antworten
- Wenn du mit display: flex arbeitest, würde ich die äußeren Abstände anstelle von margin eher mit gap festlegen. Dadurch u.U. etwas leichter zu steuern.
- Statt den Buttons eine fixe Bereite in Pixel zu geben mit Prozentangaben arbeiten. Statt der 200px wie in deinem Beispiel, lediglich 50 % als Wert zuweist.
Das erste Element (Input) darf die gesamte Breite einnehmen und bei den Buttons halt dafür sorgst, dass sie sich auf der Breite gleichmäßig aufteilen. Mit gap regelst du dann die Abstände und das border-sizing auf border-box umstellst.
HTML:
<form class="form">
<input class="form-input" type="text" />
<button class="form-btn">Zurücksetzen</button>
<button class="form-btn">Senden</button>
</form>
CSS:
/* Reset */
*, *::before, *::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* Nested CSS */
.form {
display: flex;
flex-wrap: wrap;
gap: .75rem;
.form-input,
.form-btn {
height: 2rem;
}
.form-input {
width: 100%;
}
.form-btn {
flex: 1;
text-align: center;
}
}
Kein Ding und gern geschehen. Ich habe ein Code-Snippet ergänzt. Es Bedarf eigentlich nicht vieles einfacher mit flexbox steuern kannst.
<input type="reset" class="todo-input todo-reset todo-reset-submit" />
<input type="submit" class="todo-input todo-submit todo-reset-submit" />
Ich habe den beiden Buttons die Klasse "todo-input" verpasst.
Ich habe die Methode extra noch mal ausprobiert doch leider scheint die bei mir nicht zu funktionieren? :/
Hast du diese Zeile umgeschrieben?
<input type="submit" class="todo-submit" class="todo-reset-submit">
Du hast hier zwei Mal "class" geschrieben - bei mir hat die IDE gemeckert.
Copy & Paste betreiben :-D
Hab ich schon bearbeitet und es hat trzdem nicht funktioniert
Ja das funktioniert aber leider nicht zu 100%... ich habe aber mittlerweile schon eine Lösung gefunden.. aber trzdem danke für die Mühe :)
Danke das hat mir wirklich geholfen :)