Jump to content

Navigation Bar


razayel
 Share

Recommended Posts

Hi guys,I'm working on a navigation bar. When Im trying to view it in a browser, it doesnt work.I dont know what the problem is.this is my HTML file:

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Test</title> <link rel="stylesheet" href="style bar.css" /></head> <body> <ul id="Menu">	<li><a href="#Home" class="Home">Home</a></li>    <li><a href="#About" class="About">About</a></li>    <li><a href="#Admissions" class="Admissions">Admissions</a></li>    <li><a href="#Concact" class="Concact">Concact</a></li>    <li><a href="#Workshops" class="Workshops">Workshops</a></li></ul>  </body></html>

And this is my CSS file:

* { margin: 0; padding: 0; }ul#Menu {	width: 517px; margin: 250px auto;	list-style: none;}ul#Menu li { display: inline; }	ul#Menu li a {	display: block; float: left; height: 56px;	background-image: url(navigation.png); text-indent: -9999px;}	ul#Menu li a.Home {		width: 96px; background-position: 0 0;		}		ul#Menu li a.About {		width: 108px; background-position: -96px 0;		}		ul#Menu li a.Admissions {		width: 97px; background-position: -204px 0;		}		ul#Menu li a.Concact {		width: 121px; background-position: -301px 0;		}		ul#Menu li a.Workshops {		width: 94px; background-position: -422px 0;		}			ul#Menu li a.Home:hover, ul#Menu li a.Home:focus {		background-position: 0 -56px;		}		ul#Menu li a.About:hover, ul#Menu li a.About:focus {		background-position: -96px -56px;		}		ul#Menu li a.Admissions:hover, ul#Menu li a.Admissions:focus {		background-position: -204px -56px;		}		ul#Menu li a.Concact:hover, ul#Menu li a.Concact:focus {		background-position: -301px -56px;		}		ul#Menu li a.Workshops:hover, ul#Menu li a.Workshops:focus {		background-position: -422px -56px;		}	a { outline: none; }

And here is my PNG File:navigation.pngThank you,Raoul

Link to comment
Share on other sites

Your css filename has a space in it? Not allowed. Replace it with an underscore or something and give it a bash.

Link to comment
Share on other sites

also, a description of the problem is generally more helpful. although I'm sure chibeniku's suggestion will help.

Link to comment
Share on other sites

The problem is that the image is not shown.If I test it, I can see that when I mouse over the page, the mouse changes to a hand.That means that the HTML is working, but the css and/or the image isnt working.

Link to comment
Share on other sites

Try removing/replacing the space in your CSS file name, like chibineku suggested. See what that does. If that doesn't work check your file paths (both image and CSS) to make sure they are correct.

Link to comment
Share on other sites

A question, but not pertinent to your problem: when you say concact, do you mean contact? As music_lp90 is implying, is the path to your png correct?

Link to comment
Share on other sites

A question, but not pertinent to your problem: when you say concact, do you mean contact? As music_lp90 is implying, is the path to your png correct?
My english is bad. :) But what is music_lp90?
Link to comment
Share on other sites

My english is bad. :) But what is music_lp90?
look at the names of the people posting trying to help you....anyway, as for your problem, you should also try including a background-image property to each of the selectors and pseudo classes where you are using background-position so it knows which image to look for.http://www.w3schools.com/css/css_image_sprites.asp Edited by thescientist
Link to comment
Share on other sites

look at the names of the people posting trying to help you....anyway, as for your problem, you should also try including a background-image property to each of the selectors and pseudo classes where you are using background-position so it knows which image to look for.http://www.w3schools.com/css/css_image_sprites.asp
hey, thanks !I know what the problem is.I made a mistake in Photoshop. The layers were fit all together.I have to make seperate layers.
Link to comment
Share on other sites

