margin-top niet goed
Nu wil ik dat mijn site boven vast zit zeg maar. Dus geen vrije ruimte.
Dit werkt goed tot ik mijn header wil toevoegen.
De header wil ik 5px lager laten beginnen.
Als ik bij de header margin-top: 5px; doe dan komt de hele website omlaag en niet bij de header.
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="stijl.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Hallo
</div>
</div>
<div id="footer">
Test
</div>
</body>
</html>
CSS
* { padding: 0; margin: 0; }
body {
background-image: url(images/layout/bg.jpg);
font-family: Century Gothic, Arial, Helvetica;
font-size: 12px;
color: #000000;
}
#wrapper {
margin: 0 auto;
width: 900px;
height: 600px;
background: #FFF;
border: 1px solid #000;
border-top: none;
}
#header {
width: 890px;
height: 200px;
background: #000;
margin-top: 5px;
margin-left: 5px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="stijl.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Hallo
</div>
</div>
<div id="footer">
Test
</div>
</body>
</html>
CSS
* { padding: 0; margin: 0; }
body {
background-image: url(images/layout/bg.jpg);
font-family: Century Gothic, Arial, Helvetica;
font-size: 12px;
color: #000000;
}
#wrapper {
margin: 0 auto;
width: 900px;
height: 600px;
background: #FFF;
border: 1px solid #000;
border-top: none;
}
#header {
width: 890px;
height: 200px;
background: #000;
margin-top: 5px;
margin-left: 5px;
}
http://jsfiddle.net/rickdgraaff/6BG4J/
Je kan hier zelf zien wat er veranderd is. :)
In deze tutorial krijg je een mooie uitleg
http://sceneone.nl/positionering/positie.php