CSS| Achtergrond verdwijnt in het niets
Na lange tijd niet site's maken probeer ik het vanaf vandaag weer op te pakken.
Het blijkt dat ik al veel van m'n kennis ben kwijt geraakt..
Dus hierbij mijn probleem:
Eerst de code:
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Broodje Baas</title>
<style type="text/css">
body{
background-color: #F2F5ED;
background-repeat: repeat-x;
margin: 0px;
}
#content-div{
background-color: grey;
margin: 0px auto 0px auto;
width: 800px;
font-family: Century Gothic, sans-serif;
font-size: 14px;
clear: both;
}
#boven{
background-color: #FFC200;
width: 100%;
height: 120px;
}
#menu{
background-color: #FF5B00;
width: 100%;
height: 40px;
}
#upperimage{
background-color: #B80028;
width: 100%;
height: 140px;
}
.left{
background-color: #84002E;
width: 390px;
margin-top: 20px;
float: left;
clear: both;
}
.right{
background-color: #4AC0F2;
width: 390px;
margin-top: 20px;
float: right;
}
#bottom{
background-color: #FFC200;
width: 800px;
height: 20px;
clear: both;
margin-top: 20px;
float: left;
}
</style>
</head>
<body>
<div id="content-div">
<div id="boven">
<br />
<br />
</div>
<div id="menu">
<br />
<br />
</div>
<div id="upperimage">
<br />
<br />
</div>
<div class="left">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div class="right">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div class="left">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div class="right">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id="bottom">
<br />
</div>
</div>
</body>
</html>
<html>
<head>
<title>Broodje Baas</title>
<style type="text/css">
body{
background-color: #F2F5ED;
background-repeat: repeat-x;
margin: 0px;
}
#content-div{
background-color: grey;
margin: 0px auto 0px auto;
width: 800px;
font-family: Century Gothic, sans-serif;
font-size: 14px;
clear: both;
}
#boven{
background-color: #FFC200;
width: 100%;
height: 120px;
}
#menu{
background-color: #FF5B00;
width: 100%;
height: 40px;
}
#upperimage{
background-color: #B80028;
width: 100%;
height: 140px;
}
.left{
background-color: #84002E;
width: 390px;
margin-top: 20px;
float: left;
clear: both;
}
.right{
background-color: #4AC0F2;
width: 390px;
margin-top: 20px;
float: right;
}
#bottom{
background-color: #FFC200;
width: 800px;
height: 20px;
clear: both;
margin-top: 20px;
float: left;
}
</style>
</head>
<body>
<div id="content-div">
<div id="boven">
<br />
<br />
</div>
<div id="menu">
<br />
<br />
</div>
<div id="upperimage">
<br />
<br />
</div>
<div class="left">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div class="right">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div class="left">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div class="right">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id="bottom">
<br />
</div>
</div>
</body>
</html>
Nu het probleem dat de grijze achtergrond kleur van de content div weg valt:
Het komt volgens mij door de floats maar heb geen idee meer hoe ik het moet oplossen..
Hoop dat jullie mij verder kunnen helpen?
Groeten, Vincent
Daar staat ook een stuk over positionering.
Sorry, maar wil je nog eens verduidelijken wat het probleem precies is? Ik snap je vraag niet precies.
Gewijzigd op 01/01/1970 01:00:00 door Emmanuel Delay
<div style="height:0px;font-size:0px;line-height:0px;clear:both;"> </div>
Wat ik meestal doe, is onderaan containers die floatende elementen bevatten dit zetten: <div class="clear"></div>
In css staat zo ongeveer wat Mathijs ook zet.
(Allez, 't komt eigenlijk precies op het zelfde neer)
en dus zorgen dat die geen ruimte in neemt.
mja.. als voorbeeld leek t mij makkelijker wat inline css neer te gooien.
Meer kan je natuurlijk op google vinden:
http://www.google.nl/search?q=css+reset&ie=utf-8&oe=utf-8&aq=t&rls=com.ubuntu:nl:unofficial&client=firefox-a
Wanneer ik deze code heb:
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Broodje Baas</title>
<style type="text/css">
body{
margin: 0;
}
#content-div{
background-color: black;
margin: 0 auto 0 auto;
height: auto;
width: 800px;
}
#vak{
width: 205px;
height: 400px;
float: left;
background-color: purple;
}
</style>
</head>
<body>
<div id="content-div">
<div id="vak">
Hoi
</div>
</div>
</body>
</html>
<html>
<head>
<title>Broodje Baas</title>
<style type="text/css">
body{
margin: 0;
}
#content-div{
background-color: black;
margin: 0 auto 0 auto;
height: auto;
width: 800px;
}
#vak{
width: 205px;
height: 400px;
float: left;
background-color: purple;
}
</style>
</head>
<body>
<div id="content-div">
<div id="vak">
Hoi
</div>
</div>
</body>
</html>
Zie je dit:
terwijl je zonder het div "vak" erin dit ziet:
Hoe laat je dat zwarte vak ook alweer mee rekken?
Groeten, Vincent
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Broodje Baas</title>
<style type="text/css">
body{
margin: 0;
}
#content-div{
background-color: black;
margin: 0 auto 0 auto;
height: auto;
width: 800px;
}
#vak{
width: 205px;
height: 400px;
float: left;
background-color: purple;
clear: left;
}
</style>
</head>
<body>
<div id="content-div">
<div id="vak">
Hoi
</div>
</div>
</body>
</html>
<html>
<head>
<title>Broodje Baas</title>
<style type="text/css">
body{
margin: 0;
}
#content-div{
background-color: black;
margin: 0 auto 0 auto;
height: auto;
width: 800px;
}
#vak{
width: 205px;
height: 400px;
float: left;
background-color: purple;
clear: left;
}
</style>
</head>
<body>
<div id="content-div">
<div id="vak">
Hoi
</div>
</div>
</body>
</html>
geeft nog steeds zelfde effect?
<div id="content-div">
<div id="vak">
Hoi
</div>
<div style="height:0px;font-size:0px;line-height:0px;clear:both;"> </div>
</div>
Gewijzigd op 01/01/1970 01:00:00 door Mathijs -
Dit had ik (zelfde principe dus.)
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Broodje Baas</title>
<style type="text/css">
body{
margin: 0;
}
#content-div{
background-color: black;
margin: 0 auto 0 auto;
height: 100%;
width: 800px;
}
#vak{
width: 205px;
height: 400px;
float: left;
background-color: purple;
}
.clear
{
height: 0;
font-height: 0;
clear: both;
line-height:0px;
}
</style>
</head>
<body>
<div id="content-div">
<div id="vak">
Hoi
</div>
<div class="clear"> </div>
</div>
</body>
</html>
<html>
<head>
<title>Broodje Baas</title>
<style type="text/css">
body{
margin: 0;
}
#content-div{
background-color: black;
margin: 0 auto 0 auto;
height: 100%;
width: 800px;
}
#vak{
width: 205px;
height: 400px;
float: left;
background-color: purple;
}
.clear
{
height: 0;
font-height: 0;
clear: both;
line-height:0px;
}
</style>
</head>
<body>
<div id="content-div">
<div id="vak">
Hoi
</div>
<div class="clear"> </div>
</div>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Emmanuel Delay