nicht angemeldet
Problem mit seltsamer schwarzer Border beim neuladen der Seite
Gunnar Bittersmann
Matthias Apsel
MudGuard
Rolf BHallo,
ich habe ein Problem und zwar, wenn ich meine Website (HTML Formular) neulade, entstehen an der "input-border" für einen kurzen Moment große schwarze Ränder, die ich nicht haben möchte. Wie entferne ich diese wieder?
HTML:
<!DOCTYPE html>
<html lang="de-DE">
<head>
<title>CSS Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0, user-scalable=no">
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<div class="container">
<div class="form">
<form method="post">
<label for="fname">Vorname</label>
<input type="text" id="vname" name="vname" placeholder="Dein Vorname">
<label for="lname">Nachname</label>
<input type="text" id="nname" name="nname" placeholder="Dein Nachname">
<label for="Email">Email</label>
<input type="email" id="email" name="email" placeholder="beispiel@email.de">
<label for="country">Land</label>
<select id="country" name="country">
<option value="-" selected disabled>-</option>
<option value="DEU">Deutschland</option>
<option value="AUT">Österreich</option>
<option value="CHE">Schweiz</option>
</select>
<label for="message">Nachricht</label>
<textarea id="message" name="message" placeholder="Schreibe hier deine Nachricht"></textarea>
<input type="reset" id="reset" name="reset" value="Reset">
<input type="submit" id="submit" name="submit" value="Senden">
</form>
</div>
</div>
</body>
</html>
CSS:
* {
font-family: "Segoe UI", Segoe, Sans-serif;
}
div.container {
border-radius: 5px;
background-color: #F2F2F2;
padding: 20px;
}
form {
margin: auto;
}
label {
display: block;
width: 25%;
box-sizing: border-box;
margin: auto;
}
input[type=text], [type=email], select, textarea {
display: block;
width: 25%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 3px;
box-sizing: border-box;
margin: auto;
margin-top: 5px;
margin-bottom: 15px;
resize: vertical;
outline: none;
transition: 0.5s ease-in-out;
}
input[type=text]:focus, [type=email]:focus, select:focus, textarea:focus {
border: 1px solid #999999;
}
textarea {
height: 50px;
}
textarea:focus {
height: 200px;
}
input[type=submit] {
margin: auto;
margin-top: 5px;
margin-bottom: 15px;
width: 100px;
background-color: #4caf50;
color: white;
padding: 10px 20px;
border: 1px solid #409644;
border-radius: 3px;
cursor: pointer;
display: block;
outline: none;
transition: width 0.5s ease-in-out;
}
input[type=submit]:hover {
background-color: #45a049;
width: 25%;
}
input[type=reset] {
margin: auto;
margin-top: 5px;
margin-bottom: 15px;
width: 100px;
background-color: #e7e7e7;
color: black;
padding: 10px 20px;
border: 1px solid #d3d3d3;
border-radius: 3px;
cursor: pointer;
display: block;
outline: none;
transition: width 0.5s ease-in-out;
}
input[type=reset]:hover {
background-color: #e0e0e0;
width: 25%;
}
Danke schon mal im Voraus
-
@@EinsPhil
ich habe ein Problem und zwar, wenn ich meine Website …
Die da wäre?
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann -
Hallo EinsPhil,
ich habe ein Problem und zwar, wenn ich meine Website (HTML Formular) neulade,
Dazu kann/möchte ich nichts sagen, denn ich würde mir das lieber live anschauen.
aber einige Hinweise möchte ich dir dennoch geben.
<meta name="viewport" content="width=device-width, inital-scale=1.0, user-scalable=no">Es ist keine gute Idee, das Zoomen zu verbieten. Wenn mir die Schrift zu klein ist und ich nicht zoomen kann, besuche ich deine Seite nie wieder.
<div class="container"> <div class="form">Wozu zwei Container?
<label for="fname">Vorname</label> <input type="text" id="vname" name="vname" placeholder="Dein Vorname">Dieses Inputfeld hat keine Beschriftung. 😉
type=text ist der default-type und kann deshalb weggelassen werden<label for="lname">Nachname</label> <input type="text" id="nname" name="nname" placeholder="Dein Nachname">Dieses auch nicht.
<label for="Email">Email</label> <input type="email" id="email" name="email" placeholder="beispiel@email.de">Bei diesem bin ich nicht sicher, ich vermute es hat auch keine Beschriftung.
Verwende für Beispiele die dafür vorgesehenen domains, etwa example.com<input type="reset" id="reset" name="reset" value="Reset">Resetbuttons sind sinnfrei.
<input type="submit" id="submit" name="submit" value="Senden">Verwende besser ein button-Element.
Bis demnächst
Matthias--
Rosen sind rot.-
@@Matthias Apsel
Wozu zwei Container?
Sie meinten: Wozu vier Container? 😉
Bei diesem bin ich nicht sicher, ich vermute es hat auch keine Beschriftung.
Interessante Frage …
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Hi,
Wozu zwei Container?
Sie meinten: Wozu vier Container? 😉
5 - html, body, div, div, form.
davon 2 überflüssige.cu,
Andreas a/k/a MudGuard
-
-
@@Matthias Apsel
<div class="container"> <div class="form">Wozu zwei Container?
div:not([typeof]):not([property]):not([itemtype]):not([itemprop]):only-child { outline: var(--error-outline) !important; ERROR: 'useless div element'; }gehört wohl mit in jedes Stylesheet. (Die Deklaration von
--error-outlinesetze ich mal voraus.)LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann -
@@Matthias Apsel
<label for="Email">Email</label> <input type="email" id="email" name="email" placeholder="beispiel@email.de">Bei diesem bin ich nicht sicher, ich vermute es hat auch keine Beschriftung.
Weder Firefox noch Safari noch Chrome fokussieren beim Click aufs Label das Eingabefeld.
forundidwerden case-sensitiv verglichen.Verwende für Beispiele die dafür vorgesehenen domains, etwa example.com
Sie meinten: Verwende keine sinnlosen Placeholder.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-
@@EinsPhil
<html lang="de-DE">Das ist überspezifisch;
lang="de"sollte genügen.<head> <title>CSS Test</title> <meta charset="utf-8">Die Zeichencodierungsangabe sollte als erstes in
headstehen.<meta name="viewport" content="width=device-width, inital-scale=1.0, user-scalable=no">user-scalable=nowird von modernen Browser nicht interpretiert. Die Angabe ist also bestenfalls verwirrend. In anderen Browsern führt sie dazu, dass die Seite unbenutzbar wird. Weg damit!<label for="fname">Vorname</label> <input type="text" id="vname" name="vname" placeholder="Dein Vorname"> <label for="lname">Nachname</label> <input type="text" id="nname" name="nname" placeholder="Dein Nachname"> <label for="Email">Email</label> <input type="email" id="email" name="email" placeholder="beispiel@email.de">Sämtliche Placeholder sind bestenfalls überflüssig, andernfalls störend. Weg damit!
Die nicht zusammenpassenden
for-/id-Attribute erwähnte Matthias ja schon.<option value="DEU">Deutschland</option> <option value="AUT">Österreich</option> <option value="CHE">Schweiz</option>Warum erfindest du eigene Länderkürzel anstatt die standardisierten DE, AT und CH zu verwenden?
input[type=text], [type=email], select, textarea { width: 25%;Ich bin mir sicher, dass die Eingabefelder auf meinem Gerät viel zu schmal sind.
input[type=text], [type=email], select, textarea { border: 1px solid #cccccc; outline: none; } input[type=text]:focus, [type=email]:focus, select:focus, textarea:focus { border: 1px solid #999999; }Der Farbunterschied zwischen #cccccc und #999999 dürfte zu gering sein (noch dazu bei 1px Rahmendicke) um sicher wahrgenommen zu werden, zumal du auch noch die Outline entfernt hast. Bei Tastatursteurung muss das fokussierte Element deutlich zu erkennen sein.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Hi,
<option value="DEU">Deutschland</option> <option value="AUT">Österreich</option> <option value="CHE">Schweiz</option>Warum erfindest du eigene Länderkürzel anstatt die standardisierten DE, AT und CH zu verwenden?
Wieso kennst Du ISO-3166 Alpha-3 nicht?
cu,
Andreas a/k/a MudGuard-
@@MudGuard
Wieso kennst Du ISO-3166 Alpha-3 nicht?
Wieso? Weil ich keine Verwendung für nutzloses Wissen habe.
Wo werden denn die dreibuchstabigen Kürzel verwendet? Ich meine, außer in EinsPhils Anwendung?
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Hi,
Wo werden denn die dreibuchstabigen Kürzel verwendet? Ich meine, außer in EinsPhils Anwendung?
z.B. im Fernsehen bei Sportveranstaltungen.
cu,
Andreas a/k/a MudGuard-
Hallo MudGuard,
vielleicht. ISO 3166-1-Alpha-3, FIFA und IOC-Codierung sind alle dreibuchstabig. Es gibt Überschneidungen, aber auch Unterschiede.
Siehe:
<https://de.wikipedia.org/wiki/ISO-3166-1-Kodierliste> <https://de.wikipedia.org/wiki/FIFA-L%C3%A4nder-Code>Rolf
--
sumpsi - posui - clusi -
@@MudGuard
Wo werden denn die dreibuchstabigen Kürzel verwendet? Ich meine, außer in EinsPhils Anwendung? z.B. im Fernsehen bei Sportveranstaltungen.
Nö, da ist Deutschland GER und die Schweiz SUI. Auch in der von dir verlinkten Tabelle zu finden. Nur bei Österreich AUT stimmt’s überein.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-
Hallo Gunnar,
Wo werden denn die dreibuchstabigen Kürzel verwendet?
Rolf
--
sumpsi - posui - clusi
-
-
-
-
Hallo EinsPhil,
ich habe das jetzt mal in ein jsFiddle kopiert. Der Effekt tritt nicht ein.
Ist das, was Du uns hier zeigst, ALLES, was für die Webseite verantwortlich ist? Tritt der Effekt auch auf, wenn Du es mit einem anderen Gerät testest?
Rolf
--
sumpsi - posui - clusi