Zelf zie ik het probleem niet, waarschijnlijk omdat ik er te lang mee bezig ben.
Toch vraag ik of een van jullie iets ziet in de opbouw van css/html.
html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>new page</title>
<link type="text/css" href="css/style.css" rel="stylesheet" ></link>
</head>
<body>
<div class="wrapper">
<form name="info" id="form">
<input class="fields" id="first-name" placeholder="Voer uw voornaam in" type="text" name="fname" value="" autocomplete="off" />
<input class="fields" id="last-name" placeholder="Voer uw achternaam in" type="text" name="lname" value="" autocomplete="off" />
<button type="submit" name="submit" id="submit">send</button>
</form>
</div>
</body>
</html>
css:
body {
margin: 0;
padding: 0;
font-family:
sans-serif; font-size: 10pt;
z-index:0;
}
.wrapper {
width:240px;
margin-left:auto;
margin-right:auto;
z-index:1;
}
#form {
margin-top: 50px;
}
input.fields {
border-top:none;
border-left:none;
border-right:none;
color:#BD1978;
font-size:18px;
margin-bottom:12px;
background: transparent;
outline: 0;
width:100%;
clear:both;
float:left;
}
Momenteel is het zo dat de body 50px omlaag opschuift, dit komt door de margin-top op het element #form.
Het zou toch moeten zijn dat hij de margin-top binnen de class wrapper moet maken?
Hoe kan ik dit oplossen, heb diversen dingen geprobeerd. De class wrapper moet top:0px blijven ;-)
Gr. Jop
