PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
V

CSS| Achtergrond verdwijnt in het niets

Door Vincent op 20-05-2009 16:27
2.033 views
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:


<!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:

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
E
Emmanuel Delay
20-05-2009 16:48
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.
M
Mathijs -
20-05-2009 18:24
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>
E
Emmanuel Delay
20-05-2009 19:00
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)
M
Mathijs -
20-05-2009 19:15
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.
V
Vincent
22-05-2009 13:52
Niks werkte dus heb 't probleem verkleint tot het volgende.
Wanneer ik deze code heb:

<!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:


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



Hoe laat je dat zwarte vak ook alweer mee rekken?

Groeten, Vincent
M
Mathijs -
22-05-2009 14:03
door onderaan in het element een clear:left te geven op een extra element
V
Vincent
22-05-2009 14:06 

<!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?
E
Emmanuel Delay
22-05-2009 14:09
Toon eens hoe het resultaat zou moeten zijn.
M
Mathijs -
22-05-2009 14:10
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>

Reageren

Inloggen om te reageren