Jump to content
Lizard Wizard Coding Club

rollover problem


Recommended Posts

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

post-14855-055852700 1315515208_thumb.png

Link to post
Share on other sites

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!

Link to post
Share on other sites

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.

Link to post
Share on other sites

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

Link to post
Share on other sites

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?

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites
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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...