Menu Width and bg image swapping

Poster: alabuc
Dated: Monday March 29 2004 - 21:18:34 BST

hey everyone... ok heres the deal, i just started making a new site, its at http://www.alabu.com/hal/indexn.html (just for now it will be milk-soap.com later) but anyways, ive run into a couple of issues.

1. there seems to be an extra "something" on the right side of the menu that keeps the contents of the menu from centering.

2. i cant seem to be able to control the height of the menu.

3. i would like to have a bg image (and rollover image) for the 1st level menu items but then just a flat color for all of the submenus, also an image for the 1st level separators but just a flat color for the submenu separators.

well i think thats all if anyone has any suggestions it would be much appreciated.

~Hal

EDIT: forgot to include a link to my menu data file.... http://www.alabu.com/hal/java/menu_data.js

Poster: John
Dated: Monday March 29 2004 - 22:27:48 BST

Hal -

First things first. You're running RC31 (no longer supported). We went through RC50-something, 5.0 final, and now are at 5.1. In all, literally close to 50 levels down

Bring it up to snuff at http://milonic.com/, then come on back and we'll go from there.

Poster: alabuc
Dated: Tuesday March 30 2004 - 2:55:53 BST

wow didnt know i was that far behind... i have a new problem now, (btw the link to the new menu on the milonic site is bad, it needs a lowercase "L" in "latest") but anyways my current website is at http://www.alabu.com (which is a live site so i cant really afford to have it down long), when i implemented the latest version my search box would no longer accept text, the font size changed, and my link fading script (http://www.alabu.com/java/fade.js) worked very sporradically in the menu (i actually dont need, or want the link fading script to affect the menu), needless to say i copied back the old files until i can figure out whats wrong. you can see the new menu version implemented at http://www.alabu.com/test.html any ideas what to do? thanks!

~Hal

Poster: John
Dated: Tuesday March 30 2004 - 5:10:38 BST

Yeah, things move pretty quickly around here!

Starting from the top, a few quick items...

1.

You built up a color and style, but then zeroed it out. Either change the 0 to 1 or more, or you can leave all 3 items out.

2. separatorsize="5"; (and anything that is just a simple numeric value) - should be separatorsize=5;

3. pagecolor="000000";, should be pagecolor="#000000";

4. In your search form, you didn't include the type=form; parameter.

5. I'm not sure about the single quotes (') in the form, or about the doubles, even though they are escaped.

6. The system is pretty forgiving, but I think I'd put borderwidth=1; up with the other parameters (style=menuStyle;).

Poster: alabuc
Dated: Tuesday March 30 2004 - 12:45:09 BST

hmm, now my search box doesnt show up, and the links still fade if you go over them fast... the menu data file for the testing page is at http://www.alabu.com/java/testing/menu_datatest.js

EDIT: ok i got the search box working (forgot the closing semicolon after type=form) i just need to figure out the link fading issue. i believe there is a way to make href's so they dont fade but i dont know how to do it, and i wouldnt know how to apply that to the menu. Any ideas? the script is at http://www.alabu.com/java/testing/fade.js

Poster: Maz
Dated: Tuesday March 30 2004 - 18:53:24 BST

You are looking at your menu i IE, those lines at the end of your style overfilter, fade, alpha, shadow only work in IE browsers, why not just remove them all. BTW remove all // lines completely, some older browsers don't like them, you don't need 0 values either.

//subimage="";
subimagepadding=0;
//overfilter="Fade(duration=0.01);Alpha(opacity=100);Shadow(color='#777777', Direction=135, Strength=0)";
outfilter="randomdissolve(duration=0.01)";

maz

Poster: alabuc
Dated: Tuesday March 30 2004 - 20:29:58 BST

ok, i understand the filters only work in IE... but how do i stop the link fading script from fading menu items? thanks again

~Hal

Poster: John
Dated: Tuesday March 30 2004 - 20:36:55 BST

Maybe I'm just older than usual today, Hal, but I'm having trouble understanding just what is fading. I don't see that happening anywhere.

Poster: alabuc
Dated: Tuesday March 30 2004 - 20:51:59 BST

hmmm, works on my machine (xp pro)... ive tried it in NS7, mozilla, opera, and IE of course. if you mouse over a link under "Reviews" it should fade to purple. anyways, if you open a submenu and move the mouse up and down it rapidly the links fade, sometimes the color will stick and wont fade out, so i would like to just disable the fading all together, i can stop links from fading by adding

onmouseover="clearFade()"

to them or by setting their class to "ignore" but i dont know how to do this in the menu... any ideas? thanks...

~Hal

Poster: John
Dated: Tuesday March 30 2004 - 21:17:52 BST

OK, now I see it (barely). It's a very subtle change. I had been working with just the main (top) menu. I see the fade in the side menu, but do not in the top menu unless, as you say, run over the menu items really fast.

