razayel Posted July 23, 2010 Share Posted July 23, 2010 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:Thank you,Raoul Link to comment Share on other sites More sharing options...
chibineku Posted July 23, 2010 Share Posted July 23, 2010 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 More sharing options...
thescientist Posted July 23, 2010 Share Posted July 23, 2010 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 More sharing options...
razayel Posted July 23, 2010 Author Share Posted July 23, 2010 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 More sharing options...
ShadowMage Posted July 23, 2010 Share Posted July 23, 2010 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 More sharing options...
razayel Posted July 23, 2010 Author Share Posted July 23, 2010 I removed the space. It is called styleBar now. But Ive found something out. I reduced the text-indent to 5 px. Now the text of the HTML is shown, but still the png isnt working. Link to comment Share on other sites More sharing options...
music_lp90 Posted July 23, 2010 Share Posted July 23, 2010 Where is the png saved? Is it in the same folder as the css file? Link to comment Share on other sites More sharing options...
chibineku Posted July 23, 2010 Share Posted July 23, 2010 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 More sharing options...
ProblemHelpPlease Posted July 23, 2010 Share Posted July 23, 2010 Try <link rel="stylesheet" type="text/css" href="styleBar.css" />instead of <link rel="stylesheet" href="styleBar.css" /> Link to comment Share on other sites More sharing options...
razayel Posted July 23, 2010 Author Share Posted July 23, 2010 Where is the png saved? Is it in the same folder as the css file?Yes, I've saved my PNG, CSS file, and my HTML file in the same folder Link to comment Share on other sites More sharing options...
razayel Posted July 23, 2010 Author Share Posted July 23, 2010 Try <link rel="stylesheet" type="text/css" href="styleBar.css" />instead of <link rel="stylesheet" href="styleBar.css" />Nope, that doesnt matter. Link to comment Share on other sites More sharing options...
razayel Posted July 23, 2010 Author Share Posted July 23, 2010 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 More sharing options...
thescientist Posted July 23, 2010 Share Posted July 23, 2010 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 Link to comment Share on other sites More sharing options...
HungryMind Posted July 23, 2010 Share Posted July 23, 2010 Hi!Are U Sure Na Your Stylesheet Name Is styleBar.css In Your Folder?<link rel="stylesheet" type="text/css" href="styleBar.css" /> Link to comment Share on other sites More sharing options...
razayel Posted July 23, 2010 Author Share Posted July 23, 2010 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 More sharing options...
thescientist Posted July 23, 2010 Share Posted July 23, 2010 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. Link to comment Share on other sites More sharing options...
thescientist Posted July 23, 2010 Share Posted July 23, 2010 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". Link to comment Share on other sites More sharing options...
razayel Posted July 23, 2010 Author Share Posted July 23, 2010 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 More sharing options...
thescientist Posted July 23, 2010 Share Posted July 23, 2010 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 More sharing options...
dsonesuk Posted July 23, 2010 Share Posted July 23, 2010 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 More sharing options...
razayel Posted July 31, 2010 Author Share Posted July 31, 2010 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 More sharing options...
dsonesuk Posted July 31, 2010 Share Posted July 31, 2010 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.