hmm: Erster CSS Versuch

SELF-Forum

Erster CSS Versuch

hmm
– Informationen zu den Bewertungsregeln

Hi Leute,

ich bau gerad wieder an meiner Test Seite rum.

Aktuell Sieht sie so aus:

Seite

Hier mein HTML Code:

<!DOCTYPE html>
<html lang='de'>
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/willkommen.css" rel="stylesheet" type="text/css"/>
    <title>Geschenke Empfehlungsdienst</title>
</head>
<body>
    <header>
        <h1>Geschenke Empfehlungsdienst</h1>  
    </header>
  
    <main>
    	<form method="post" class="login">
            <label for="login_email">E-Mail-Adresse</label>
			<input id="login_email" name="email" type="email" placeholder="max.muster@example.com" required>
			<label for="login_password">Passwort</label>
			<input name="login_password" type="password" placeholder="geheim" required>
            <button>anmelden</button>
		</form>
		
		<img src="img/present-307984_1280.png" width="300" height="300" class="bild">
		
		<form method="post" class="registrieren">
			<fieldset>
		    	<legend>Andrede</legend>
		    	<label for="reg_keine">keine Anrede</label>
		    	<input id="reg_keine" name="Anrede" type="radio" value="not" />
			  	<label for="reg_herr">Herr</label>
			  	<input id="reg_herr" name="Anrede" type="radio" value="m" />
			  	<label for="reg_frau">Frau</label>
			  	<input id="reg_frau" name="Anrede" type="radio" value="f" />
			</fieldset>
			<p><label for="reg_vorname">Vorname</label>
			<input id="reg_vorname" maxlength="50" name="Vorname" placeholder="Max" required/>
			<label for="reg_name">Nachname</label>
			<input id="reg_name" name="Nachname" placeholder="Mustermann" required/></p>
			<p><label for="reg_email">E-Mail</label>
			<input id="reg_email" name="Email" type="email" placeholder="max.muster@example.com" required/></p>
			<p><label for="reg_pass">Passwort</label>
			<input id="reg_pass" name="Pass" type="password" placeholder="geheim" required/></p>
			<p><label for="reg_gb">Geburtstag</label>
			<input id="reg_gb" type="date" id="gebdat"/></p>
			<button>registrieren</button>
		</form>
	</main>
    
    <footer>
		<a href="#">AGB</a> |
		<a href="#">Impressum</a>
	</footer>
</body>
</html>

und hier mein css:

header {
	display: block;
	top:0px;
	left:0px;
	right:0px;
	position:absolute;
	padding:0px;
	text-align:left;
	font-weight:bold;
	color:#FAFAFA;
	background: #3b5998;
	width: 100%;
	height: 82px;
	z-index:3;	
}

.login {
    float: right;
    top:0px;
    width: 600px;
    height: 0px;
    margin: 10px;
}

main {
	padding: 100px 0 400px;
	background-color: white;
	position: relative;
	right: 0;
	bottom: 0;
	left: 0;
    text-align: center;
	color: black;
}

.registrieren {
    padding: 100px 0 400px;
    float: right;
    margin: 10px;
}

.bild {
	padding: 100px 0 400px;
	float: left;
	margin: 10px;
}

footer {
	background-color: #F2F2F2;
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1rem;
    text-align: center;
	color: #045FB4;
}

Fragen:

  1. Ist der CSScode so gut oder kann ich was verbessern?

  2. Ich hätte das 2ANMELDEN2 zEUG GERNE IM header rechts oben, wie mach ich das?

  3. Ich hätte gerne die Beschreibungen der Inputfelder (die labels) in kleiner Schrift über den Inputfeldern, wie mach ich das?

  4. Ich hätte die elemente der registrieren form gerne tabellarisch untereinander und nicht so chaotisch, wie mach ich das?

  5. aktuell sind in meinem css die beiden float-boxen .bild und .regstrieren links und rechts angeordnet, ich hätte sie aber gerne mittig links und rechts, d.h. beide boxen sollen möglichst nah zusammenstehen. wie mach ich das?

  6. habt ihr ideen zur verbesserung des designs? ich hab als vorlage erstmal die seite von facebook genommen um erstmal einen einstieg zu bekommen.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Erster CSS Versuch

    Gunnar Bittersmann Homepage des Autors (Versionen)
    +1 Informationen zu den Bewertungsregeln

    @@hmm

    Aktuell Sieht sie so aus:

    Du hast dir viel Mühe gegeben, die Hinweise aus anderen Threads umzusetzen. \o/

    Einiges gibt es noch anzumerken:

        <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">

    Das wird nichts. Das sind zwei verschiede Angaben, die kannst du nicht in ein meta-Element packen. Also trennen:

        <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

                <label for="login_email">E-Mail-Adresse</label>
			<input id="login_email" name="email" type="email" placeholder="max.muster@example.com" required>
			<label for="login_password">Passwort</label>
			<input name="login_password" type="password" placeholder="geheim" required>

    Die Platzhirsche – äh -halter sind sinnfrei. Nutzer wissen, wie eine E-Mail-Adresse aussieht und dass ein Passwort geheim ist. Platzhalter verwirren nur. Weg damit!

    		<img src="img/present-307984_1280.png" width="300" height="300" class="bild">

    Dem Bild fehlt ein Alternativtext. Sollte die Bildbeschreibung als Bildunterschrift vorhanden sein oder sollte das Bild nur Dekorationszwecken dienen, muss trotzdem das alt-Attribut vorhanden sein (mit Leerstring als Wert: alt=""); Screenreader lesen andernfalls den Dateinamen vor.

    Im Fall Dekorationszweck könnte auch ein role="presentation" nicht schaden. Allerdings sollte das Bild dann gar nicht im HTML auftauchen, sondern als Hintergrundbild im CSS.

    Wie dem auch sei, eine Klasse "bild" ist auch recht überflüssig. Es ist doch klar, dass es sich bei img um ein Bild handelt.

    			<fieldset>
		    	<legend>Andrede</legend>
		    	<label for="reg_keine">keine Anrede</label>
		    	<input id="reg_keine" name="Anrede" type="radio" value="not" />
			  	<label for="reg_herr">Herr</label>
			  	<input id="reg_herr" name="Anrede" type="radio" value="m" />
			  	<label for="reg_frau">Frau</label>
			  	<input id="reg_frau" name="Anrede" type="radio" value="f" />
			</fieldset>

    Löbliche Erwähnung verdient das fieldset um die Gruppe von Radiobuttons.

    Es ist aber bei Radiobuttons (und Checkboxen) gängige Konvention, dass diese vor dem zugehörigen Label stehen.

    Weil bei dir dazu auch noch der Abstand zwischen Radiobutton und Label des nächsten Radiobuttons fehlt, würde man denken, wenn man in deinem Formular den ersten Radiobutton anclickt, man hätte „Herr“ gewählt; beim zweiten „Frau“.

    Also Radiobuttons vor die Labels und Abstand – dann zwischen Label des vorigen Radiobuttons und nächstem Radiobutton.

    Noch besser dürfte es sein, Radiobuttons untereinander anzuordnen.

    			<p><label for="reg_gb">Geburtstag</label>
			<input id="reg_gb" type="date" id="gebdat"/></p>

    Hier sollte ein Hinweis angebracht sein, welche Eingabe erwartet wird. Tag, Monat, Jahr? Sicher nicht, sondern Tag und Monat.

    header {
	display: block;
	top:0px;
	left:0px;
	right:0px;
	position:absolute;
	padding:0px;
	text-align:left;
	font-weight:bold;
	color:#FAFAFA;
	background: #3b5998;
	width: 100%;
	height: 82px;
	z-index:3;	
}

    Absolute Positionierung ist keine gute Idee. 82px ist eine magic number – keine gute Idee. Was, wenn „Geschenke Empfehlungsdienst“ nicht in eine Zeile passt? Dann passt es nicht in 82 Pixel.

    Übrigens sollte zwischen „Geschenke“ und „Empfehlungsdienst“ sicher kein Deppenleerzeichen, sondern ein Bindestrich stehen.

    3. Ich hätte gerne die Beschreibungen der Inputfelder (die labels) in kleiner Schrift über den Inputfeldern, wie mach ich das?

    Labels oder/und Eingabefelder auf display: block setzen. Aber nicht Radiobuttons und Checkboxen sowie deren Labels.

    4. Ich hätte die elemente der registrieren form gerne tabellarisch untereinander und nicht so chaotisch, wie mach ich das?

    Hat sich das mit 3. erledigt?

    5. aktuell sind in meinem css die beiden float-boxen .bild und .regstrieren links und rechts angeordnet, ich hätte sie aber gerne mittig links und rechts, d.h. beide boxen sollen möglichst nah zusammenstehen. wie mach ich das?

    Mir ist nicht klar, wie’s aussehen soll.

    6. habt ihr ideen zur verbesserung des designs?

    Klar doch. Der Nutzer braucht nur jeweils eins der beiden Formulare. Wenn sie schon registriert ist, braucht sie nur das Login-Formular, andernfalls nur das Registrierungs-Formular.

    Man könnte die Formulare in Tabs tun, so dass der Nutzer nur jeweils eins angezeigt bekommt und zwischen ihnen umschalten kann.

    LLAP 🖖

    --
    „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Erster CSS Versuch

      Matthias Apsel Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo Gunnar Bittersmann,

      Die Platzhirsche – äh -halter sind sinnfrei. Nutzer wissen, wie eine E-Mail-Adresse aussieht und dass ein Passwort geheim ist. Platzhalter verwirren nur. Weg damit!

      Kann man so sehen, muss man aber nicht. Zumindest würde ich den Platzhalter bei Passwort „Ihr Passwort“ nennen.

      Bis demnächst
      Matthias

      --
      Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Erster CSS Versuch

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Matthias Apsel

        Die Platzhirsche – äh -halter sind sinnfrei. Nutzer wissen, wie eine E-Mail-Adresse aussieht und dass ein Passwort geheim ist. Platzhalter verwirren nur. Weg damit!

        Kann man so sehen, muss man aber nicht.

        Ich finde die Argumentation „The blank input field acts as an affordance to enter data. Users look to the unfilled boxes to determine what they need to act on. […] Placeholder text can diminish the actionable element of an input“ im verlinkten Atrikel durchaus schlüssig.

        Zumindest würde ich den Platzhalter bei Passwort „Ihr Passwort“ nennen.

        ?? Das steht doch schon im Label!

        LLAP 🖖

        --
        „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Erster CSS Versuch

          Matthias Apsel Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hallo Gunnar Bittersmann,

          Ich finde die Argumentation „The blank input field acts as an affordance to enter data. Users look to the unfilled boxes to determine what they need to act on. […] Placeholder text can diminish the actionable element of an input“ im verlinkten Atrikel durchaus schlüssig.

          Ein Grund, sicherzustellen, das Felder mit Platzhaltern als „noch auszufüllen“ erkennbar sind.

          Zumindest würde ich den Platzhalter bei Passwort „Ihr Passwort“ nennen. ?? Das steht doch schon im Label!

          Wenn ich einen Platzhalter für ein Passwortfeld verwenden würde, würde ich kein Beispielpasswort nehmen.

          Bis demnächst
          Matthias

          --
          Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Erster CSS Versuch

            Gunnar Bittersmann Homepage des Autors
            – Informationen zu den Bewertungsregeln

            @@Matthias Apsel

            Wenn ich einen Platzhalter für ein Passwortfeld verwenden würde, würde ich kein Beispielpasswort nehmen.

            Vor der Frage, was man denn als Placeholder-Text nehmen könnte, steht die Frage, ob man denn überhaupt einen Placeholder-Text verwenden sollte.

            Bei einem Passwort-Eingabefeld fällt mir kein sinnvoller Grund ein, das zu tun.

            LLAP 🖖

            --
            „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln