I have looked through your tutorial and learned how to center the spry menu bar on my page....everything looks good until I zoom out.
Then, the menu bar leaves the page on the right. I have my menus set to auto and a width of bar to 300 em which works for 100% magnification.
I played with the position (static, relative, absolute) but none of them do the trick.
Also is it true (I read somewhere online) that the timing of the submenues can not be changed? when one submenu is open it takes some time for it to close if the mouse hovers over the next menu item.
Thank you in advance.
p.s. I'm a newbie working with Dreamweaver CS 5.5 since February.
Have you tried zooming in and out in the browser? I never rely on DW to test my documents, I always have three different browsers open on my second screen and any change I make in the markup, I test in the browsers. After all, they are the products that our clients see, not DW.
Yes, I did try it in the browser and it still does it.
But as I was playing with it today I noticed that, with the menu widths set
to auto, if I change the width of the whole bar it does not effect it.
Either it changes to short or very long, no in between.
Does this signify anything?
I don't know where to start. The original SpryMenuBarHorizontal.css is 168 lines long, your modified version is 213 lines long.
The difference between the original and yours is colouring and spacing (auto) which should result in the same number of lines being used.
It worries me when I see
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
and under the heading of LAYOUT INFORMATION: describes box model, positioning, z-order I see
And why did you change the value of left to inherit? The value for width is not necessary here because you had already given the element a width of auto in ul.MenuBarHorizontal ul
I could go on like this for the whole of the style sheet, but this will not help you. You must grasp what is going on.
Spry widgets are made up of three parts, namely HTML for the markup, CSS for the styling and JS for the manipulation which HTML and CSS can't do. JS changes the selectors from time to time such as adding a class of MenuBarSubmenuVisible to the submenu container. In this case, all of the styles that are given to the container (ul.MenuBarHorizontal ul) will be passed on when the visible class is added. The container is set to have a left position of -1000em which keeps it firmly out of sight. When you hover over or click the main menu item, the the JS captures the event and adds the class of MenuBarSubmenuVisible. CSS in turn sees that the class has been added and performs a left position of auto (the original value, not inherit) to it.
You must learn to read the comments and adhere strictly to those comments. You might like to read http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php #one to show you the way. Also have a look at http://labs.adobe.com/technologies/spry/samples/menubar/AutoWidthHoriz ontalMenuBarSample.html if you want auto widths.
Having said all of the above, your best way forward is to ressurect the original stylesheet and build up from there, keeping the points made above in mind and testing in the browsers at every change.
Thank you for taking the time.....
I did start again from original as you suggested and followed your and some
other helpful hints online and have created a new one.
Seems to look a lot better to me......
The original question I had about the zoom out happens now only if zoomed
below 66% so that is better, unless there is something I'm missing?
It is much better. To give you an idea of how I would go about doing the same, copy and paste the following into a new document and test in your favourite browsers.
I have placed the style rules in the head section for ease, but this would go into an external style sheet.