Please don't take this wrong, but I've gotta ask (I'm a developer, too) - what's the point? You're selling soap, not glitz. My personal (not Milonic) opinion is leave it out completely.

See http://www.milonic.com/itemproperties.php for onclass=.

Poster: alabuc
Dated: Tuesday March 30 2004 - 22:59:07 BST

ok you have a good point, i canned the fading script, now back to my original problems on http://www.alabu.com/hal/indexn.html i got my bgimage swapping fixed, the only problems now is that i can't specify a height for the menu, and i cant get the contents of the menu centered. i want the height to be 25 pixels and the text to be 70% of that, right now i have to make the text larger in order for the menu to be 25 pixels tall because it seems to ignore the menu height i speceified. and as for the menu centering i dont know whats going on, its all more left than it should be, any ideas?

Poster: Maz
Dated: Wednesday March 31 2004 - 4:17:39 BST

Just above your main menu items add

menuheight=25; or menuheight="25px";

the first should work without the px's.

If your text, padding and margins adds up to more than that, then it will ignore your menuheight.

To center text up in your main menu styles include
align="center";

where you want to center the menu it should be with ;
screenposition="center";

You need to remove these, and don't leave empty values or 0's.

//headercolor="#FFFFFF";
//headerbgcolor="#ffffff";
//subimage="";
//subimagepadding="0";

maz

Poster: alabuc
Dated: Wednesday March 31 2004 - 14:11:47 BST

i think i did all the stuff you said, still no luck, the menu is shorter than 25px (so i think the font size is probably about right but the menu isnt tall enough) and also its still off-center. thanks again

~Hal

http://www.alabu.com/hal/java/menu_data.js

Poster: alabuc
Dated: Wednesday March 31 2004 - 14:29:36 BST

i made the menu a solid color so you could can see now that the actual menu is centered but the contents of the menu isnt... for some reason that extra bit of menu on the right doesnt show up if i set a bgimage, it only shows if i have onbgcolor set.

Poster: Maz
Dated: Wednesday March 31 2004 - 14:36:07 BST

I just realized you have xhtml strict, you may want to consider transitional.

Either one, you will need to use CDATA around the javascript.

And a few other things if you use W3 validation service.

Take a look at my source code to see how to hide js using CDATA.

http://mercuryexposure.org

maz

Poster: alabuc
Dated: Wednesday March 31 2004 - 14:58:30 BST

yea i do use w3c validator... i would really like to keep it xhtml strict if i can, i dont really have a need for deprecated tags i dont think. i tried using CDATA, i think i implemented it correctly, yes? still stuck on centering issues...

~Hal

Poster: Ruth
Dated: Wednesday March 31 2004 - 17:55:36 BST

Change the menuheight="25px"; to itemheight="25px"; Also, remember that you are using the shadow in over/out filter so if you use a color that blends right into your background color then the menu will look 'shorter' in ie even though it's not. As to the centering issue. What is happening is a result of the menuwidth="80%"; For some reason when you specify that the 20% that the menu downsizes in width is being taken from the left side. I have no idea how to fix it. I tried everything of which my tired brain could think. I did find one thing, it's very inelegant and it's not perfect at all. Declare a width of 87px for each item and 81px for the last one [testimonial], itemwidth=87px; then insert non breaking line spaces in front of the word home. I had to play until I got enough to keep the items centered. They will remain centered in 800x600, in 1024x768 they are not quite centered but there is a bigger space on the left more like it should be, in 640x480 they shift completely to the right making testimonial butt right up to the end of the menu minus the 3px padding. Also, you need to declare a separatorpadding=3; to keep the words from hitting right on the separatorimage. I don't know what else to tell you, there may be some other item declaration or menu declaration that will solve the centering problem when you ask the menu to reduce by a percentage, but I don't know it.

Ruth

Poster: alabuc
Dated: Wednesday March 31 2004 - 18:32:06 BST

ok... i changed it to item height, works wonderfully. id rather not take that approach to centering its a lot of work and like you said its not very elegant plus would look different on different resolutions (i have a big monitor and browse at 1280x1024)... :-/ i comented out the filters for now until i figure out what the deal is. i noticed a couple if interesting things, its almost as if there is a dummy menu item next to testimonails... i moved the buttons around though and its still the same...

if i make the menu width 100% its dead center

if i align the menu contents right at 100% its all the way right

if i align the menu contents right at say 95% it doesnt go all the way right, there is something to the right of testimonails. the "something" gets larger the lower the percentage.

also when resizing the "something" gets smaller as you resize but is the last thing to go before adding scrollbars to the window. (hope that makes sense)

im way confused as to whats goin on with my menu if anyone here has any idea whats going on i would totally appreciated it... thanks!

~Hal

Poster: Maz
Dated: Wednesday March 31 2004 - 20:09:53 BST

I have messed around with centering a lot, its difficult to get every browser to act the same.

What I suggest is to keep it 100% menualign and screenposition centered and just add a transparent background to a left and right item so it disappears. A transprent image works quite well. Although text spacer might be just as good.

maz

Poster: alabuc
Dated: Wednesday March 31 2004 - 20:43:59 BST

thank you everyone!!! i decided to go with 100% width and use two transparent dummy menu items at each end. looks quite nice i think, it'l look even better when i finish filling the menu with stuff. thanks again!

~Hal

Poster: Ruth
Dated: Wednesday March 31 2004 - 21:11:24 BST

It's not just yours, if you take the sample 100% span and try to change that to 80% it will do the same thing that yours does. I would venture to guess, that the menualign functions with the 100% span, that what it does is find the size of the window, and expand equally the left of the first item and right of the last to span the window and that menualign="center"; tells the actual items to stay in the center of that span. I don't think the menualign functions if you try and tell it to span less than 100%.

Ruth

Poster: alabuc
Dated: Wednesday March 31 2004 - 22:48:58 BST

yea probably, but whatever the case thanks everyone for finding the solution!

~Hal