achtergrondkleur verdwijnt

hobielasseel · 11 jan 2012

hallo

ik heb een site gemaakt om foto's van de familie op te plaatsen enz van die dingen!

nu heb ik op een bepaalde pagina een foto geplaats en wil ik daarnaast een unordered list plaatsen.

Om ze naast elkaar te plaatsen heb ik het element float gebruikt.echter als ik ze naast elkaar plaats verdwijnt de achtergrondkleur van de div waarin dit alles is geplaatst.

in de html code gaat het hem over regel 212-216

thx bij voorbaat

css

Code:

body{
background-color:#DEDEDE;
margin:0;
}

a{
outline:none;
}

.center{
padding:0;
}

h2#h2nieuwtjes{
color:#838B8B;
text-align:center;
}

#spanipod{
margin:2px;
padding:0px;
float:left; 
height:219px; 
width:112px; 
background:url(../fotos/iphone.png) no-repeat;
background-color:white;
 border-radius:20px; /* CSS3-specificatie */
 -webkit-border-radius:20px; /* Voor webkit-browsers (Safari, Chrome) */
 -moz-border-radius:20px; /* voor de Mozilla-browsers (Firefox) */
 -o-border-radius:20px; /* voor toekomstige Opera versies? */
 -khtml-border-radius:20px; /* voor Konqueror */
}

#iframeipodie{
position:absolute;
margin:56px 0 0 21px;
width:84px;
height:125px;
}

#objectipod{
position:absolute;
margin:56px 0 0 21px;
width:84px;
height:125px;
}

#boven{
background-color:#61B329;
}

#fotoboven{
text-align:center;
}

.naastfotoboven{
text-align:center;
color:#ADFF2F;
}

#gekleurdebalkboven{
background-color:#1E90FF;
}

#divtekst{
background-color:#EEE9E9;
padding:1px;
}

h1{
color:orange;
font-family:Helvetica, Arial, Verdana, sans-serif;
font-size:50px;
}

.tekst{
color:#636363;
font-family:Verdana, Arial, sans-serif, Helvetica;
}

.wiebenik{
margin:10px;
float:left;

}

a.balkonder{
text-decoration:none;
}

a.balkonder:hover{
color:gray;
text-decoration:underline;
}

.balkonder{
font-size:11px;
margin:15px;
margin-left:0;
margin-top:0;
float:left;
color:blue;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--Kopieren van code is toegestaan mits voorafgaande toestemming van de auteur.
	Stuur hiervoor een mail naar de auteur via de link onderaan de pagina: suggesties aan de webmaster-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl">
	<head>
		<title>Luka's en allah's site</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta name="robots" content="follow,index" />
		<meta name="description" content="site van Luka en allah Lasseel" />
		<meta name="language" content="nederlands" />
		<meta name="web_author" content="Lasseel Hobie" />
		<link rel="shortcut icon" href="favicon.ico" />
		<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
		<link rel="stylesheet" media="all" href="../css/opbouw.css" />
		<link rel="stylesheet" media="all" href="../css/opmaak.css" />
		<link rel="stylesheet" media="all" href="../css/nav.css" />
		<!--[if lte IE 8]>
			<script type="text/javascript" src="../javascript/curvycorners.js"></script>
		<![endif]-->
	</head>
	<body>
		<!--[if lte IE 6]>
			<script type="text/javascript">
				window.location="foutmeldingen/iflteie6.html";
			</script>
		<![endif]-->
		<script type="text/javascript">
			//<![CDATA[ 
			var schermbreedte = 1024
			var schermhoogte = 768
				if ((screen.width < schermbreedte) && (screen.height < schermhoogte))
				{
					window.location="foutmeldingen/resolution800x600.html";
				}
				else
				{
				}
			//]]>
		</script>
		<div class="nieuwtjes">
			<script type="text/javascript" src="../javascript/verjaardagen.js"></script>
			<h2 id="h2nieuwtjes">Nieuwtjes</h2>
			<p>
				<span id="spanipod">			
					<object id="objectipod" data="nieuwtjes.html" type="text/html">
						uw browser ondersteunt geen objecten of ze zijn uitgeschakeleld om deze toch te kunnen bekijken moet u upgraden naar een moderne browser of objecten inschakelen
					</object>
					<!--[if lt IE 9]>
						<iframe id="iframeipodie" src="nieuwtjes.html" border="0" frameborder="0">
							uw browser ondersteunt geen iframes of ze zijn uitgeschakeleld om deze toch te kunnen bekijken moet u upgraden naar een moderne browser of iframes inschakelen
						</iframe>
					<![endif]-->
				</span>
			</p>
		</div>
			<div class="center" id="boven">
				<div class="naastfotoboven">
					<script type="text/javascript" src="../javascript/aftelluka.js"></script>
				</div>
				<div id="fotoboven">
					<img src="../fotos/fotoboven/fotoboven.jpg" alt="foto van luka en allah" />
				</div>
				<div class="naastfotoboven">
					<script type="text/javascript" src="../javascript/aftelallah.js"></script>
				</div>
			</div>
		<div id="gekleurdebalkboven">
		</div>
		<div class="center">
		<!--begin navigation-->
			<ul id="nav">
				<li class="navli" style="width:74px;">
					<a href="home.html">
						home
					</a>
				</li>
				<li class="navli">
					<a href="#">
						wie zijn wij
					</a>
					<ul class="navul" style="width:155px;">
						<li class="navulli">
							<a href="luka.html">
								Luka
							</a>
						</li>
						<li class="navulli">
							<a href="allah.html">
								allah
							</a>
						</li>
						<li class="navulli">
							<a href="ouders.html">
								ouders
							</a>
						</li>
						<li class="navulli">
							<a href="grootouders.html">
								grootouders
							</a>
						</li>
						<li class="navulli">
							<a href="nonkelentante.html">
								nonkel en tantes
							</a>
						</li>
						<li class="navulli">
							<a href="verrefamilie.html">
								verre familie
							</a>
						</li>
					</ul>
				</li>
				<li class="navli" style="width:155px;">
					<a href="#">
						publieke foto's
					</a>
					<ul class="navul" style="width:225px;">
						<li class="navulli">
							<a href="fotosluka.html">
								foto's van luka
							</a>
						</li>	
						<li class="navulli">
							<a href="fotosallah.html">
								foto's van allah
							</a>
						</li>
						<li class="navulli">
							<a href="fotoslukaenallah.html">
								fotos' van Luka en allah
							</a>
						</li>
					</ul>
				</li>
				<li class="navli" style="width:135px;">
					<a href="#">
						priv&eacute; foto's
					</a>
					<ul class="navul" style="width:280px;">
						<li class="navulli">
							<a href="privatefotosfotosluka.html">
								priv&eacute; foto's van luka
							</a>
						</li>	
						<li class="navulli">
							<a href="privatefotosallah.html">
								priv&eacute; foto's van allah
							</a>
						</li>
						<li class="navulli">
							<a href="privatefotoslukaenallah">
								priv&eacute; fotos' van Luka en allah
							</a>
						</li>
					</ul>
				</li>
				<li class="navli">
					<a href="#">
						contact
					</a>
					<ul class="navul" style="width:170px;">
						<li class="navulli">
							<a href="gastenboek.html">
								gastenboek
							</a>
						</li>
						<li class="navulli">
							<a href="contactmetluka.html">
								contact met luka
							</a>
						</li>
						<li class="navulli">
							<a href="contactmetallah.html">
								contact met allah
							</a>
						</li>
					</ul>
				</li>
				<li class="navli">
					<a href="#">
						startcenter
					</a>
					<ul class="navul" style="width:230px;">
						<li class="navulli">
							<a href="http://webs.com/startcenterluka.html"  onclick="window.open(this.href); return false;">
								startcenter Luka
							</a>
						</li>
						<li class="navulli">
							<a href="http://webs.com/startcenterallah.html"  onclick="window.open(this.href); return false;">
								startcenter allah
							</a>
						</li>
						<li class="navulli">
							<a href="http://webs.com/startcenterlukaenallah.html"  onclick="window.open(this.href); return false;">
								startcenter luka en allah
							</a>
						</li>
						<li class="navulli">
							<a href="http://webs.com/startcenter.html"  onclick="window.open(this.href); return false;">
							 startcenter
							</a>
						</li>
					</ul>
				</li>
			</ul>
		<!--end navigation-->
		</div>
		<div class="center" id="divtekst">
		<!--begin text-->		
			<ul class="wiebenik"> 
				<li>hsdkj</li>
				<li>djkjqsdhjfd</li>
			</ul>
			<img src="../fotos/wiebenik/luka.jpg" alt="foto van luka" class="wiebenik"/>
		<!--end text-->
		</div>
		<div style="clear:both;"><div>
		<div class="center">
		<!--begin balk onder-->
			<a href="disclaimer.html" class="balkonder">Disclaimer</a>
			<a href="suggestiesaandewebmaster.html" class="balkonder">Suggesties aan de webmaster</a>
			<a href="zoeken.html" class="balkonder">Zoeken</a>
			<p class="balkonder">
				laatst bijgewerkt op:
				<script type="text/javascript">
					document.write(document.lastModified);
				</script>
			</p>
			<p class="balkonder">
				hobielasseel &copy;
				<script type="text/javascript">
					var theDate=new Date()
					document.write(theDate.getFullYear())
				</script> 
			</p>
		<!--end balkonder-->
		</div>
	</body>
</html>

Gammort · 11 jan 2012

Probeer in css eens background in plaats van background-color te gebruiken, ik heb er ook wel eens gezeur mee gehad :/

Code:

body {
background:#333333;
}

hobielasseel · 12 jan 2012

heb ik geprobeerd maar helpt niet het gaat hem hier niet over de body maar over de div met id divtekst?

csshunter · 12 jan 2012

Hoi hobielasseel,
Heb je dit al eens geprobeerd:

HTML:

<div class="center" id="divtekst">
    <!--begin text-->       
    <ul class="wiebenik"> 
        <li>hsdkj</li>
        <li>djkjqsdhjfd</li>
    </ul>
    <img src="../fotos/wiebenik/luka.jpg" alt="foto van luka" class="wiebenik"/>
    <!--end text-->
    <div class="clear"><!-- floats vrijmaken --></div>
</div>

Met als css erbij:

Code:

.clear {
    clear: both;
    }

Toelichting:
Een "float" wordt buiten de "normal flow" (gewone volgorde) van de html geplaatst, en de <div> eromheen heeft dan geen hoogte: kan dus ook geen achtergrondkleur hebben.
Met een "clear" ga je door onder een gefloat element. Hier met een soort onzichtbaar element dat geen hoogte maar wel 100% breedte heeft. Dan komt het eind van de omvattende <div> daaronder: die <div> krijgt hoogte en ook z'n achtergrondkleur terug.

Met vriendelijke groet,
CSShunter

hobielasseel · 13 jan 2012

dit was de oplossing bedankt csshunter

achtergrondkleur verdwijnt

hobielasseel

Gebruiker

Gammort

Gebruiker

hobielasseel

Gebruiker

csshunter

Meubilair

hobielasseel

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy