Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts

    CSS nav bar not dispalying image

    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.

  • #2
    New to the CF scene
    Join Date
    Sep 2011
    Location
    Pune, Inida
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In ".bgheight" class bracket(}) is not closed.

    .bgheight { height: 100%;}


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •