Website

by Aides

HTML

<div id="container">
		<div id="top"></div>
		<div id="header">
			<nav>
				<ul>
					<li><a class="active" href="#home">Home</a></li>
					<li><a href="#news">News</a></li>
					<li><a href="#contact">Contact</a></li>
					<li><a href="#about">About</a></li>
				</ul>
        <div class="circle">
          
        </div>
			</nav>
		</div>
		<div id="leftNav">This is the sites leftnav</div>	
		<div id="rightNav">This is the sites rightnav</div>	
		<div id="canvas"></div>
	</div>

CSS

#container {
	width: 100%;
	height: 100%;
	overflow: auto;
}


#header    {
	width: 80%;
    position: absolute;
	padding-left: 10%;
	padding-right: 10%;
	z-index: 2;
}

#leftNav {
	float: left;
	width: 20%;
	height: 90%;
	background-color: #03f;
	border-right: 1px dashed #694717;	/* Delete once layout has been set */
	z-index: 1;
}

#rightNav {
	float: right;
	width: 20%;
	height: 90%;
	background-color: #03f;
	border-left: 1px dashed;	/* Delete once layout has been set */
	z-index: 1;
}

#canvas {
	margin:auto;
	width: 60%;
	position: relative;
}

#footer {
	clear: both;
	background-color: #867E7E;
	height: 0%;
}

body {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
}


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #a3a3c2; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#a3a3c2, #d1d1e0); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#a3a3c2, #d1d1e0); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#a3a3c2, #d1d1e0); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#a3a3c2, #d1d1e0); /* Standard syntax */
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}


#top {
	width: 100%;
	height: 2%;
	background-color: #111;
	position: relative;
}

.circle{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: black;
	z-index: 3;
	position: relative;
  top: -20px;
  left: 50%;
}