Tweet
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.
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.
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
//-----------------------------------------
//| [email protected] |
//|---------------------------------------|
//| //\\ //\\ /// | |
//| // \\// \\ / | 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>
Comment