Witruimte onder website verwijderen

Status
Niet open voor verdere reacties.

soccerke

Gebruiker
Lid geworden
3 apr 2012
Berichten
20
Ik zit nu al uren te zoeken om het laatste beetje witruimte helemaal onderaan mijn website te verwijderen, maar het lukt me maar niet.
Waarschijnlijk zie ik gewoon iets over het hoofd.

De code:

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Boutique Lauretia</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> 
	<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>  
	<link rel="shortcut icon" href="images/lauretia.ico" type="image/x-icon" />
	<script src="js/jquery-1.6.3.min.js" type="text/javascript"></script>
	<script src="js/cufon-yui.js" type="text/javascript"></script>
	<script src="js/cufon-replace.js" type="text/javascript"></script>
	<script src="js/PT_Sans_400.font.js" type="text/javascript"></script>
	<script src="js/PT_Sans_italic_400.font.js" type="text/javascript"></script> 
	<script src="js/Satisfy_400.font.js" type="text/javascript"></script>
	<script src="js/NewsGoth_400.font.js" type="text/javascript"></script>
	<script src="js/FF-cash.js" type="text/javascript"></script> 
	<script src="js/script.js" type="text/javascript"></script>  
	<script src="js/tms-0.3.js" type="text/javascript"></script>
	<script src="js/tms_presets.js" type="text/javascript"></script>
	<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>	 
	<script src="js/easyTooltip.js" type="text/javascript"></script>
	
	<!--[if lt IE 7]>
	<div style=' clear: both; text-align:center; position: relative;'>
		<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
			<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
		</a>
	</div>
	<![endif]-->
	<!--[if lt IE 9]>
   		<script type="text/javascript" src="js/html5.js"></script>
	<![endif]-->
</head>
<body id="page1">
	<div class="extra">
<!--==============================header=================================-->
		<header>
			<div class="menu-row">
				<div class="main">
					<div class="container_12">
						<div class="grid_12">
							<!--<nav class="fleft">
								<ul class="services-menu">
									<li class="m1"><a href="index.html"></a></li>
									<li class="m2"><a href="contact.html"></a></li>
									<li class="m3"><a href="#"></a></li>
								</ul>
							</nav>-->
							<nav class="fright">
								<ul class="main-menu">
									<li class="active"><a href="index.html">Home</a></li>
									<li><a href="over.html">Over</a></li>
									<li><a href="merken.html">Merken</a></li>
									<li><a href="foto.html">Foto's</a></li>
									<li><a href="contact.html">Contact</a></li>
								</ul>
							</nav>
							<div class="clear"></div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
			</div>
			<div class="header-row"><div class="ic"></div>
				<div class="main">
					<h1>
						<a href="index.html">Lauretia</a>
						<!--<em>Keep Your Perfect Look</em>-->
					</h1> 
					<div class="slider-wrapper">
						<div class="slider">
							<ul class="items">
								<li>
									<img src="images/slider-img1.jpg" alt="" />
								</li>
								<li>
									<img src="images/slider-img2.jpg" alt="" />
								</li>
								<li>
									<img src="images/slider-img3.jpg" alt="" />
								</li>
								<li>
									<img src="images/slider-img4.jpg" alt="" />
								</li>
							</ul>
						</div>
						<!--
						<ul class="pagination">
							<li><a href="#">Zomer</a></li>
							<li><a href="#">Herfst</a></li>
							<li><a href="#">Winter</a></li>
							<li><a href="#">Lente</a></li>
						</ul>
						-->
					</div>
							   
				</div>
			</div>
			
		</header>
		
<!--==============================content================================-->
		<section id="content">
			<div class="main">
				<div class="container_12">
					<div class="wrapper">
						<article class="grid_8">
							<h3>Welkom op de website van Boutique Lauretia!</h3>
							<div class="wrapper p2">
								<div class="extra-wrap">
									<div class="gallery">
										
						</div>
									<h6>Herfstfeesten</h6>
									Op 20, 21 en 22 september vinden de herfstfeesten plaats in Lommel. Gedurende deze dagen bieden wij mooie kortingen aan. Zondag 22 september zijn wij geopend van 13.30 uur tot 18.00 uur.
								</div>
							</div>
							<h6>Najaarscollectie is binnen!</h6> 
							<p>Kom snel kijken naar onze najaarscollectie, die wij voor u zorgvuldig hebben uitgekozen!</p>
							<!--<a class="button" href="#">Read More</a>-->
						</article>
						<article class="grid_4">
							<div class="indent-left2 img-indent-bot">
								<h3>Openingsuren</h3>
								<ul class="list-1">
									<li><span class="color-2">Maandag</span> gesloten</li>
									<li><span class="color-2">Dinsdag</span> 10:00-18:00</li>
									<li><span class="color-2">Woensdag</span> 10:00-18:00</li>
									<li><span class="color-2">Donderdag</span> 10:00-18:00</li>
									<li><span class="color-2">Vrijdag</span> 10:00-18:00</li>
									<li><span class="color-2">Zaterdag</span> 10:00-18:00</li>
									<li><span class="color-2">Zondag en feestdagen</span> gesloten</li>
								</ul>
							</div>
							<div class="aligncenter">
								<!--<a class="button" href="#">Read More</a>-->
							</div>
						</article>
					</div>
				</div>
				
					
			</div>
			<div class="groot">
				<div class="container_13">
						<div class="wrapper">
							<article class="grid_4">
								<h4>Over Ons</h4>
								Boutique Lauretia biedt u stijlvolle, vlotte en sportieve dameskleding aan betaalbare prijzen voor jongeren en ouderen <span style="color:white;">van MAAT 34 TOT 48!</span>
							</article>
							<article class="grid_4">
								<div class="indent-left">
									<h4>Interesse?</h4>
									Kom zeker eens langs in onze boutique!
								</div>
							</article>
							<article class="grid_4">
								<div class="indent-left2">
									<h4>Adres</h4>
									Kerkstraat 79 bus 1</br>
									3920 Lommel
								</div>
							</article>
							
						</div>
					</div>
			</div>
		</section>
	</div>
	
<!--==============================footer=================================-->
	<footer>
		<div class="footer-bg">
			<div class="main">
				<div class="container_12">
					<div class="wrapper">
						<div class="grid_12">
							<div class="wrapper">
								<span class="footer-text">Boutique Lauretia &copy; 2013.</span>
								<ul class="list-services">
									<li>Volg ons:</li>
									<li class="item-1"><a class="tooltips" title="facebook" href="https://www.facebook.com/boutique.lauretia"></a></li>
								</ul>
							</div>
							
														
							<!-- Start of belstat.be Counter -->
<script type="text/javascript">
		<!--
		d=document;
		pag='';col='';scr=0;b=navigator.appName;
		scr=screen.width+'*'+screen.height;
		ref=escape(document.referrer);
		pag=escape(d.URL);
		if (b != 'Netscape') {col=screen.colorDepth}
		else {col=screen.pixelDepth}
		if(col=='undefined'){col='';}
		d.write('<a href="http://www.belstat.be/viewstat.asp?UserID=dorien07&' + 'amp;' + 'lang=nl" target="_blank"><img border="0" src="http://www.belstat.be/regstat.aspx?');
		d.write('UserID=dorien07&BColor=black&refer=' + ref + '&pag=' + pag + '&b=' + b + '&col=' + col + '&scr=' + scr + '"');
		d.write(' align="center" width="16" height="16" alt="Monitored*by*BelStat*-*Your*Site*Counts"><\/a>');
		// -->
</script>
<!-- End of belstat.be Counter -->
						</div>
					</div>
				</div>
				
					
			</div>
			
			
		</div>
	</footer>
	<script type="text/javascript"> Cufon.now(); </script>
	<script type="text/javascript">
		$(window).load(function() {
			$('.slider')._TMS({
				duration:800,
				easing:'easeOutQuad',
				preset:'simpleFade',
				slideshow:5000,
				banners:false,
				pauseOnHover:true,
				pagination:'.pagination',
				pagNums:false
			});
		});
	</script>
</body>
</html>

En de CSS:

Code:
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
mark, rp, rt, ruby, summary, time {display:inline;}

/* Global properties ======================================================== */
html {width:100%;}

body {font-family:Georgia, "Times New Roman", Times, serif;font-size:100%;color:#818280;min-width:960px;background:#fff}
.ic, .ic a {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
.bg {width:100%; background:url(../images/bg-2.jpg) center top repeat-x;}
.groot{width:100%; background:url(../images/bg.jpg) center top repeat-x;}
div.groot{margin-bottom:70px;}
footer{border-top: 10px solid white;}
.main {
	width:960px; 	
	padding:0;
	margin:0 auto;
	font-size:0.875em;
	line-height:1.785em;
}

a {color:#B94D1C; outline:none;}
a:hover {text-decoration:none;}

.col-1, .col-2 {float:left;}

.wrapper {width:100%; overflow:hidden;}
.extra-wrap {overflow:hidden;}
 
p {margin-bottom:18px;}
.p0 {margin-bottom:0px;}
.p1 {margin-bottom:8px;}
.p2 {margin-bottom:15px;}
.p3 {margin-bottom:30px;}
.p4 {margin-bottom:40px;}
.p5 {margin-bottom:50px;}

.reg {text-transform:uppercase;}

.fleft {float:left;}
.fright {float:right;}

.alignright {text-align:right;}
.aligncenter {text-align:center;}

.it {font-style:italic;}

.color-1 {color:#fff;}
.color-2 {color:#000;}
.color-3 {color:#666;}

.img-border {
	padding:10px;
	border:1px solid #e5e5e5;
	float:left;
}

/*********************************boxes**********************************/
.indent {padding:20px;}
.indent-left {padding-left:10px;}
.indent-left2 {padding-left:20px;}
.indent-right {padding-right:50px;}

.indent-bot {margin-bottom:20px;}
.indent-bot2 {margin-bottom:30px;}
.indent-bot3 {margin-bottom:45px;}

.prev-indent-bot {margin-bottom:10px;}
.img-indent-bot {margin-bottom:25px;}
.margin-bot {margin-bottom:35px;}

.img-indent {float:left; margin:0 30px 0px 0;}	
.img-indent2 {float:left; margin:0 15px 0px 0;}	
.img-indent-r {float:right; margin:0 0px 0px 40px;}	

.buttons a:hover {cursor:pointer;}

.main-menu li a,
.list-1 li a,
.list-2 li a,
.link,
.button,
.button2,
h1 a {text-decoration:none;}	

/*********************************header*************************************/
header {
	width:100%;
	position:relative; 
	z-index:2;
}
.menu-row {
	width:100%;
	height:62px;
	overflow:hidden;
	background:url(../images/pic-1.gif) left bottom repeat-x #000;
}
.header-row {
	width:100%;
	background:url(../images/bg.jpg) center top repeat;
	padding-bottom:10px;
}
	#page3 .header-row {padding-bottom:20px;}
	#page4 .header-row {padding-bottom:43px;}
	#page5 .header-row {padding-bottom:44px;}

h1 {
	padding:0px 0 0 9px; 
	position:relative;
	overflow:hidden;
	margin-bottom:0px;
}
	h1 a {
		display:block; 
		width:311px;
		height:79px;
		text-indent:-9999em;
		background:url(../images/logo.png) 0 0 no-repeat;
		float:left;
		margin-right:20px;
	}
	h1 em {
		display:inline-block;
		font-size:20px;
		line-height:2em;
		color:#808080;
		padding-top:25px;
		letter-spacing:-1px;
	}
	
/***** main-menu *****/
.main-menu {
	padding:17px 0 0 0; 
}
.main-menu li {
	float:left; 
	position:relative;
	padding-left:69px;
}
.main-menu li a {
	display:block; 
	font-size:20px; 
	line-height:1.2em; 
	color:#fff; 
	position:relative;
}
.main-menu li.active a, 
.main-menu > li > a:hover,
.main-menu > li.sfHover > a {color:#B94D1C;}

/***** services-menu *****/
.services-menu {padding:27px 0 0 50px;}
	.services-menu li {
		float:left;
		padding-left:83px;
	}
	.services-menu li:first-child {padding:0;}
		.services-menu a {
			display:block;
			width:11px;
			height:11px;
			text-indent:-9999em;
		}
		.services-menu .m1 a {background:url(../images/icon-home.gif) 0 0 no-repeat;}
		.services-menu .m2 a {background:url(../images/icon-contact.gif) 0 0 no-repeat;}
		.services-menu .m3 a {background:url(../images/icon-tree.gif) 0 0 no-repeat;}
		
/***** slider *****/
.slider-wrapper {
	width:940px;
	height:450px;
	padding:10px;
	margin-bottom:20px;
	background:#fff;
	overflow:hidden;
	position:relative;
	z-index:1;
}
.slider {
	position:relative;
	width:940px;
	height:450px;
}
.items {display:none;}

.pagination {
	position:absolute;
	left:10px;
	bottom:10px;
	z-index:99;
}
	.pagination li {
		float:left; 
		background:url(../images/pagination-a.png) left bottom repeat-x #000;
	}
		.pagination a {
			display:block;
			width:235px;
			height:66px;
			text-align:center;
			font-family: 'PT Sans', sans-serif;
			font-size:23px;
			line-height:66px;
			color:#fff;
			background:url(../images/pagination-spacer.gif) left top no-repeat;
			text-decoration:none;
		}
		.pagination li:first-child a {background:none;}
		.pagination .current,
		.pagination li:hover {background-position:left top; background-color:#B94D1C;}
		.pagination .current a {cursor:default;}

/*********************************content*************************************/
#content {
	width:100%; 
	padding:25px 0 49px;
	position:relative;
	z-index:1;
}
	#page3 #content {padding-top:0;}

.spacer-1 {
	width:100%; 
	background:url(../images/pic-1.gif) 217px 0 repeat-y;
}

h3 {
	font-size:23px; 
	line-height:2em; 
	color:#000;
	font-weight:normal;
	letter-spacing:-1px;
	margin-bottom:10px;
}
h4 {
	font-size:28px; 
	line-height:2em; 
	color:#fff;
	font-weight:normal;
	letter-spacing:-1px;
}
h5 {font-weight:normal;}
h6 {color:#000; font-weight:normal;}

.border-bot {
	width:100%; 
	padding-bottom:20px; 
	background:url(../images/pic-1.gif) 0 bottom repeat-x;
}

.box {
	width:100%; 
	background:url(../images/box-tail.gif) 0 0 repeat-x;
}

.button {
	display:inline-block; 
	padding:0 23px;
	font-size:14px;
	line-height:40px;
	color:#fff; 
	background:url(../images/button-tail.gif) 0 0 repeat-x #141414;
	cursor:pointer;
}
.button:hover {background:#B94D1C;}

.button2 {
	display:inline-block; 
	padding:0 23px;
	font-size:14px;
	line-height:40px;
	color:#000; 
	background:url(../images/button2-tail.gif) 0 0 repeat-x #e5e5e5;
	cursor:pointer;
}
.button2:hover {background:#e5e5e5;}

.list-1 li {
	line-height:25px; 
	padding:0 0 15px 41px; 
	background:url(../images/marker-1.png) 0 2px no-repeat;
}
.list-1 li.last-item {padding:0 0 0 41px;}
	.list-1 li a {
		display:inline-block;
		color:#818280;
		cursor:pointer;
	}
	.list-1 li a:hover,
	.list-1 li a:hover span {color:#B94D1C;}

.list-2 li {
	line-height:25px; 
	padding:0 0 0 15px; 
	background:url(../images/marker-2.gif) 0 10px no-repeat;
}
	.list-2 li a {
		display:inline-block;
		color:#B94D1C;
	}
	.list-2 li a:hover {text-decoration:underline;}

.link:hover {text-decoration:underline;} 

.link-1 {
	display:inline-block; 
	font-size:14px; 
	padding-right:8px; 
	background:url(../images/marker-3.gif) right 8px no-repeat;
}
.link-1:hover {color:#fff;} 

.text-1 {font-size:14px;} 
.text-2 {font-size:14px; line-height:1.285em;}  

dl span {float:left; width:80px;}

/* -- gallery  begin --*/
 div.content {
	/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
	display: none;
	width: 960px;
	height: 404px;
	margin:  0 0 75px 0;
	padding: 0px;
	overflow: hidden;
}
 div.content img {
	position: relative;
	z-index: 2;
}
 div.content a, div.navigation a {
	text-decoration: none;
	display:block;
	position:relative;
	cursor:pointer;
}
	div.content a img, div.navigation a img {
		position:relative;
		z-index:1;
	}
	div.content a span, div.navigation a span {
		display:block;
		width:198px;
		height:135px;
		background:#000;
		position:absolute;
		left:0;
		top:0;
		z-index:2;
	}
	div.content a span.selected,
	div.navigation a span.selected {display:none !important;}
 div.content a:focus, div.content a:hover, div.content a:active {
	text-decoration: underline;
}
 div.controls {
}
 div.controls a {
	padding: 0px;
}
 div.ss-controls {
	float: left;
	display:none;
}
 div.nav-controls {
	position:absolute;
	left:0px;
	width:596px;
	bottom:0px;
	z-index: 1;
}
 div.nav-controls a.prev {
	background:url(../images/prev.gif) no-repeat 0 0;
	width:39px;
	height:39px;
	text-indent:-5000px;
	position:absolute;
	bottom:2px;
	left:0;
	z-index:11;
}
 div.nav-controls a.prev:hover {
	background:url(../images/prev-h.gif) no-repeat 0 0;
}
 div.nav-controls a.next {
	background:url(../images/next.gif) no-repeat 0 0;
	width:39px;
	height:39px;
	text-indent:-5000px;
	position:absolute;
	bottom:2px;
	right:0;
	z-index:11;
}
 div.nav-controls a.next:hover {
	background:url(../images/next-h.gif) no-repeat 0 0;
}
 div.slideshow-container {
	position: relative;
	height: 404px; /* This should be set to be at least the height of the largest image in the slideshow */
	z-index:1;
	
}
 div.loader {
	position: absolute;
	top: 0;
	left: 0;
	background-image:url(images/loader.gif);
	background-repeat: no-repeat;
	background-position: center;
	width: 592px;
	height: 470px; /* This should be set to be at least the height of the largest image in the slideshow */
}
 div.slideshow {
	 width:960px;
	 height:404px;
	 background:#fff;
}
 div.slideshow span.image-wrapper {
	display: block;
	width: 940px;
	height: 384px;
	position:absolute;
	left:10px;
	top:10px;
}
 div.slideshow a.advance-link {
	display: block;
	width: 940px;
	height: 384px; /* This should be set to be at least the height of the largest image in the slideshow */
	padding: 0;
	margin: 0;
}
 div.slideshow a.advance-link img {
	padding:0;
	margin:0;
	display:block;
	position:absolute;
	left:0;
	top:0;
}
 div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
	text-decoration: none;
}
 div.slideshow img {
}
 div.download {
	float: right;
}
 div.caption-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 596px;
	height: 151px;
}
 span.image-caption {
	display: block;
	position: absolute;
	width: 596px;
	height: 151px;
	top: 0;
	left: 0;
	z-index:10;
}
 div.caption {
	width: 536px;
	height: 128px;
	padding: 23px 30px 0 30px;
	line-height: 18px;
	font-size: 13px;
	color: #fff;
}
 div.caption h5{
	line-height: 18px;
	font-size: 13px;
	color: #fd003f;
	text-transform:uppercase;
	font-weight:bold;
	text-decoration:none;
}
 div.caption h6{
	line-height: 18px;
	font-size: 13px;
	color: #fff;
	font-weight:normal;
	margin: 0 0 18px 0
}
 div.image-title {
}
 div.image-desc {
}
 div.navigation {
}
 div#thumbs {
	width: 320px;
	overflow: hidden;
	padding: 0px 0px 0 0;
	margin:0 auto;
}
 ul.thumbs {
	margin:0;
	padding: 0;
	width:100%;
	height:auto;
	overflow:visible;
}
ul.thumbs li {
	float:left;
	margin: 0 20px 20px 0;
	overflow: hidden;
	padding: 10px;
	background:#fff;
	border:1px solid #e5e5e5;
	vertical-align:top;
}
ul.thumbs li.last {margin-right:0;}
ul.thumbs li.last2 {margin-bottom:0;}
 ul.thumbs li img {
	border: none;
}
 a.thumb:focus {
	outline: none;
}
 div.pagination {
	clear: both;
	text-align:center;
	position:relative;
	z-index:10;
}
 div.top.pagination {
	display:none;
}
 div.navigation div.bottom {
	 display:none;
}
 div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
	padding:0 4px;
	font-weight:bold;
	color:#fff;
}
 div.pagination a:hover {
	text-decoration: none;
	color:#ffeaa8;
}
 div.pagination span.current {
	color:#ffeaa8;
}
 div.pagination span.ellipsis {
	border: none;
	padding: 5px 0 3px 2px;
}
/* -- gallery end --*/

/***** contact form *****/
#contact-form {display:block;}
	#contact-form label {
		display:block; 
		height:30px; 
		overflow:hidden;
	}
	#contact-form input {
		float:left; 
		width:362px; 
		font-size:12px; 
		line-height:1.25em;
		color:#808080;
		padding:5px 10px; 
		margin:0; 
		font-family:Georgia, "Times New Roman", Times, serif; 
		border:none; 
		background:#fff;
		outline:none;
	}
	#contact-form .message {height:194px;}
	#contact-form textarea {
		height:184px; 
		width:840px; 
		font-size:12px; 
		line-height:1.25em;
		color:#808080;
		padding:5px 10px; 
		margin:0; 
		font-family:Georgia, "Times New Roman", Times, serif; 
		border:none; 
		background:#fff;
		overflow:auto;
		outline:none;
	}
.text-form {
	float:left; 
	display:block; 
	font-size:14px;
	line-height:2em;
	width:80px; 
	color:#808080;
	font-family:Georgia, "Times New Roman", Times, serif;
}
.buttons {text-align:right; padding-top:10px;}
.buttons a {margin-left:10px; padding:0 40px;}
/****************************footer************************/
footer {
	width:100%; 
	position:relative;
	overflow:hidden;
	z-index:99;
}
.footer-bg {
	width:100%;
	height:100%;
	background:#000;
}

.footer-text {
	float:left;
	display:block;
	padding-top:10px;
}

.list-services {
	padding:10px 87px 0 0;
	float:right;
}
	.list-services li {
		float:left; 
		padding:0 0 0 8px;
		font-size:21px;
		line-height:1.23em;
		color:#fff;
		letter-spacing:-1px;
		position:relative;
		z-index:99;
	}
	.list-services li:first-child {margin-top:-1px; padding-right:3px;}
		.list-services a {
			display:block;
			width:26px;
			height:27px;
			text-indent:-9999em;
			background:url(../images/social-icons.png) 0 0 no-repeat;
			cursor:pointer;
		}
		.list-services .item-2 a {background-position:-34px 0;}
		.list-services .item-3 a {background-position:-68px 0;}
		
#easyTooltip{
	font-family:Arial, Helvetica, sans-serif;
	padding:6px;
	border:1px solid #fff;
	background:#1e1e1e;
	color:#fff;
	font-size:11px;
	position:relative;
	z-index:99;
}
	
/*********extra***********/
.block {height:114px;}
.extra {
	min-height:100%; 
	height:auto !important; 
	height:100%; 
	margin: 0 auto -114px; 
	position:relative;
	overflow:hidden;
} 
html, body {height:100%;}

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{outline:0;}
    #cboxContent{margin-top:20px;background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{border:5px solid #000; background:#fff;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
        
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext:hover{background-position:bottom right;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(images/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose:hover{background-position:bottom center;}



/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}

.container_13 {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 10px;
	margin-right: 10px;
}

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
	margin-left: 0;
}

.omega {
	margin-right: 0;
}

/* Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .grid_1 {
	width:60px;
}

.container_12 .grid_2 {
	width:140px;
}

.container_12 .grid_3 {
	width:220px;
}

.container_12 .grid_4 {
	width:300px;
}

.container_12 .grid_5 {
	width:380px;
}

.container_12 .grid_6 {
	width:460px;
}

.container_12 .grid_7 {
	width:540px;
}

.container_12 .grid_8 {
	width:620px;
}

.container_12 .grid_9 {
	width:700px;
}

.container_12 .grid_10 {
	width:780px;
}

.container_12 .grid_11 {
	width:860px;
}

.container_12 .grid_12 {
	width:940px;
}

.container_13 .grid_1 {
	width:60px;
}

.container_13 .grid_2 {
	width:140px;
}

.container_13 .grid_3 {
	width:220px;
}

.container_13 .grid_4 {
	width:300px;
}

.container_13 .grid_5 {
	width:380px;
}

.container_13 .grid_6 {
	width:460px;
}

.container_13 .grid_7 {
	width:540px;
}

.container_13 .grid_8 {
	width:620px;
}

.container_13 .grid_9 {
	width:700px;
}

.container_13 .grid_10 {
	width:780px;
}

.container_13 .grid_11 {
	width:860px;
}

.container_13 .grid_12 {
	width:940px;
}




/* Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_13 .prefix_1 {
	padding-left:80px;
}

.container_13 .prefix_2 {
	padding-left:160px;
}

.container_13 .prefix_3 {
	padding-left:240px;
}

.container_13 .prefix_4 {
	padding-left:320px;
}

.container_13 .prefix_5 {
	padding-left:400px;
}

.container_13 .prefix_6 {
	padding-left:480px;
}

.container_13 .prefix_7 {
	padding-left:560px;
}

.container_13 .prefix_8 {
	padding-left:640px;
}

.container_13 .prefix_9 {
	padding-left:720px;
}

.container_13 .prefix_10 {
	padding-left:800px;
}

.container_13 .prefix_11 {
	padding-left:880px;
}

.container_12 .prefix_1 {
	padding-left:80px;
}

.container_12 .prefix_2 {
	padding-left:160px;
}

.container_12 .prefix_3 {
	padding-left:240px;
}

.container_12 .prefix_4 {
	padding-left:320px;
}

.container_12 .prefix_5 {
	padding-left:400px;
}

.container_12 .prefix_6 {
	padding-left:480px;
}

.container_12 .prefix_7 {
	padding-left:560px;
}

.container_12 .prefix_8 {
	padding-left:640px;
}

.container_12 .prefix_9 {
	padding-left:720px;
}

.container_12 .prefix_10 {
	padding-left:800px;
}

.container_12 .prefix_11 {
	padding-left:880px;
}



/* Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .suffix_1 {
	padding-right:80px;
}

.container_12 .suffix_2 {
	padding-right:160px;
}

.container_12 .suffix_3 {
	padding-right:240px;
}

.container_12 .suffix_4 {
	padding-right:320px;
}

.container_12 .suffix_5 {
	padding-right:400px;
}

.container_12 .suffix_6 {
	padding-right:480px;
}

.container_12 .suffix_7 {
	padding-right:560px;
}

.container_12 .suffix_8 {
	padding-right:640px;
}

.container_12 .suffix_9 {
	padding-right:720px;
}

.container_12 .suffix_10 {
	padding-right:800px;
}

.container_12 .suffix_11 {
	padding-right:880px;
}



/* Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .push_1 {
	left:80px;
}

.container_12 .push_2 {
	left:160px;
}

.container_12 .push_3 {
	left:240px;
}

.container_12 .push_4 {
	left:320px;
}

.container_12 .push_5 {
	left:400px;
}

.container_12 .push_6 {
	left:480px;
}

.container_12 .push_7 {
	left:560px;
}

.container_12 .push_8 {
	left:640px;
}

.container_12 .push_9 {
	left:720px;
}

.container_12 .push_10 {
	left:800px;
}

.container_12 .push_11 {
	left:880px;
}

.container_13 .push_1 {
	left:80px;
}

.container_13 .push_2 {
	left:160px;
}

.container_13 .push_3 {
	left:240px;
}

.container_13 .push_4 {
	left:320px;
}

.container_13 .push_5 {
	left:400px;
}

.container_13 .push_6 {
	left:480px;
}

.container_13 .push_7 {
	left:560px;
}

.container_13 .push_8 {
	left:640px;
}

.container_13 .push_9 {
	left:720px;
}

.container_13 .push_10 {
	left:800px;
}

.container_13 .push_11 {
	left:880px;
}



/* Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .pull_1 {
	left:-80px;
}

.container_12 .pull_2 {
	left:-160px;
}

.container_12 .pull_3 {
	left:-240px;
}

.container_12 .pull_4 {
	left:-320px;
}

.container_12 .pull_5 {
	left:-400px;
}

.container_12 .pull_6 {
	left:-480px;
}

.container_12 .pull_7 {
	left:-560px;
}

.container_12 .pull_8 {
	left:-640px;
}

.container_12 .pull_9 {
	left:-720px;
}

.container_12 .pull_10 {
	left:-800px;
}

.container_12 .pull_11 {
	left:-880px;
}




/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/


.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

Alvast bedankt!
 
Dit is de oorzaak van de wit-ruimte:
div.groot{margin-bottom:70px;}

Met de juiste tools (bijvoorbeeld de "Web developer toolbar" van Chris Pederick of "Firebug") ben je daar in vijf minuten achter.
 
Dit is de oorzaak van de wit-ruimte:
div.groot{margin-bottom:70px;}

Met de juiste tools (bijvoorbeeld de "Web developer toolbar" van Chris Pederick of "Firebug") ben je daar in vijf minuten achter.

Dit helpt niet als ik dit aanpas. Dan wordt de zwarte balk met over ons, interesse? en adres alleen kleiner, maar de witte ruimte blijft.
Dit had ik al geprobeerd. Ik moet die margin zo zetten opdat die zwarte balk hoog genoeg is voor alle tekst.

En ik gebruik 'element inspecteren' in google chrome, dat is toch gelijkaardig volgens mij? Maar ook daarmee heb ik het niet gevonden.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan