I am a newb to HTML5 and i can’t seem to fix this problem. You can see from the image below that the header is overlapping the content area. How can i fix this? is it something with my header css?
https://i.stack.imgur.com/SIPIG.jpg
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<link href='http://fonts.googleapis.com/css? family=Open+Sans:300italic,600italic,600,300' rel='stylesheet' type='text/css'>
<!--Stylesheet-->
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--HTML5 video player-->
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<header>
<div id="headercontainer">
<h1><a class="introlink anchorLink" href="#intro">Test Site</a></h1>
<nav>
<ul>
<li><a class="introlink anchorLink" href="#intro">Intro</a> </li>
<li><a class="portfoliolink anchorLink" href="#portfolio">Portfolio</a></li>
<li><a class="aboutlink anchorLink" href="#about">About</a> </li>
<li><a class="contactlink anchorLink" href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<div id="content">
<article>
<section>
<h1 class="article"> Lorem ipsum</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</section>
Here is the corresponding CSS:
body{
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: small;
background-image:url('Media\background.jpg');
background-repeat:repeat-y;
padding-top::50px;
}
header { padding: 5px 0; width: 100%; background-color: #000; margin-bottom: 25px;
position: fixed; z-index: 10; float: left; }
#headercontainer, #contentcontainer { width: 960px;
margin: 0 auto; position: relative; }
Remove the
position: fixed;from the header CSS.