Virusscanner tips?
body zakt door margin van ander element
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>
<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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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;
}
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
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
#form {
padding-top: 50px;
}
of
#form {
position: absolute;
top: 50px;
}
padding-top: 50px;
}
of
#form {
position: absolute;
top: 50px;
}
Gewijzigd op 16/04/2015 12:24:20 door Rick B
De padding-top werkt wel normaal :-)