HTML projekt wie findet ihr die vorarbeit?
html:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>
css
body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
6 Antworten
Korrigiere zuerst einmal deine Markupfehler.
1) Dein div-Element wird zu früh geschlossen. Der Endtag müsste hinter dem Endtag des main-Elements stehen.
2) Wenn du das action-Attribut angibst, muss es auch auf eine valide Adresse verweisen. Ein leerer Wert ist an der Stelle nicht erlaubt. Solltest du auf dieselbe Seiten-URL zeigen wollen, dann lasse das Attribut einfach weg.
3) Du verwechselst das required-Attribut wohl stückweise mit dem pattern-Attribut. Ersteres ist nur ein boolsches Attribut, welches eine Eingabe für das Feld als erforderlich kennzeichnet. Letzteres kann ein Muster für die Eingabe bestimmen.
Beispiel:
<input required pattern="[A-Za-z]">
Beachte, dass das Muster einem regulären Ausdruck entspricht. Wenn du bspw. nur @ als Muster angibst, wird als Eingabe auch nur ein @ angenommen.
Im Beispiel sind nur die Buchstaben des Alphabets als Eingabe erlaubt.
Bezogen auf dein E-Mail-Feld würde ich dir empfehlen, kein eigenes Muster vorzugeben, denn vom Browser wird bereits eines definiert.
4) Der Wert des id-Attributs darf nicht leer sein.
Was du noch an Markup und CSS verbessern kannst:
1) Verzichte nach Möglichkeit darauf, Zeilenumbrüche mit br zu erzwingen. Der eigentlich angedachte Anwendungszweck für dieses Element liegt darin, Umbrüche in Textblöcken zu erzeugen. Die Positionierungen, die du vornehmen möchtest, kannst du auch mit CSS umsetzen. Ein Grid eignet sich beispielsweise.
2) Stichwort WAI/Barrierefreiheit: Ordne jedem Eingabefeld auch ein Label (mit Beschreibungstext) zu (mehr dazu hier). Wenn du es visuell nicht anzeigen möchtest, kannst du den Selektor nutzen, der hier vorgeschlagen wird.
3) Bei den Links würde ich hinterfragen, ob sie nicht explizit in ein nav-Element gekapselt werden können und nicht eher in den Footer gehören. Das hr-Element bräuchst du anschließend nicht mehr, die Trennlinie könntest du via CSS (z.B. mit einem ::before-Pseudoelement) umsetzen.
4) Wenn Header und Footer leer bleiben sollen, würde ich sie rauswerfen.
5) Selektoren mit gleichen CSS-Properties oder gleichnamige Selektoren können zusammengefasst werden. Du hast aktuell zwei body-Selektoren und die Selektoren für die Buttons beinhalten die gleichen Properties.
body {
font-family: Arial, Helvetica, sans-serif;
color: white;
background-color: black;
}
input[type="submit"],
input[type="reset"] {
font-size: 1.0em;
padding: 1px 6px;
/* etc. ... */
}
6) Ein allgemeiner Tipp: Du kannst dein CSS flexibler halten, indem du deine Selektoren unabhängiger von Elementen hältst. Klassenselektoren eignen sich hierfür hervorragend, da man sie mehreren Elementen zuordnen kann.
Auf deine Seite angewandt könntest du z.B. einen Klassenselektor für Buttons erstellen:
.button {
font-size: 1.0em;
padding: 1px 6px;
/* etc. ... */
}
und den dann an deine Buttons heften:
<input class="button" type="submit" value="Anmelden">
<input class="button" type="reset" value="reset">
Würdest du dich später dazu entscheiden, das input-Element gegen einen anderen Typ austauschen zu wollen, wie:
<button class="button" value="Anmelden">Senden</button>
wirkt der Selektor immer noch und im besten Fall musst du nicht einmal die konkreten Styles in ihm ändern.
Des Weiteren wird es dadurch einfacher, andere Buttons bei Bedarf individuell zu gestalten, ohne sich dafür spezifischere Selektoren ausdenken / überhaupt Styles anderer Selektoren überschreiben zu müssen.
Zu deinem derzeitigen Design:
1) Die Login-Box würde ich zumindest horizontal zentrieren. Nimm dafür den Außenabstand von 700px heraus, denn bei kleinen Bildschirmauflösungen wird die Box sonst nur in die rechte untere Ecke gedrückt.
Verschiedene Wege, wie du ein Element in einem anderen Element zentrieren kannst, werden hier gezeigt. Bei einer vertikalen Zentrierung ist die Höhe des Containers von Bedeutung. Mit height: 100vh würde der volle Viewport (sichtbarer Bereich der Webseite im Browserfenster) ausgefüllt werden.
2) Die Abstände zwischen den Eingabefeldern und Buttons würde ich etwas vergrößern. Dabei würde ich ebenso mögliche Fehlermeldungen einkalkulieren, die dem Nutzer bei falschen Eingaben vielleicht angezeigt werden sollen.
3) Ein Problem bei so einer kleinen Box ist, dass sie gerade auf großen Bildschirmen schnell verloren wirkt. Der verbleibende Raum sollte daher durch eine Struktur / ein Hintergrundbild aufgefüllt werden. Die Box mitsamt der Felder würde ich tendentiell größer machen.
Es ist nicht richtig zentriert. Bei mir ist es rechts unten in der Ecke. Die Eingabefelder können mehr Padding vertragen, die Buttons brauchen mehr Abstand, also margin. Das Design ist auch nicht responsive, also würde am verschiedensten Handys oder Computern vielleicht am komplett falschen Fleck sein. Die Felder selbst scheinen gut zu funktionieren. Ein roter Rahmen bei falscher Eingabe wäre gut.
Hab mal das zum CSS hinzugefügt, dann funktionierts für mich besser (wobei ich auch sagen muss, ka was du da mit dem flex teil vorhast, ich benutze flex halt nie):
#main {margin: 0 auto; width: 50%;}
.input {margin: 0 auto; width: 50%;}
eventuell... verwende <main> nie sondern stattdessen div id="main". ich hab jetzt nur bissle rumprobiert ne. werd jetzt nicht die ganze website für dich schreiben. wollte dir nur den trick margin 0 auto fürs zentrieren zeigen, den ich von meiner webdesign ausbildung kenne. prinzipiell bedeutet der befehl dass links und rechts automatisch das gleiche ist, 0 steht für oben und unten hin keine veränderung. zum vertikalen zentrieren muss man noch mehr tricks kennen aber das ist auch nicht so wichtig für websites. definitiv musst du in css noch einiges lernen.
bitte gerne.
btw formulare sind relativ out.
und am anfang des css macht man oft * {margin: 0; padding: 0;} um die automatischen abstände zu entfernen.
zentrieren ist nicht leicht in css, weil jeder display anders ist, du musst so programmieren dass es auf jedem bildshirm gut aussieht, nicht nur auf deinem eigenen.
Bei #main handelt es sich um einen ID-Selektor. Er spricht also nur das Element an, welches auch ein id-Attribut mit dem Wert main hat. In deinem HTML sehe ich nirgendwo ein solches Element.
Wenn du das main-Element ansprechen wolltest, könntest du einen Elementselektor verwenden:
main { /* ... */ }
Die Styles in dem Selektor werden auf das main-Element selbst angewandt (sofern sie nicht durch andere, spezifischere Selektoren überschrieben werden). Die Styles können dabei ebenso Einfluss auf die Kindelemente des main-Elements nehmen (bspw. bei einer Verschiebung werden sie normalerweise mit verschoben, bestimmte Properties wie z.B. color werden vererbt).
Jaja regex du überdrüber flieger wie immer... das habe ich vorher probiert und hatte keinen Effekt. Den Hashtag habe ich erst nachher hinzugefügt und dadurch hat es komischerweise dann funktioniert. CSS ist eine experimentelle Try and Error herantast sprache, man schaut was klappt und was nicht. Die CSS vom FS ist sowieso von Beginn bis Ende komplett neu zu machen, da reicht nicht eine kleine Ausbesserung. probiers gerne aus, bei main {} tut sich gar nix.
(...) prinzipiell bedeutet der befehl (...) 0 steht für oben und unten hin keine veränderung (...)
Die 0 steht für einen Abstand von 0px nach oben und unten. Elemente, die standardmäßig vom Browser einen Abstand nach oben und unten verpasst bekommen (z.B. h1, p, ul) würden bei diesem Style also auch eine Veränderung in der vertikalen Ausrichtung erfahren.
btw formulare sind relativ out.
Nein, definitiv nicht.
Kannst du bitte aufhören meinen gesamten Text durchzuanalysieren und einfach nur deine eigene Antwort schreiben? Es nervt extrem deine Art manchmal.
Gern: https://jsfiddle.net/xpzdksm1/ - Die Box ist gelb, nicht rot.
Bei dir hat es mit dem Hashtag funktioniert, da du vorher das main-Element gegen ein div-Element mit dem id-Attribut main ausgetauscht hast.
Bei dir hat es mit dem Hashtag funktioniert, da du vorher das main-Element gegen ein div-Element mit dem id-Attribut main ausgetauscht hast.
Nein, habe ich eben nicht. Bin ja nicht blöd.
Sieht schon mal recht solide aus. Ich würde vielleicht das Anmeldefeld ein bisschen weiter runter setzen.
ich schaue gerade wie ich des tun kann aber durch margin-top ändert sich nichts :)
Du bist in CSS schon ziemlich ins Detail gegangen. Ich würde erstmal das grobe Gerüst aufbauen und so Sachen wie Schrift erst ganz am Ende machen.
danke also die submit teile wie anmelden und reset habe ich irgendwo mir code rausgenommen aber bei den anderen 3 feldern will ich noch was ändern :)
Schaue dir im Internet base auf YouTube Tutorials an wie man gute Seiten designed. B
eim kurzen Blick bemerke ich ein paar Sachen;
- alles ist klein
- alles schwarz man erkennt nicht viel
- denn blauen Text am meisten, "benutzter eingeben" es ist ein wenig weird besser wäre wenn es bei "Benutzernamen eingeben"
- Warum beim anmelden Nutzername und Email? Warum nicht entwerfen oder
- Und ich würde dir vue.js empfehlen anstatt ganz normales HTML/CSS/JS, ist viel besser und neuer.
LG
Abdul
das #main spricht des ganze main feld an oder