A friend of mine originally designed this website, but now it’s in my hands. I am trying to create a “fading gradient” image below the navigation, to fade the black and white together. The id is #top
I’ve been playing around with it, but I can’t get it to show in the browser?
Here is the link
HTML
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Barrett Fishing Rod Company</title>
<meta name="description" content="Custom fishing rods for the serious fishermen" />
<meta name="keywords" content="barrett fishing rods, custom fishing rods, barrett rods, fishing rods, fishing, barrett, rods, custom" />
<!-- Document CSS -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen,projection,tv" />
</head>
<body>
<!-- Content --><div id="content">
<!-- Banner -->
<div class="banner"><a href="index.html"><img src="graphics/banner.jpg" alt="Barrett Custom Fishing Rods" width="800px" height="210px" /></a></div>
<!-- Navigation -->
<div class="navbar">
<ul>
<li><a class="static" href="index.html">Home</a></li>
<li><a href="rods.html">Rods</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="order.html">Order</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact_us.html">Contact</a></li>
</ul>
</div>
<!-- Fading image for navigation bar --><div id="top">
<!-- Whitebox --><div class="whitebox">
<!-- Photo -->
<div class="left"><img src="graphics/rod_spectrum.jpg" alt="Custom Fishing Rods" /></div>
<!-- Text -->
<div class="right">
<h1>Welcome to Barrett Rod Company</h1>
<p>We are a custom fishing rod builder and full rodsmith shop. We specialize in making custom fishing rods that will fit you as a person and your style of fishing. Weather your roaming the open ocean or hitting the local beach, we can build you the rod you have been waiting for. Boat rods, big game rods, surf casting rods, jigging rods, fly rods, pier rods, if you need a rod to do something special we can built it for you.</p>
<p>Use your imagination and see what type and style of fishing rod you can dream of and we can build it for you.</p>
<p>So go ahead and take a look at some of the fishing rods we have built and also check out all the pictures of some of the fish that have been caught using our rods and see for your self why our rods can stand up to your type of fishing.</p>
</div>
<div class="clear"></div>
</div>
</div><!-- #top END -->
<!-- Footer -->
<div class="footer">Port St. Lucie, FL <span>•<span> (772) 497-4344 <span>•</span> <a href="mailto:barrettrod@comcast.net">barrettrod@comcast.net</a></div>
</div><!-- #content END -->
<div id="signature">Copyright © 2011 Barrett Rod Company - All rights reserved - Designed By Peter Kazazes & Joshua Jorgensen</div>
</body>
</html>
CSS
/* Universal Styles */
img,fieldset{border:none}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
a{cursor:pointer}
h1 {font-family:Verdana, Geneva, sans-serif; font-size:20px}
body {
background: #000 url("../graphics/bg.jpg") no-repeat fixed top center;
font-family:"Lucida Console", Monaco, monospace;
font-size:18px;
color:#322e2f;
padding:5px 5px 5px 5px;
}
/* Top Fading Black */ #top{background:transparent url(../graphics/top.png) repeat-x top left}
/* Document Structure */
#content {
margin:0px auto;
width:800px;
border:12px solid #fff;
background-color:#fff;
}
/* Banner */
#content div.banner {
padding:0px; margin:0px;
border-bottom:5px solid #000;
}
#content div.banner img{
height:100%;
display: block;
margin-left: auto;
margin-right: auto;
}
/* Navigation Bar */
#content div.navbar {background:#000}
#content div.navbar ul {
list-style-type:none;
margin:0;
padding:3px 0px 0px 0px;
overflow:hidden;
line-height:20px;
}
#content div.navbar ul a:link,a:visited {
display:block;
width:122px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
#content div.navbar ul a:hover,a:active {
background-color:#666;
}
#content div.navbar li {float:left; padding:0px 3px 5px 0px}
#content div.navbar a.static {background:#666}
/* Whitebox: Text & Images */
#content div.whitebox {min-height:400px; padding:20px 5px; margin:10px 0px 0px 0px; background:#fff; width:790px; font-family:Verdana, Geneva, sans-serif; z-index:1}
#content div.whitebox div.left {
float:left;
width:334px;
border-bottom:0;
height:100%;
}
#content div.whitebox div.left img {
display: block;
margin-left: auto;
margin-right: auto;
}
#content div.whitebox div.right {
float:right;
width:425px;
display:table-cell; vertical-align:middle;
padding:0px 10px 0px 0px;
font-size:14px;
margin-right:6px;
color:#322e2f;
}
div.whitebox div.clear {clear:both}
/* Footer */
#content div.footer {font:15px Verdana, Geneva, sans-serif; text-align:center; line-height:30px; padding:0px 5px}
#content div.footer a:link {color:#A0A0A0}
#content div.footer a:visited {color:A0A0A0}
#content div.footer a:hover {color:#E77400}
/* Signature */
#signature {
padding:15px 0px 0px 0px;
text-align:center;
color:#FFF;
font:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size:10px
}