Sort bundlinje på min hjemmeside?
På grund af diverse fejl er jeg nu startet forfra med opbygningen af min hjemmeside - ZERIOUS.DK - hvor nedenstående fejl kan ses.Men nu optræder der gud hjælpe mig en sort linje i bunden af skærmen og jeg aner ikke hvorfor eller hvorfra, den kommer.
Kender nogen af jer til det problem og har I evt. en løsning?
Min html kode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Forlaget Zerious</title>
<link href="main.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="foto">
<img src="foto.JPG" height="75" width="64" />
</div>
<div id="logo">
<h1><span class="style1"><em class="style2">Copyright Erik Jensen - </em></span>
<span class="style3">Forlaget Zerious</span><span class="style1">
<em class="style2"> - altid under udvikling © 2014</em></span></h1>
</div>
</div>
<div id="navicontainer">
<div id="navi">
<ul>
<li><a href="index.html">Forside</a></li>
<li><a href="index.html">Forlag</a></li>
<li><a href="index.html">Slægtsforskning</a></li>
<li><a href="index.html">Copyright</a></li>
<li><a href="index.html">Info</a></li>
<li><a href="index.html">Kontakt</a></li>
</ul>
</div>
</div>
<div id="banner">
<img src="dyrehaven.JPG" height="380" width="500" />
</div>
<div id="subbanner">
</div>
<div id="content">
</div>
<div id="rightside">
</div>
<div id="footer">
<p>På grund af fejl er jeg startet forfra med hjemmesiden.</p>
</div>
</div>
</body>
</html>
Min CSS til ovenstående:
html { }
body { width:100%; height:100%; background: linear-gradient(#222222, #eeeeee);}
.style1 { font-size:16px; color: black;}
.style2 { color: #800000;}
.style3 { font-family: "palatino Linotype"; }
#wrapper { width:1250px; margin:0px auto; background: linear-gradient(#222222, #eeeeee); }
#top {background: linear-gradient(#222222, #dadada); width:100%; padding:15px 0; overflow:hidden; }
#foto { float:left; margin:0 0 0 200px; }
#logo { float:right; margin: 25px 345px 0px 0px; background: linear-gradient(#444444); }
#logo h1 { color:#0000CC ; font-size:28px; font-style:normal; font-weight:lighter; }
#navicontainer {width: 100%; height: 36px;background: linear-gradient(#dadada, #222222); border-bottom:2px #770000 solid;}
#navi {background: linear-gradient(#dadada, #444444); clear:both; width: 50%; margin: auto; }
#navi ul { width:100%; float:left; margin:0px; background: linear-gradient(#dadada, #222222); border-bottom:2px #770000 solid; }
#navi ul li { display:inline; }
#navi ul li a { float:left; padding:10px 20px; }
#navi a:link { color:#ffffff; }
#navi a:visited { color:#ffffff; }
#navi a:active { color:#ffffff; }
#navi a:hover { color:#ffffff; background-color:#770000; }
#navi a:focus { color:#ffffff; }
#banner {margin-left:360px; margin-right:360px; margin-top:25px; }
#subbanner {}
#content {}
#leftside {}
#rightside {}
#footer { margin: 10px 425px 0px 425px; }
#footer p { color:#800000; font-size:16px; font-style:italic; }
