Image Not Showing

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>&bull;<span> (772) 497-4344 <span>&bull;</span> <a href="mailto:barrettrod@comcast.net">barrettrod@comcast.net</a></div>

</div><!-- #content END -->

<div id="signature">Copyright &copy; 2011 Barrett Rod Company - All rights reserved - Designed By Peter Kazazes &amp; 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
}

#top has no content, therefore no dimensions, so nowhere for a background image to appear. Giving it padding-top:30px; will provide space for the image.

You have a white background on the div inside the #top div, which is covering over the background:

#content div.whitebox {
  [COLOR="Red"]background: none repeat scroll 0 0 #FFFFFF;[/COLOR]
  font-family: Verdana,Geneva,sans-serif;
  [COLOR="Blue"]margin: 10px 0 0;[/COLOR]
  min-height: 400px;
  padding: 20px 5px;
  width: 790px;
  z-index: 1;
}

So remove that line in red above.

You will also no doubt want to close the gap between the #top box and the menu. So change the line in blue above to

margin: 0;

Ralph,

Thank you so much! That worked amazing!!

If it’s not a problem, could you explain to me why the background and margin were causing those problems?

OK, imagine you create a div and set its background to red. That’s like lying a sheet of red paper on a table.

Then inside your red div, place another div, and color that div white. That’s like lying a white sheet of paper over the top of the red sheet of paper.

That is, inner elements sit over the top of container elements visually.

So even though your container div had a background image, your inner div had a white background, so was covering up the container background.

The reason for removing the margin on the whitebox was because of collapsing margins. Basically, the margin of the whitebox hangs outside its container and pushes it away from the menu.

Thank you for taking your time to explain this to me.

If you changed the z-index on the inner and outer div, could that also fix the problem?

Personally, I wouldn’t call it a problem. But using z-index is unlikely to work. If you had the inner element behind its container, you’d also be hiding the text and everything else. But to be honest, I don’t think you can do that anyway.

Thanks for your help Ralph and taking your time to explain this. I really appreciate it! :slight_smile:

Well… I’m seeing a whole slew of issues with this code.

  1. The comment placement is likely to trip rendering bugs in IE and even some versions of FF… If you used MEANINGFUL names instead of presentational ones, you could get rid of the starting comments altogether, and switching the ending comments to BEFORE the closing tag would prevent them from causing problems too.

I mean really:
<!-- Content –><div id=“content”>

No, opening a div called content is the content? I never would have guessed :smiley: (you see that one all the time – serious “what the” territory – It’s like saying copyright © – oops, that’s on the page too…)

  1. The heading order is nonsensical – and I’d suggest swinging an axe at that silly and impersonal “welcome” nonsense.

  2. there are multiple div — #navBar, #banner – that serve NO good purpose whatsoever on such a simple layout.

  3. with classes like “left” and “right” you might as well go back to using HTML 3.2

  4. Presentational images in the markup – That banner.jpg has no real business being there; that’s CSS’ job.

  5. the lack of a reset or declaring margins/paddings on EVERYTHING in the CSS likely explains the four different layouts I’m seeing in four different browsers here.

  6. The CSS is stuck in specificity hell with all the unnecessarily selector use.

  7. the use of PX fonts on BODY pretty well shtups accessibility.

  8. the keywords meta is overstuffed and redundant to itself. It’s called “keyWORDS” – not keyphrases. Think of it like a word jumble.

Of course, that’s before we talk about the presence of jquery for NOTHING useful. (not that it EVER serves a good purpose besides bloating out the page)

So… first order of business is to bring the HTML into this century. This means using XHTML 1.0 STRICT instead of Tranny. Transitional is for supporting old/outdate 1997 style coding practices, NOT for building new websites!

Which if I wrote the markup would look something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="Description"
	content="Custom fishing rods for the serious fishermen"
/>

<meta
	name="Keywords"
	content="barrett, fishing, rod, fish, custom, casting, jigging, fly, pier, boat"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Barrett Fishing Rod Company
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		Barrett Rod Company
		<span></span>
	</h1>

	<ul id="mainMenu">
		<li class="current"><a 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 id="content">

		<img src="graphics/rod_spectrum.jpg" alt="Custom Fishing Rods" class="leadingPlate" />

		<div class="afterPlate">
			<p>
				Barrett is a custom fishing rod builder and full rodsmith shop. We specialize in making custom 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>
		<!-- .afterPlate --></div>

	<!-- #content --></div>

	<div id="footer">
		Port St. Lucie, FL <span>&bull;</span>
		(772) 497-4344 <span>&bull;</span>
		<a href="mailto:barrettrod@comcast.net">barrettrod@comcast.net</a>
	<!-- #footer --></div>

<div id="disclaimer">
	Copyright &copy; 2011 Barrett Rod Company -
	All rights reserved -
	Designed By Peter Kazazes &amp; Joshua Jorgensen
<!-- #disclaimer --></div>

</body></html>

If I have time later I’ll put together the CSS that would make that work.

Here’s what I came up with:
Barrett Fishing Rod Company

Took the time to address a few smaller issues – like the background having a vertical striping issue – a gaussian blur kind-of helped, but it with the green channel involved in a mostly blue image, there’s gonna be striping – so I applied very lightly a brush-metal texture. Color depth issues of that sort are often quite easily fixed using a texture. Doesn’t have to be over the top, just enough to mask the issue.

I also changed the menu so it’s not flush up against one side – it looked weird flush-left, when on the right it didn’t quite reach.

Instead of the dual float left/right, I did the columns with the float left and margin method. I find said method a bit more reliable (unless you have something like a image or table which if too wide will “drop”) and it’s a bit simpler too. Margins collapse under floats, so to push the right content over, you just make the margin as big as the float (plus any desired extra space).

Side note – have I mentioned how much I HATE Verdana? :smiley:

Wow! Thank you so much for your help and taking your time to help me with the coding problems. It really means a lot to me! You are blessing! :slight_smile: Hopefully I can help you out with something one day to return the favor.

Thank-you sitepoint for these forums! :tup: