CSS nav bar not dispalying image

ipatch · 09-12-2011, 04:33 AM

Today, I have been working on a simple webpage using CSS and HTML. I have made some progress, but now I am stuck trying to display the nav bar in the html page. I am using in an inline stylesheet to keep things simple for the time being. I created a file caled nav.png, but the png image is not displaying on the HTML page.

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang=en>
<head>
	<meta http-eqiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Blue Moon Wordpress Theme</title>
	<style type="text/css">
	/*CSS code goes here*/
	* { margin: 0; padding: 0; }
        
    #bg { position: fixed; top: 0; left: 0; }
    .bgwidth { width: 100%; }
    .bgheight { height: 100%; 
	
	#nav {
		background: url(nav.png);
		height: 38px;
		width 876px;
		margin; 0 auto;
	}
	#nav span {
		display: none;
	}
	#nav li {
		list-style-type; none;
		float: left;
	}
	#nav a {
		height: 38px;
		display: block;
	}
	#list1 { width: 112px; }
	#list2 { width: 112px; }
	#list3 { width: 250px; }
	#list4 { width: 120px; }
	h1
	{
	font-family:"Helvetica";
	}
	</style>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	
	<script>
                $(function() {   
                
                        var theWindow        = $(window),
                            $bg              = $("#bg"),
                            aspectRatio      = $bg.width() / $bg.height();
                                                                
                        function resizeBg() {
                                
                                if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
                                    $bg
                                        .removeClass()
                                        .addClass('bgheight');
                                } else {
                                    $bg
                                        .removeClass()
                                        .addClass('bgwidth');
                                }
                                                        
                        }
                                                                
                        theWindow.resize(function() {
                                resizeBg();
                        }).trigger("resize");
                
                });
        </script>
	<! -- Javascript to change the background-color -->
	<script>
<!--
//Feel free to copy and modify this script, but please keep the comment lines!
//Written by Mattias Sjöberg 8/8-1996
//-----------------------------------------
//| mattias.sjoberg@swipnet.se |
//|---------------------------------------|
//| //\\ //\\ /// | |
//| // \\// \\ / | Advertise |
//|// \\ /// | |
//| Mattias / | Here |
//| Sjoberg /// | |
//|---------------------------------------|
//| www.geocities.com/SiliconValley/7116 |
//| Vote for my page the above URL |
//-----------------------------------------


var now = new Date();
var hours = now.getHours();
var psj=0;

//18-19 night
if (hours > 17 && hours < 20){
document.write('<body bgcolor="orange" text="#FFFFFF">')
}

//20-21 night
if (hours > 19 && hours < 22){
document.write('<body bgcolor="orangered" text="#FFFFFF">')
}

//22-4 night
if (hours > 21 || hours < 5){
document.write('<body bgcolor="black" text="#FFFFFF">')
}

//9-17 day
if (hours > 8 && hours < 18){
document.write('<body bgcolor="deepskyblue" text="#FFFFFF">')
}

//7-8 day
if (hours > 6 && hours < 9){
document.write('<body bgcolor="skyblue" text="#FFFFFF">')
}

//5-6 day
if (hours > 4 && hours < 7){
document.write('<body bgcolor="steelblue" text="#FFFFFF">')
}


//-->
</script>	
</head>
<! -- END OF HEAD -->
<body>

	<img src="coffee_mech.png" id="bg" alt="">
	
	<ul id="nav"
		<li id="list1"><a href="#"><span>Home</span></a></li>
		<li id="list2"><a href="#"><span>About</span></a></li>
		<li id="list3"><a href="#"><span>Greasemonkey Scripts</span></a></li>
		<li id="list4"><a href="#"><span>Resume</span></a></li>
		<li id="list5"><a href="#"><span>Store</span></a></li>
	</ul>
<h1>Hello World!</h1>
</body>
</html>

Attached is the nav.png As it currently stands, the nav.png file resides in the same directory as the index.html I was loosely following the example provided in this post.

Avinash13 · 09-12-2011, 08:19 AM

In ".bgheight" class bracket(}) is not closed.

.bgheight { height: 100%;}