1 reply [Last post]
Sjoerd1864
Sjoerd1864's picture
Offline
newbie
Netherlands
Last seen: 1 year 22 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2015-09-12
Posts: 1
Points: 2

I did some self-study on CSS and try to create my own webpage. but now I'm stuck with an blank line between two divs. Can anybody see what I'm doing wrong?

The HTML

<!doctype html>
 
<html>
 
<head>
	<link type="text/css" rel="stylesheet" href="stylesheet2.css"/>
	<title> In vaten gerijpte koffiebonen</title>
</head>
 
<body>
 
<div id="header">
	<h1>In wijn- of whiskeyvaten gerijpte koffiebonen </h1>
 
		<ul>
			<li><a href="link.html">Begin pagina</a></li>
			<li><a href="link.html">Rijping in wijnvat</a></li>
			<li><a href="link.html">Rijping in whiskyvat</a></li>
			<li><a href="link.html">Prijzen en bestellen</a></li>
		</ul>
</div>
 
<div id="koffieboon"></div>
 
<div id="midden">
 
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
 
</div>
 
<div id="einde">
	<div id="misterg">
		<img src="afbeeldingen/misterg.jpg" class="afbmisterg" />
		<h6>In samenwerking met:<br>The Mister G Coffee Company<h6>
	</div>
</div>
 
 
</body>
</html>

The CSS

body {
	height: 100%;
}
 
/* HIER BEGINT DE HEADER */
 
#header {
	height: 80px;
	margin-top: 10px;
	margin-left: 20%;
	margin-right: 20%;
	position: relative;
	background-color: #C09372;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}
 
#header h1 {
	color: #481706;
	position: absolute;
	top: 0%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -40%);
}
 
#header ul {
	list-style: none;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -30%);
	padding: 10px 0 0 0;
}
 
#header li {
	display: inline;
	margin: 0 10px 0 0;
}
 
#header a {
	font-weight: bold;
	color: #D4A539;
	text-decoration: none;
	padding: 0px 5px 0 5px;
}
 
#header a:link, a:visited {
	color: #481706;
	border-top: 3px solid #481706;
	border-bottom: 3px solid #481706;
}
 
#header a:hover, a:active{
	color: #D4A539;
	border-top: 3px solid #D4A539;
	border-bottom: 3px solid #D4A539;
}
 
/* AFBEELDING TUSSEN HEADER EN MIDDEN */
 
#koffieboon {
	background: url(afbeeldingen/koffieboon.jpg);
	height: 50px;
	margin-left: 20%;
	margin-right: 20%;
}
 
/* HIER BEGINT HET MIDDENSTUK */
 
#midden {
	margin-left: 20%;
	margin-right: 20%;
	width: 60%;
	height: 500px;
	background-color: #C09372;
}
 
#midden p {
	margin: 0px;
	padding: 0px;
}	
 
/* HIER BEGINT HET EINDE */
 
#einde {
	height: 100px;
	position: relative;
	margin-left: 20%;
	margin-right: 20%;
	margin-bottom: 10px;
	width: 60%;
	background-color: #C09372;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	float: none;
}
 
#misterg {
	margin: 0px;
	text-align: right;
}
 
.afbmisterg {
	float: right;
	margin: 5px;
	heigth: 80px;
	width: 80px;
	border: 1px solid #000;
}
 
#misterg h6 {
	marging: 0px;
 
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 39 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Looks like margin collapse

See Google margin collapse.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.