I’m trying to align my nav bar to sit directly above my third div (footer) with the h3 element aligned immediately above the nav div. I’ve so far got the following code:
<!DOCTYPE html>
<html>
<head>
<title>Pacific FX</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="content">
</div> <!-- End Row content -->
<div id="nav">
<h3>Pacific Fx</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Reel</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">School</a></li>
</ul>
</div> <!-- End Navigation -->
<div class="clearfooter"></div> <!-- Base Divider -->
</div> <!-- End container -->
<div id="footer">
</div> <!-- End Footer -->
</body>
</html>
html, body {
height:100%;
width:100%;
float:left;
margin:0 auto;
}
#container {
background: #444a48; /* Old browsers */
background: -moz-linear-gradient(top, #444a48 0%, #424b48 7%, #454b49 7%, #444d4a 11%, #474d4b 11%, #454e4b 14%, #4a5350 22%, #4b5453 22%, #4b5451 23%, #4d5653 23%, #4c5552 24%, #4d5655 24%, #525b58 31%, #555f5e 35%, #565e60 47%, #596362 57%, #606a69 67%, #66706f 71%, #656f6e 72%, #6d7776 77%, #6c7675 78%, #6e7975 78%, #6f7978 79%, #6e7975 79%, #6f7978 79%, #6f7a76 80%, #707a79 80%, #717b7a 80%, #727d79 82%, #747e7d 82%, #747f7b 83%, #76807f 83%, #848f89 91%, #84908c 91%, #8b9690 94%, #8b9793 94%, #8c9791 95%, #8d9a93 95%, #8f9a94 96%, #929f98 97%, #969f9a 98%, #97a49d 99%, #99a49e 100%, #9aa59f 100%, #cdd2ce 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444a48), color-stop(7%,#424b48), color-stop(7%,#454b49), color-stop(11%,#444d4a), color-stop(11%,#474d4b), color-stop(14%,#454e4b), color-stop(22%,#4a5350), color-stop(22%,#4b5453), color-stop(23%,#4b5451), color-stop(23%,#4d5653), color-stop(24%,#4c5552), color-stop(24%,#4d5655), color-stop(31%,#525b58), color-stop(35%,#555f5e), color-stop(47%,#565e60), color-stop(57%,#596362), color-stop(67%,#606a69), color-stop(71%,#66706f), color-stop(72%,#656f6e), color-stop(77%,#6d7776), color-stop(78%,#6c7675), color-stop(78%,#6e7975), color-stop(79%,#6f7978), color-stop(79%,#6e7975), color-stop(79%,#6f7978), color-stop(80%,#6f7a76), color-stop(80%,#707a79), color-stop(80%,#717b7a), color-stop(82%,#727d79), color-stop(82%,#747e7d), color-stop(83%,#747f7b), color-stop(83%,#76807f), color-stop(91%,#848f89), color-stop(91%,#84908c), color-stop(94%,#8b9690), color-stop(94%,#8b9793), color-stop(95%,#8c9791), color-stop(95%,#8d9a93), color-stop(96%,#8f9a94), color-stop(97%,#929f98), color-stop(98%,#969f9a), color-stop(99%,#97a49d), color-stop(100%,#99a49e), color-stop(100%,#9aa59f), color-stop(100%,#cdd2ce)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #444a48 0%,#424b48 7%,#454b49 7%,#444d4a 11%,#474d4b 11%,#454e4b 14%,#4a5350 22%,#4b5453 22%,#4b5451 23%,#4d5653 23%,#4c5552 24%,#4d5655 24%,#525b58 31%,#555f5e 35%,#565e60 47%,#596362 57%,#606a69 67%,#66706f 71%,#656f6e 72%,#6d7776 77%,#6c7675 78%,#6e7975 78%,#6f7978 79%,#6e7975 79%,#6f7978 79%,#6f7a76 80%,#707a79 80%,#717b7a 80%,#727d79 82%,#747e7d 82%,#747f7b 83%,#76807f 83%,#848f89 91%,#84908c 91%,#8b9690 94%,#8b9793 94%,#8c9791 95%,#8d9a93 95%,#8f9a94 96%,#929f98 97%,#969f9a 98%,#97a49d 99%,#99a49e 100%,#9aa59f 100%,#cdd2ce 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #444a48 0%,#424b48 7%,#454b49 7%,#444d4a 11%,#474d4b 11%,#454e4b 14%,#4a5350 22%,#4b5453 22%,#4b5451 23%,#4d5653 23%,#4c5552 24%,#4d5655 24%,#525b58 31%,#555f5e 35%,#565e60 47%,#596362 57%,#606a69 67%,#66706f 71%,#656f6e 72%,#6d7776 77%,#6c7675 78%,#6e7975 78%,#6f7978 79%,#6e7975 79%,#6f7978 79%,#6f7a76 80%,#707a79 80%,#717b7a 80%,#727d79 82%,#747e7d 82%,#747f7b 83%,#76807f 83%,#848f89 91%,#84908c 91%,#8b9690 94%,#8b9793 94%,#8c9791 95%,#8d9a93 95%,#8f9a94 96%,#929f98 97%,#969f9a 98%,#97a49d 99%,#99a49e 100%,#9aa59f 100%,#cdd2ce 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #444a48 0%,#424b48 7%,#454b49 7%,#444d4a 11%,#474d4b 11%,#454e4b 14%,#4a5350 22%,#4b5453 22%,#4b5451 23%,#4d5653 23%,#4c5552 24%,#4d5655 24%,#525b58 31%,#555f5e 35%,#565e60 47%,#596362 57%,#606a69 67%,#66706f 71%,#656f6e 72%,#6d7776 77%,#6c7675 78%,#6e7975 78%,#6f7978 79%,#6e7975 79%,#6f7978 79%,#6f7a76 80%,#707a79 80%,#717b7a 80%,#727d79 82%,#747e7d 82%,#747f7b 83%,#76807f 83%,#848f89 91%,#84908c 91%,#8b9690 94%,#8b9793 94%,#8c9791 95%,#8d9a93 95%,#8f9a94 96%,#929f98 97%,#969f9a 98%,#97a49d 99%,#99a49e 100%,#9aa59f 100%,#cdd2ce 100%); /* IE10+ */
background: linear-gradient(top, #444a48 0%,#424b48 7%,#454b49 7%,#444d4a 11%,#474d4b 11%,#454e4b 14%,#4a5350 22%,#4b5453 22%,#4b5451 23%,#4d5653 23%,#4c5552 24%,#4d5655 24%,#525b58 31%,#555f5e 35%,#565e60 47%,#596362 57%,#606a69 67%,#66706f 71%,#656f6e 72%,#6d7776 77%,#6c7675 78%,#6e7975 78%,#6f7978 79%,#6e7975 79%,#6f7978 79%,#6f7a76 80%,#707a79 80%,#717b7a 80%,#727d79 82%,#747e7d 82%,#747f7b 83%,#76807f 83%,#848f89 91%,#84908c 91%,#8b9690 94%,#8b9793 94%,#8c9791 95%,#8d9a93 95%,#8f9a94 96%,#929f98 97%,#969f9a 98%,#97a49d 99%,#99a49e 100%,#9aa59f 100%,#cdd2ce 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444a48', endColorstr='#cdd2ce',GradientType=0 ); /* IE6-9 */
font-family: Gill Sans, sans-serif;
min-height: 100%;
margin-bottom: -330px;
position: relative;
}
#content {
width:100%;
height:600px;
}
/** Pacific Fx Title **/
h3 {
font-family: Gill Sans, sans-serif;
color:#a5d8dc;
padding:0 11px;
font-size:60px;
}
#nav {width: 100%; font-size:20px;}
#nav ul {margin: 0; padding: 0; float: left; }
#nav ul li {display: inline;}
#nav ul li a {float: left; text-decoration: none; color: white; padding: 0px 17px;}
#navul li a:visited {color: white; }
#nav ul li a:hover, #navigation ul li .current {color: #fff;}
.clearfooter {
height: 330px;
clear:both;
}
#footer {
height:330px;
width:100%;
position:relative;
background-color: #262626;
float:left;
}
I just can’t seem to get the nav bar and title aligned to that bottom dark grey bar. I’ve tried suing absolute positioning on the nav style with bottom set to 0 but it disappears off the page. I’ve searched the net trying to solve my problem but I can’t seem to find anything that fixes it thus I’m thinking I have a more fundamental problem with how I’ve set out my css which I think is centered around my html / body style.
Anyone able to help me out?