fiddling with button and positioning of header elements

index.html

@@ -104,17 +104,19 @@ <h1>Katherine Konrad</h1>
 					<dd>kaybiz.net</dd>
 				</dl>	
 			</div>	
+			<div id="nav" class="nav">
+				<ul>
+					<li><a href="#education">Education</a></li>
+					<li><a href="#experience">Experience</a></li>
+					<li><a href="#skills">Skills</a></li>
+					<li><a href="#references">References</a></li>
+					<li><a href="#extra">Freetime</a></li>
+				</ul>	
+			</div>
+			<div style="clear:both;"></div>
 		</div>
 
-		<div id="nav" class="nav">
-			<ul>
-				<li><a href="#education">Education</a></li>
-				<li><a href="#experience">Experience</a></li>
-				<li><a href="#skills">Skills</a></li>
-				<li><a href="#references">References</a></li>
-				<li><a href="#extra">Freetime</a></li>
-			</ul>	
-		</div>	
+
 		<div id="content" data-spy="scroll">
 			<div id="education">
 				<h3>Education</h3>
@@ -233,8 +235,9 @@ <h4>Volunteer Work</h4>
 					<li>Local Area Language tutor</li>
 					<li>Assistant at senior center</li>	
 				</ul>
-			</div>		
-		</div>	
-	</div>	
+			</div>	<!-- end div id extra -->	
+		</div>	<!-- end div id skills -->
+		<img src="images/contact.png" id="contact_button" alt="Contact Me Button"/>
+	</div>	<!-- end div id pagewrap -->
 </body>
 </html>

style/style.css

@@ -26,13 +26,11 @@ body{
   	left: 0;
   	right: 0;
   	position: fixed;
-  	height: 130px;
 	z-index:10; 
 	 -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
 	 -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
 	 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
-
-	padding:0px 10px 20px 10px;
+	padding:0px 10px 0px 10px;
 }
 
 h3 {
@@ -45,7 +43,8 @@ h3 {
 
 .header h1 {
 	font-family: 'Glass Antiqua', cursive;
-	margin: 30px 0px 10px 16px;
+	position:relative;
+	margin: 15px auto;
 	padding:0px 10px 0px 10px;
 	font-size:42px;
 	text-shadow:1px 1px 0 white;
@@ -54,16 +53,16 @@ h3 {
 }
 .header .name {
     float: right;
-	position:fixed;
-	left:390px;
+	margin: 15px 30% 25px 30%;
+
 }
 .header h2 {
   font-family: 'Glass Antiqua', cursive;
   font-weight: normal;
   font-style: italic;
   color:#666;
   text-shadow:1px 1px 0 black;
-	margin-left:40px;
+  margin-left:40px;
 }
 
 .header dl {float:right; position:fixed; right:15px;}
@@ -120,12 +119,12 @@ h4.quote {
 }
 
 #nav {
-	position:fixed;
-	top:110px;
-	left:325px;
-	z-index:11;
+	position:absolute;
+	height:20px;
+	top:80px;
+	left:290px;
+	padding-bottom:5px;
 }
-
 #nav li {
 	display:inline;
 	padding:10px;
@@ -148,7 +147,7 @@ a:hover {
 
 #pagewrap {
 	overflow:auto;
-	top:150px;
+	top:100px;
 	position:absolute;
 	bottom: 0px;
 	right:0px;
@@ -206,4 +205,16 @@ button {
 
 span #headline {
 	display:inline;
+}
+
+#contact_button{
+	position:fixed;
+	bottom:5px;
+	left:5px;
+}
+
+img:hover{
+	-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
+	 -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
+	 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);	
 }