and when i test with the firefox its hanging. and when i test this link with Safari and google chrome its working fine, but what is the Problem with the firefox ???
Your 'navigation' is structured out of divs rather than an unordered list (UL) and list items (LI) and you have told them all to float left.
Assuming that the div with no ID but aligned 'center' which holds all those divs is the navigation then you need to ensure that the background covers all of that div and not just the 'menu item' divs.
You would also need to set a height on that div or overflow:hidden.
To be honest, it's an unusual way of making a menu.
Also, what CSS sheets you have are in an odd order and there is an awful lot of inline styling going on....you should look to move all that to a proper stylesheet.
Just load in the multiple stylesheets separately, or just load the ones in that matter. But Paulie I think nailed it on the head. The menu IS centered, but it's not wide enough to take up 100% of the space. What it looks like you really need is that navBG.png to be the background of either the ul or .menu class.
I don't get any of the FireFox hanging problems you mention - seems to work just fine on mine.
Try to get it into Codepen and then we can fiddle with it.
The menu IS wide enough to take up the full width...it's a div after all but the background has been applied to the internal list divs (sigh) rather than the 'wrapping' div.
Hi guys, How are you? Can you guys tell me how I am alignment this navigation with the image slider. Please check this link. http://test.brandsprinter.com/ColorFadingMenu_2_2/index.html Thanks ADNAN ALI
and when i test with the firefox its hanging. and when i test this link with Safari and google chrome its working fine, but what is the Problem with the firefox ???
Your 'navigation' is structured out of divs rather than an unordered list (UL) and list items (LI) and you have told them all to float left.
Assuming that the div with no ID but aligned 'center' which holds all those divs is the navigation then you need to ensure that the background covers all of that div and not just the 'menu item' divs.
You would also need to set a height on that div or overflow:hidden.
To be honest, it's an unusual way of making a menu.
Also, what CSS sheets you have are in an odd order and there is an awful lot of inline styling going on....you should look to move all that to a proper stylesheet.
Ouch. You might want to remove all the inline-styling, first. From there we can help you restructure your page with CSS.
how can i share my style-sheet with you guys ????
go to codepen.io and create a pen there
http://codepen.io. HTML goes on the left, CSS goes in the middle and JS goes on the right.
I have multiple CSS and JS files, How can I upload in codepen??
@adnan4ali Hmm. For the CSS, try importing them.
You could but that's not the issue.
This is purely an issue relating to HMTL & CSS.
We don't need the JS file as they aren't related to your problem...which incidentally I have already given you the answer to.
Put your HTML is the relevant section and your CSS into the second section.
However, BEFORE you do that, strip out all of the inline styling that is in your HTML into a separate CSS stylesheet.
Unfortunately, we don't have the time to wade through lines of code to remove stuff that shouldn't be there.
Just load in the multiple stylesheets separately, or just load the ones in that matter. But Paulie I think nailed it on the head. The menu IS centered, but it's not wide enough to take up 100% of the space. What it looks like you really need is that navBG.png to be the background of either the ul or .menu class.
I don't get any of the FireFox hanging problems you mention - seems to work just fine on mine.
Try to get it into Codepen and then we can fiddle with it.
The menu IS wide enough to take up the full width...it's a div after all but the background has been applied to the internal list divs (sigh) rather than the 'wrapping' div.
I whipped this up in a couple of minutes: http://codepen.io/Paulie-D/pen/IJsFt
YVW.
Please check these files and tell men what should i do.
HTML http://test.brandsprinter.com/ColorFadingMenu_2_2/html.txt
CSS http://test.brandsprinter.com/ColorFadingMenu_2_2/generic.css http://test.brandsprinter.com/ColorFadingMenu_2_2/main.css http://test.brandsprinter.com/ColorFadingMenu_2_2/themes/8/js-image-slider.css http://test.brandsprinter.com/ColorFadingMenu_2_2/themes/8/tooltip.css
JS http://test.brandsprinter.com/ColorFadingMenu_2_2/main.js http://test.brandsprinter.com/ColorFadingMenu_2_2/jquery.js http://test.brandsprinter.com/ColorFadingMenu_2_2/jquery-color.js http://test.brandsprinter.com/ColorFadingMenu_2_2/themes/8/js-image-slider.js
Please see my Codepen.
I have checked codepen, it seems fine, but can you please explain why fad option is not showing there while moving the mouse from one manu to other??
Paulie_D you are really great work, thanks
I presume that fade is a jquery animation. I haven't included that...I'm just showing you the proper structure of the menu.