mikrocontroller.net

Forum: PC-Programmierung Label vertikal verschieben HTML


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
von Alex A. (Firma: AlexTbg) (alextbg)


Bewertung
-3 lesenswert
nicht lesenswert
Hey, ich bin gerade dabei eine Log-in Seite für eine Website zu 
erstellen. Allerdings möchte ich, dass das Label und er Log-In Text zu 
hoch oben sind. Da ich auch im Internet nichts nützliches finden konnte, 
wollte ich mal schauen ob heir jemand einen guten Rat hat. Das ganze 
Label sollte entweder mittig oder um eine gewisse Länge nach unten 
versetzt werden. Das gleiche gilt auch für den Log-in Text. Danke für 
die Hilfe
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        label {
            display: block;
            font: .9rem 'Fira Sans', sans-serif;
        }

        input[type='submit'],
        label {
            margin-top: 1rem;
        }
        .login{
            width: 80rem;
            height: 40rem;
            margin: auto auto;
            box-shadow: 0 0 10rem black;
            text-align: center;
            color: orange;
        
        }
        .errormsg{
            color: red;
        }
        .errormsg-valid{
            color: green;
        }
    </style>
    <meta charset="UTF-8">
    <title>Log-IN</title>
</head>
<body>
<div class="login">
    <div>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
    </div>

    <div>
        <label for="pass">Password:</label>
        <input type="password" id="pass" name="password"
               minlength="8" required>
    </div>

    <p class = "errormsg" id = "errormsg"></p>
    <input type="submit" value="Sign in" onclick="validLogin()">


</div>

</body>

</html>

von DPA (Gast)


Bewertung
0 lesenswert
nicht lesenswert
Alex A. schrieb:
> Allerdings möchte ich, dass das Label und er Log-In Text zu
> hoch oben sind.
* { margin-top: 100em; }

Dann ist alles sogar so stark zuweit oben, dass es schon garnichtmehr 
auf dem Bildschirm ist!

von DPA (Gast)


Bewertung
0 lesenswert
nicht lesenswert
Edit: Ich meinte natürlich "* { margin-top: -100em; }", sorry.

von Sahneblubb (Gast)


Bewertung
0 lesenswert
nicht lesenswert
Neue Klasse einfügen:
.centrize {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

Und
<div class="login">
ändern in
<div class="centrize login"><div class="centrize">

Dann noch das letzte
</div>
ändern in
</div></div>

Antwort schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [avrasm]AVR-Assembler-Code[/avrasm]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.