Divs passen niet in div container
Ik plaats meerdere divs in een div container, volgens mij de juiste (passende) widths en heights.
Nu ziet het er goed uit in Chrome, Opera, Firefox en Safari maar in Explorer past het niet.
Vreemd of niet goed gescript?
Opbouw divs:
1
1
2 naast elkaar
2 naast elkaar
2 naast elkaar
2 naast elkaar
2 naast elkaar
In de layout zit tussen de divs een ruimte zodat er blok vorming ontstaat.
Hieronder stukje betreffende 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
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
#container-kolom3 { /* naast main */
width: 278px;
height: 800px;
padding-top: 8px;
padding-left: 5px;
padding-right: 0px;
float:left;
}
#kolom3-01 {
width: 278px;
height: 20px;
background-image: url(grfx/background/kolom3-01.gif);
}
#kolom3-logo {
width: 278px;
height: 136px;
margin-top: 7px;
background-image: url(grfx/background/kolom3-logo.jpg);
}
#kolom3-02a {
width: 137px;
height: 137px;
margin-top: 5px;
background-image: url(grfx/background/kolom3-02a.jpg);
float: left;
}
#kolom3-02b {
width: 137px;
height: 137px;
margin-top: 5px;
margin-left: 4px;
/* background-image: url(grfx/background/kolom3-02b.jpg); */
background-image: url(grfx/background/kolom3-02b-sfeer.jpg);
float: left;
}
#kolom3-03a {
width: 137px;
height: 136px;
margin-top: 5px;
/* background-image: url(grfx/background/kolom3-03a.jpg); */
background-image: url(grfx/background/kolom3-03a-talent.jpg);
float: left;
}
#kolom3-03b {
width: 137px;
height: 136px;
margin-top: 5px;
margin-left: 4px;
background-image: url(grfx/background/kolom3-03b.jpg);
float: left;
}
#kolom3-04a {
width: 137px;
height: 137px;
margin-top: 5px;
background-image: url(grfx/background/kolom3-04a.jpg);
float: left;
}
#kolom3-04b {
width: 137px;
height: 137px;
margin-top: 5px;
margin-left: 4px;
/* background-image: url(grfx/background/kolom3-04b.jpg); */
background-image: url(grfx/background/kolom3-04b-fashion.jpg);
float: left;
}
#kolom3-05a {
width: 137px;
height: 136px;
margin-top: 5px;
/* background-image: url(grfx/background/kolom3-05a.jpg); */
background-image: url(grfx/background/kolom3-05a-sfeer.jpg);
float: left;
}
#kolom3-05b {
width: 137px;
height: 136px;
margin-top: 5px;
margin-left: 4px;
background-image: url(grfx/background/kolom3-05b.jpg);
float: left;
}
#kolom3-06a {
width: 137px;
height: 19px;
margin-top: 8px;
background-image: url(grfx/background/kolom3-06a.gif);
float: left;
}
#kolom3-06b {
width: 137px;
height: 19px;
margin-top: 8px;
margin-left: 4px;
background-image: url(grfx/background/kolom3-06b.gif);
float: left;
}
width: 278px;
height: 800px;
padding-top: 8px;
padding-left: 5px;
padding-right: 0px;
float:left;
}
#kolom3-01 {
width: 278px;
height: 20px;
background-image: url(grfx/background/kolom3-01.gif);
}
#kolom3-logo {
width: 278px;
height: 136px;
margin-top: 7px;
background-image: url(grfx/background/kolom3-logo.jpg);
}
#kolom3-02a {
width: 137px;
height: 137px;
margin-top: 5px;
background-image: url(grfx/background/kolom3-02a.jpg);
float: left;
}
#kolom3-02b {
width: 137px;
height: 137px;
margin-top: 5px;
margin-left: 4px;
/* background-image: url(grfx/background/kolom3-02b.jpg); */
background-image: url(grfx/background/kolom3-02b-sfeer.jpg);
float: left;
}
#kolom3-03a {
width: 137px;
height: 136px;
margin-top: 5px;
/* background-image: url(grfx/background/kolom3-03a.jpg); */
background-image: url(grfx/background/kolom3-03a-talent.jpg);
float: left;
}
#kolom3-03b {
width: 137px;
height: 136px;
margin-top: 5px;
margin-left: 4px;
background-image: url(grfx/background/kolom3-03b.jpg);
float: left;
}
#kolom3-04a {
width: 137px;
height: 137px;
margin-top: 5px;
background-image: url(grfx/background/kolom3-04a.jpg);
float: left;
}
#kolom3-04b {
width: 137px;
height: 137px;
margin-top: 5px;
margin-left: 4px;
/* background-image: url(grfx/background/kolom3-04b.jpg); */
background-image: url(grfx/background/kolom3-04b-fashion.jpg);
float: left;
}
#kolom3-05a {
width: 137px;
height: 136px;
margin-top: 5px;
/* background-image: url(grfx/background/kolom3-05a.jpg); */
background-image: url(grfx/background/kolom3-05a-sfeer.jpg);
float: left;
}
#kolom3-05b {
width: 137px;
height: 136px;
margin-top: 5px;
margin-left: 4px;
background-image: url(grfx/background/kolom3-05b.jpg);
float: left;
}
#kolom3-06a {
width: 137px;
height: 19px;
margin-top: 8px;
background-image: url(grfx/background/kolom3-06a.gif);
float: left;
}
#kolom3-06b {
width: 137px;
height: 19px;
margin-top: 8px;
margin-left: 4px;
background-image: url(grfx/background/kolom3-06b.gif);
float: left;
}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="container-kolom3">
<div id="kolom3-01"></div>
<div id="kolom3-logo"></div>
<div id="kolom3-02a"></div>
<div id="kolom3-02b"></div>
<div id="clear"></div>
<div id="kolom3-03a"></div>
<div id="kolom3-03b"></div>
<div id="clear"></div>
<div id="kolom3-04a"></div>
<div id="kolom3-04b"></div>
<div id="clear"></div>
<div id="kolom3-05a"></div>
<div id="kolom3-05b"></div>
<div id="clear"></div>
<div id="kolom3-06a"></div>
<div id="kolom3-06b"></div>
<div id="clear"></div>
</div>
<div id="kolom3-01"></div>
<div id="kolom3-logo"></div>
<div id="kolom3-02a"></div>
<div id="kolom3-02b"></div>
<div id="clear"></div>
<div id="kolom3-03a"></div>
<div id="kolom3-03b"></div>
<div id="clear"></div>
<div id="kolom3-04a"></div>
<div id="kolom3-04b"></div>
<div id="clear"></div>
<div id="kolom3-05a"></div>
<div id="kolom3-05b"></div>
<div id="clear"></div>
<div id="kolom3-06a"></div>
<div id="kolom3-06b"></div>
<div id="clear"></div>
</div>
Gewijzigd op 23/02/2011 14:09:45 door Harry Hartman
Het juiste doctype wordt in jou geval:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Even iets anders:
Het moet op de eerste regel staan, aangezien ik ook stukjes php in de code verder op heb staan, is de het opgeslagen als .php. Tot zover geen probleem. Maar nu plaats ik ook session_start() en die moet ook bovenaan staan... Dat gaat dus niet samen...
Harray Hartman op 23/02/2011 14:37:03:
Het moet op de eerste regel staan, aangezien ik ook stukjes php in de code verder op heb staan, is de het opgeslagen als .php. Tot zover geen probleem. Maar nu plaats ik ook session_start() en die moet ook bovenaan staan... Dat gaat dus niet samen...
Op de eerste regel van de broncode. PHP wordt gegenereerd voordat de broncode naar de browser wordt gestuurd. Daarom zie je ook geen PHP in de broncode en staat je doctype op regel 1.
En de hoofdregel van PHP is: Je moet alle verwerking zoveel mogelijk boven het doctype verwerken.
Heel erg bedankt voor de reacties.