Clueless Posted September 16, 2009 Report Share Posted September 16, 2009 Trying my luck at using sprites for navigation, alas i can't even get any background images to show in an UL... or for that matter even a properly sized anything, just a text list. I have tinkered for 3 days with endless CSS combinations, checking codes... nothing. I havn't even gotten to the hover states yet.Where have i gone astray? > </pre> <ul> Buy Cook About FAQ Contact </ul> #nav { width:150px; height:90px; margin:0; padding:0; background-image: url(../Assets/BarrelNav12.png); background-repeat: no-repeat; overflow: hidden; } #nav li, #nav a { height:90px; display:block; } #nav li { float:none; list-style:none; display:inline; } #buy { width: 150px; height: 90px; } #cook { width: 150px; height: 90px; } #about { width: 150px; height: 90px; } Quote Link to comment Share on other sites More sharing options...
falkencreative Posted September 16, 2009 Report Share Posted September 16, 2009 First thing... In your code sample: ></pre> <ul id="?nav?"> Buy Cook About FAQ Contact When you are assigning id values to your nav (and also in the tag), you'll notice that the first quote and the second quote surrounding the id value aren't the same. The first quote is stylized (slanted slightly), whereas the second is normal (straight up and down). I'm not sure how you are coding this/what program you are using, but if you code in a rich text editor (which gives you the ability to bold, italicize, etc) it may automatically convert all "regular", straight up and down quotes to stylized quotes. Perhaps you also copied/pasted code from a file that used rich text, and that could have also caused the problem. Using a basic text editor (or one with syntax highlighting specifically for coding) should help with this problem. For print documents, these slanted quotes are correct -- they are supposed to be slanted around the text that is being quoted. For coding in HTML/other web languages, though, you want regular, up and down quotes. I'd suggest replacing your HTML sample with this, which uses the same "normal" quotes (or just finding and replacing all instances of the stylized quotes to regular quotes in your code). ></pre> <ul id="nav"> Buy Cook About FAQ Contact If that still isn't working, check your image link, and make sure the image is where you think it is. Also, I noticed that your menu items are styled inline (they will display in one line, rather than multiple) but your element only has a width of 150px (the same width as your s). With that code in place, your menu will only show one menu item, and the rest will be hidden because of "overflow:hidden" on the . Quote Link to comment Share on other sites More sharing options...
Clueless Posted September 16, 2009 Author Report Share Posted September 16, 2009 Now that is the best advice I've heard in days! The qoute error has certainly solved an issue... now I'll take a look at your other points. Benjamin, If you've helped me solve this problem I've been working on for literally 3 days... I just might put you in my will;) Quote Link to comment Share on other sites More sharing options...
falkencreative Posted September 16, 2009 Report Share Posted September 16, 2009 Glad to hear that I helped. If you aren't using a program that gives you syntax highlighting (basically, it colors/stylizes your text so the code is more readable) I'd definitely suggest you do. It'll help catch errors. That's what helped me discover the solution -- I pasted it into my code editor (Coda, in my case) and I noticed that the code highlighting looked strange, like it was ignoring the quotes. You might want to look at Notepad++ (Windows, free) or something like TextWrangler (Mac, free) or Textmate/Coda (Mac, paid). Quote Link to comment Share on other sites More sharing options...
Clueless Posted September 16, 2009 Author Report Share Posted September 16, 2009 You rock Benjamin, I have my sprite navigation locked up. I am using DW8 and it has some code highlighling... perhaps it's worth a look at going to Notepad++ Thank you greatly! Quote Link to comment Share on other sites More sharing options...
falkencreative Posted September 16, 2009 Report Share Posted September 16, 2009 Well, if you are using Dreamweaver, it may not be worth switching. The apps I mentioned are text editors only -- they won't have some of the visual features that Dreamweaver has. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted September 16, 2009 Report Share Posted September 16, 2009 Here is how I did it... http://www.visibilityinherit.com/code/sprites.php Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.