Sat, 2015-09-12 16:39
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; }
