scrawny Posted September 8, 2011 Report Share Posted September 8, 2011 I had to put in the nav bar in the attached as a gif, which is a long story that has to do with getting the placement on the page exactly nailed down in a certain way regardless of the size of the monitor. Anyway, now the owner of the site wants rollovers on the navigation bar but when I create them then I have several images instead of just the one gif. This one gif is the only way I could find to keep the exact placement on the page that he wants. Is there anyway to create color-changing rollovers and still keep the gif? I can make image maps on the gif with my WYSIWYG app but I wonder if I could do something in the coding to also give a different appearance...or maybe another idea. Attaching a pic Quote Link to comment Share on other sites More sharing options...
Andrea Posted September 8, 2011 Report Share Posted September 8, 2011 That looks like a pretty simple menu - I don't see any reason to even use gifs. Do you have the site up somewhere so we can look the entire page and code you have? Quote Link to comment Share on other sites More sharing options...
scrawny Posted September 8, 2011 Author Report Share Posted September 8, 2011 http://joshmorris3d.com I've just got a bit of the first page done until this problem is worked out. He wants his header, his nav bar, his subheads and his captions to line up with his screenshots exactly as you see whether loading on a smartphone or an extra big gallery monitor. And the line between header and nav bar to stretch all the way across. After various tries at various things, this is the config I came up with to make it happen. I'm thinking I might have to create the 2 images for each of the nav. buttons and just forget about keeping that gif. I don't know if I can keep the alignment exactly lined up with the screenshot underneath if I do that. Thank you for your help! Quote Link to comment Share on other sites More sharing options...
Andrea Posted September 8, 2011 Report Share Posted September 8, 2011 I see the following issues: Your doctype is incomplete. You're not using an external stylesheet (instead of internal and inline styling) Use of deprecated tags (font) You're using a 2000px wide image, which means pretty much everybody will have a horizontal scroll bar. What you could do instead is: http://aandbwebdesign.com/KSforum/scrawny.html Now this is just the rough outline, you'd need to finish styling the navigation and its hovers, but I think this is a much cleaner way to achieve what you're looking for. Let me know if you have any questions. Quote Link to comment Share on other sites More sharing options...
scrawny Posted September 9, 2011 Author Report Share Posted September 9, 2011 Thank you for all your efforts! Really nice of you. But the owner of the site is also a graphics person and he has wanted this to look exactly as it is. I've got everything on the first page done now according to his wishes. I created 2 different images for the rollovers in my navigation bar. One is a png and one is a gif. They're not working! I don't understand why. They worked perfectly in Preview mode with my WYSIWYG but now that I've uploaded them, no good. Please have a look. http://joshmorris3d.com Quote Link to comment Share on other sites More sharing options...
danhodge Posted September 9, 2011 Report Share Posted September 9, 2011 I would take the advice, about the silver line especially - a horizontal scroll bar is a worst nightmare for a lot of people, and it makes the website looks unprofessional... Is it an issue with the Javascript, or maybe since it has been uploaded? Also, what are you testing it on(Browser)? As Andrea pointed out, your Doctype is incomplete, which has caused me several issues on Internet Explorer before... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> This is the full W3C doctype (to my understanding, the latest one), so if you correct the code at the top of your page with this, it might work? Quote Link to comment Share on other sites More sharing options...
Andrea Posted September 9, 2011 Report Share Posted September 9, 2011 TBut the owner of the site is also a graphics person and he has wanted this to look exactly as it is. I didn't finish the layout - you'd just have to add some margins and paddings etc and style the navigation and you can get this exactly like he wants it and like it is now- but it'd be done right. And whatever you do - that 2000px wide graphic makes absolutely no sense. Quote Link to comment Share on other sites More sharing options...
Andrea Posted September 9, 2011 Report Share Posted September 9, 2011 And, btw, I looked at your page with my iphone and it looks off - the images are stuck on the left side and I have all that black to the right I can scroll around in - with nothing there but darkness. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted September 9, 2011 Report Share Posted September 9, 2011 As a quick side note... There should be absolutely no reasy why the website should be as wide as it is. You could easily get the same effect by creating an image of the horizontal line between the Josh Morris logo and the navigation, and using repeating the background horizontally. Quote Link to comment Share on other sites More sharing options...
Andrea Posted September 9, 2011 Report Share Posted September 9, 2011 You could easily get the same effect by creating an image of the horizontal line between the Josh Morris logo and the navigation, and using repeating the background horizontally. That's what I did in my draft revision. If you check the source code, Scrawny, you'll see how it's done. Quote Link to comment Share on other sites More sharing options...
scrawny Posted September 9, 2011 Author Report Share Posted September 9, 2011 I'm sorry that I am an idiot. After beating my head against a wall all day I finally realized that I simply had not uploaded the javascript code that my WYSIWYG had generously output for me. Nothing like learning the hard way, I always say. Thank you and I'm sorry for the trouble. Quote Link to comment Share on other sites More sharing options...
Andrea Posted September 9, 2011 Report Share Posted September 9, 2011 The JavaScript doesn't fix your issue with the 2000px wide image. Almost everyone but the very few people who actually view at resolutions above 2000 will see a horizontal scroll bar - and those over will see the end of your line and just black afterwards. You really should listen - this is NOT good practice. Also - as I mentioned before, the page does not look right on the iPhone- your content is very close to the left and not centered. Quote Link to comment Share on other sites More sharing options...
scrawny Posted September 14, 2011 Author Report Share Posted September 14, 2011 The JavaScript doesn't fix your issue with the 2000px wide image. Almost everyone but the very few people who actually view at resolutions above 2000 will see a horizontal scroll bar - and those over will see the end of your line and just black afterwards. You really should listen - this is NOT good practice. Also - as I mentioned before, the page does not look right on the iPhone- your content is very close to the left and not centered. Quote Link to comment Share on other sites More sharing options...
scrawny Posted September 14, 2011 Author Report Share Posted September 14, 2011 That long bar was not my idea. The owner of the site wanted that, I told him he should try it on the iphone. I fear I will have a lot of redo on this site in future after people have seen it on different media. Quote Link to comment Share on other sites More sharing options...
scrawny Posted September 14, 2011 Author Report Share Posted September 14, 2011 Now I'm in a panic. If we take out the 2000 px bar, will that fix the whole problem? or need to do something else? Quote Link to comment Share on other sites More sharing options...
Andrea Posted September 14, 2011 Report Share Posted September 14, 2011 No need to panic - we're here to help. But no, removing that image will not fix your whole problem(s) - you have more than one, but it will take care of the horizontal scrolling issue. If you look at the code in the draft sample I worked up for you, you can see how you can display that bar without using up any unnecessary space. In addition to that, you also have these problems: Use of the line-break tag to create space Misuse of table for layout Missing alt tag for images Empty p tag Using 'h1' and 'h2' as a class name where it should be used as a header tag empty divisions Use of deprecated font tag That's all I see at a quick glance. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted September 14, 2011 Report Share Posted September 14, 2011 If we take out the 2000 px bar, will that fix the whole problem? If by "the whole problem" you mean the width issues, then yes, taking out that bar will fix things. Or, as I and others have suggested, you make the bar a background image. You get all of the benefits of the bar without increasing page width, and it will repeat so the bar will stretch/compress based on screen size to fit the page. Quote Link to comment Share on other sites More sharing options...
scrawny Posted September 14, 2011 Author Report Share Posted September 14, 2011 That's what I did in my draft revision. If you check the source code, Scrawny, you'll see how it's done. Quote Link to comment Share on other sites More sharing options...
scrawny Posted September 14, 2011 Author Report Share Posted September 14, 2011 I'll try to wade thru all these mistakes I've made. Between my outdated knowledge and my game artist siteowner's wishes, it seems quite pathetic. Thank you so much. Quote Link to comment Share on other sites More sharing options...
Andrea Posted September 14, 2011 Report Share Posted September 14, 2011 It's only pathetic if you leave the mistakes after they were pointed out to you. Now that you know better, you can do better. And as I said before, we're happy to help and explain if something doesn't make sense. Quote Link to comment Share on other sites More sharing options...
scrawny Posted September 14, 2011 Author Report Share Posted September 14, 2011 I'm doing the most important thing first. Just on the index page, I've changed that 2000 px wide bar to a background repeating bar. I know the CSS is very crude but it looks like the job is getting done. I don't have an iphone so can you please tell me if the alignment problems you saw before when pulled up on an iphone are fixed? http://joshmorris3d.com thank you Quote Link to comment Share on other sites More sharing options...
Andrea Posted September 14, 2011 Report Share Posted September 14, 2011 This is what I get on the iPhone: and Quote Link to comment Share on other sites More sharing options...
scrawny Posted September 15, 2011 Author Report Share Posted September 15, 2011 Thank you! I checked it too last night on an iphone and was relieved to see that the home page was aligned correctly with an endless line. I never would have figured it out, Josh Morris and I are in your debt. I'll put that on the other pages now. 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.