really? That .png file looks fine the way it is. All a sprite does is take any normal image and adjust the viewport based on coordinates, so you only need to have one image instead of multiple images. I don't see what layers would have to do with it, other than changing the final output, unless somehow it is different from what you posted.

Edited by thescientist
Link to comment
Share on other sites

Hi!Are U Sure Na Your Stylesheet Name Is styleBar.css In Your Folder?<link rel="stylesheet" type="text/css" href="styleBar.css" />
the first half of this thread already went over that. He changed it from "style bar" to "styleBar". Edited by thescientist
Link to comment
Share on other sites

really? That .png file looks fine the way it is. All a sprite does is take any normal image and adjust the viewport based on coordinates, so you only need to have one image instead of multiple images. I don't see what layers would have to do with it, other than changing the final output, unless somehow it is different from what you posted.
wow, Im shocked. I was started all over again and made it with seperate layers, but that wasnt the problem.I dont understand it anymore. :)
Link to comment
Share on other sites

anyway, as for your problem, you should also try including a background-image property to each of the selectors and pseudo classes where you are using background-position so it knows which image to look for.http://www.w3schools.com/css/css_image_sprites.asp
Link to comment
Share on other sites

with an image file navigation.png 567px x 112px this will work

* { margin: 0; padding: 0; }ul#Menu {width: 567px; margin: 200px auto;list-style: none;}ul#Menu li {display: inline; }ul#Menu li a {display: block; float: left; height: 56px; text-indent: -9999px; background-image: url(navigation.png);}ul#Menu li a.Home {width: 84px; background-position: 0 0;}ul#Menu li a.About {width: 98px; background-position: -84px 0;}ul#Menu li a.Admissions {width: 144px; background-position: -182px 0;}ul#Menu li a.Concact {width: 105px; background-position: -326px 0;}ul#Menu li a.Workshops {width: 135px; background-position: -431px 0;}ul#Menu li a.Home:hover, ul#Menu li a.Home:focus {background-position: 0 -56px;}ul#Menu li a.About:hover, ul#Menu li a.About:focus {background-position: -84px -56px;}ul#Menu li a.Admissions:hover, ul#Menu li a.Admissions:focus {background-position: -182px -56px;}ul#Menu li a.Concact:hover, ul#Menu li a.Concact:focus {background-position: -326px -56px;}ul#Menu li a.Workshops:hover, ul#Menu li a.Workshops:focus {background-position: -431px -56px;}a { outline: none; }

Link to comment
Share on other sites

with an image file navigation.png 567px x 112px this will work
* { margin: 0; padding: 0; }ul#Menu {width: 567px; margin: 200px auto;list-style: none;}ul#Menu li {display: inline; }ul#Menu li a {display: block; float: left; height: 56px; text-indent: -9999px; background-image: url(navigation.png);}ul#Menu li a.Home {width: 84px; background-position: 0 0;}ul#Menu li a.About {width: 98px; background-position: -84px 0;}ul#Menu li a.Admissions {width: 144px; background-position: -182px 0;}ul#Menu li a.Concact {width: 105px; background-position: -326px 0;}ul#Menu li a.Workshops {width: 135px; background-position: -431px 0;}ul#Menu li a.Home:hover, ul#Menu li a.Home:focus {background-position: 0 -56px;}ul#Menu li a.About:hover, ul#Menu li a.About:focus {background-position: -84px -56px;}ul#Menu li a.Admissions:hover, ul#Menu li a.Admissions:focus {background-position: -182px -56px;}ul#Menu li a.Concact:hover, ul#Menu li a.Concact:focus {background-position: -326px -56px;}ul#Menu li a.Workshops:hover, ul#Menu li a.Workshops:focus {background-position: -431px -56px;}a { outline: none; }

how do you know the width and the background-position?
Link to comment
Share on other sites

you gave the width, the height should be the total height of the before hover, and after hover image placed over the top of each other. Then it is a matter of trial and error until you get the required result, but i was able to get a guide by measuring distance between left and right edges of each button.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...