hmm: Erster CSS Versuch

Beitrag lesen

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