...

View Full Version : 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.



<!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 (http://www.threestyles.com/tutorials/coding-apples-navigation-bar-using-css-sprites/).

Avinash13
09-12-2011, 08:19 AM
In ".bgheight" class bracket(}) is not closed.

.bgheight { height: 100%;}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum