nicht angemeldet
So Leute,
danke für die kommentare, hier mein neues code versuch:
Meine, aktuell an das Design von facebook angelehnte, neue Willkommensseite:
<!DOCTYPE html>
<html lang='de'>
<head>
<meta charset="utf-8">
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen, projection" />
<title>Coffee Game</title>
</head>
<body>
<header id="page-header">
<h1><p>Coffee Game</p></h1>
<form action="" method="get" accept-charset="utf-8">
<div style="position:absolute; right: 20px; top: 20px;">
<table>
<tr>
<th>E-Mail-Adresse</th>
<th>Passwort</th>
</tr>
<tr>
<th><input name="name" type="text" required></th>
<th><input name="password" type="password" required><br></th>
<th><input type="button" onclick="check(this.form)" value="Anmelden"/></th>
</tr>
</table>
</div>
</form>
</header>
<div id="page-content">
<img src="img/present-307984_1280.png" width="300" height="300" align="left">
<form method="post">
<table border="0" cellspacing="0" cellpadding="2" align="right">
<tr>
<td>
<input checked="checked" name="Anrede" type="radio" /> Männlich
<input name="Anrede" type="radio" /> Weiblich
</td>
</tr>
<tr>
<td>
<input id="reg" maxlength="50" name="Vorname" size="25" type="text" value="Vorname" required/>
<input id="reg" name="Nachname" size="25" type="text" value="Nachname" required/>
</td>
</tr>
<tr>
<td>
<input id="reg" name="Email" size="56" type="text" value="E-Mail-Adresse" required/>
</td>
</tr>
<tr>
<td>
<input id="reg" name="Pass" size="56" type="text" value="Neues Passwort" required/>
</td>
</tr>
<tr>
<td>
<h2>Geburtstag</h2>
</td>
</tr>
<tr>
<td>
<input id="reg" id="reg" type="date" id="gebdat">
</td>
</tr>
<tr>
<td>
<input id="submit" type="button" onclick="#" value="Registrieren" />
</td>
</tr>
</table>
</form>
</div>
<footer id="page-footer">
<nav>
<a href="#">AGB's</a> |
<a href="#">Impressum</a>
</nav>
</footer>
</body>
</html>
ich habe einen Ordner css erstellt und dort das hier als screen.css eingepackt:
#page-header {
display: block;
top:0px;
left:0px;
right:0px;
height:20px;
position:fixed;
border:1px solid #888;
padding:0px;
text-align:left;
font-weight:bold;
color:#FAFAFA;
background: #3b5998;
width: 100%;
height: 82px;
z-index:3;
h1 { font-size: 4em;}
}
#page-header_2 {
display: block;
top:0px;
left:0px;
right:0px;
height:20px;
position:fixed;
border:1px solid #888;
padding:0px;
text-align:left;
font-weight:bold;
color:#FAFAFA;
background: #3b5998;
width: 100%;
height: 41px;
z-index:3;
h1 { font-size: 4em;}
}
input[type=button] {
background:#045FB4;
border:1px solid black;
border-style:inset;
font-weight:bold;
color:#FAFAFA;
}
input[id="reg"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input [id="submit"] {
background-color: #31B404;
-moz-border-radius:7px;
cursor: pointer;
color: white;
}
#page-content {
padding: 100px 0 400px;
background-color: white;
position: absolute;
right: 0;
bottom: 0;
left: 0;
text-align: center;
color: black;
}
#page-footer {
background-color: #F2F2F2;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
color: #045FB4;
}
- was sollte ich an am code verbessern?
- Meine Sachen im Header und im page-content sind zuweit auseinander, die will ich mehr mittig haben. wie mache ich das? übrigens habe ich ein open source bild dazugenommen und unter img als present-307984_1280.png eingebunden. wenn ihr euch die seite mal ungucken wollt könnt ihr einfach einen ordner img erstellen und dort ein passend benamtes bild reinpacken.
- leider ist das css nur für meinen bildschirm angepasst, bei jedem anderen bildschirm ist alles verformt, wie ändere ich das?
Gunnar Bittersmann
marctrix
Matthias Apsel
MudGuard