CSS| Achtergrond verdwijnt in het niets

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Vincent

Vincent

20/05/2009 16:27:00
Quote Anchor link
Goedendag,

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)
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
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>


Nu het probleem dat de grijze achtergrond kleur van de content div weg valt:
http://i44.tinypic.com/3131xxg.png
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
 
PHP hulp

PHP hulp

01/12/2021 05:10:54
 
Emmanuel Delay

Emmanuel Delay

20/05/2009 16:48:00
Quote Anchor link
Ik heb hier altijd veel aan gehad: http://www.sceneone.nl/
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
 
Mathijs -

Mathijs -

20/05/2009 18:24:00
Quote Anchor link
zet voor de gein is onder aan al je floats, in de content div:

<div style="height:0px;font-size:0px;line-height:0px;clear:both;">&nbsp;</div>
 
Emmanuel Delay

Emmanuel Delay

20/05/2009 19:00:00
Quote Anchor link
Ah ja, daar gaat het dus om.

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)
 
Mathijs -

Mathijs -

20/05/2009 19:15:00
Quote Anchor link
ik idd ook.. wel een &nbsp; er in.
en dus zorgen dat die geen ruimte in neemt.

mja.. als voorbeeld leek t mij makkelijker wat inline css neer te gooien.
 
Jeroen G

Jeroen G

20/05/2009 19:32:00
Quote Anchor link
Probeer in het vervolg eens te beginnen met een globale CSS RESET.. Dat kan je doen door een van de vele varianten te gebruiken.. Bijvoorbeeld http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

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
 
Vincent

Vincent

22/05/2009 13:52:00
Quote Anchor link
Niks werkte dus heb 't probleem verkleint tot het volgende.
Wanneer ik deze code heb:
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
<!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>


Zie je dit:
http://i44.tinypic.com/oub18h.png

terwijl je zonder het div "vak" erin dit ziet:

http://i43.tinypic.com/2m60qhu.png

Hoe laat je dat zwarte vak ook alweer mee rekken?

Groeten, Vincent
 
Mathijs -

Mathijs -

22/05/2009 14:03:00
Quote Anchor link
door onderaan in het element een clear:left te geven op een extra element
 
Vincent

Vincent

22/05/2009 14:06:00
Quote Anchor link
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
<!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>


geeft nog steeds zelfde effect?
 
Emmanuel Delay

Emmanuel Delay

22/05/2009 14:09:00
Quote Anchor link
Toon eens hoe het resultaat zou moeten zijn.
 
Mathijs -

Mathijs -

22/05/2009 14:10:00
Quote Anchor link
ok
<div id="content-div">
<div id="vak">
Hoi
</div>
<div style="height:0px;font-size:0px;line-height:0px;clear:both;">&nbsp;</div>
</div>
Gewijzigd op 01/01/1970 01:00:00 door Mathijs -
 
Emmanuel Delay

Emmanuel Delay

22/05/2009 14:14:00
Quote Anchor link
Hehe, je was me voor.

Dit had ik (zelfde principe dus.)
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
<!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">&nbsp;</div>
    </div>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Emmanuel Delay
 
Vincent

Vincent

22/05/2009 14:20:00
Quote Anchor link
Tnx, dat werkt wel :)
 



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.