Divs passen niet in div container

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Harry Hartman

Harry Hartman

23/02/2011 14:01:03
Quote Anchor link
Ik kom er even niet uit!
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)
PHP script in nieuw venster Selecteer het PHP script
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
#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;
}


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
Gewijzigd op 23/02/2011 14:09:45 door Harry Hartman
 
PHP hulp

PHP hulp

22/12/2024 20:24:44
 
Wouter J

Wouter J

23/02/2011 14:15:28
Quote Anchor link
Kan je misschien een online voorbeeld geven of de hele HTML code? Want ik vermoed dat je geen doctype hebt, want hij werkt wel normaal (behalve in IE5).
 
Harry Hartman

Harry Hartman

23/02/2011 14:19:01
Quote Anchor link
Ik heb <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> op de eerste regel staan...
 
Wouter J

Wouter J

23/02/2011 14:23:22
Quote Anchor link
Dat dacht ik dus al. Je moet altijd een geldig doctype en dus moet er nog een dtd link bij.

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">
 
Harry Hartman

Harry Hartman

23/02/2011 14:37:03
Quote Anchor link
Oohww... zucht... en daar kijk ik dan een uur overheen! Bedankt Wouter!

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...
 
Wouter J

Wouter J

23/02/2011 15:04:02
Quote Anchor link
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.
 
Harry Hartman

Harry Hartman

23/02/2011 15:18:44
Quote Anchor link
OK, duidelijk, opgelost!
Heel erg bedankt voor de reacties.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.