Mainmenu item seperation

[Ruth]

Hi,

I don't see a larger gap on IE6. I can only suggest you go into that table and make each td cell that has a data file in it a fixed width so you can make them the size you want if you are seeing that in your IE

I can't fix the firefox since it seems it is ignoring the width="100%"; in that table. I tried everything I can think would do something. I even tried to set the layerwidth up at the top in the head section to 1400 and the table still stayed the same size it is. It only does it in FF3+ and Opera9+, in all the others it works like it does in IE, NN9, 7.2, Safari, FF2 version. So, I don't know what to tell you on that. You can try to set the width of the table which has the width="100%" to width="1100px". That would probably make it OK in about 60% of your visitors since most screen resolution statistics I've found show that it's about that percentage of users on the web that have 1200 or less on their resolution.

I forgot that I put the menu into that EchoEcho floating layer, so it isn't reading the page, but the layer and just opens down. Set each of the subs that open off the main horizontal menus to openstyle="up"; As an example, the tweaks submenu would look like this [do the same for the other main menu subs

Code: Select all

with(milonic=new menuname("Tweaks")){
style=StyleSub;
margin=4;
openstyle='up'
top="offset=5";		/*for all subs off a horizontal menu*/
left="offset=5";	/*for all subs off a horizontal menu*/
aI("text=XP Pro Tweaks;image=SubXPProTweaks[1].gif;url=http://members.lycos.co.uk/surfto/tweaks.htm;showmenu=XPProTweaks;");
aI("text=Firefox v3 Tweaks;image=SubFirefoxTweaks[1].gif;url=http://members.lycos.co.uk/surfto/tweaks.htm#_._90;showmenu=FFTweaks;");
}

As to what that stuff is, don't ask me, it's something your site generates. I just did a view source and copied and pasted the page so I could give it back to you with the correct paths on things. I don't suggest you use that page, it was only so you could see how to put the function and the tables and such in your layout.

Please be aware that this function I found has nothing to do with Milonic, I just tried to find something quickly you could use to do what you want. I am still working on it, and I think I have a better solution that is done just from the menu, and not having to use that other stuff, but it will take time. I probably won't have it ready until later today. I just gave you something that you could see and use right now. I think what I'm doing will work better and it will be the same as what you see now, but it will center on the page and it will only be the menu .

Ruth

[selvan777]

Ruth, you're the best, thanks for all this work.

With the new being in just the menu excites me because with the way it is now, I can't do much editing using Word and still have a working page. I know Word is not the best choice for html but, hey, it's free since I already have it.

Thanks again.

[Ruth]

I do not believe this, I lost everything I had written grrrr.

OK, here is a link to a file with a new page, new data file and one image. I think it does what you want, but not at the bottom of the page. It is at the top at 200px but when it scrolls it stays right at the top, not at 200px when you scroll down. Unzip the file and put the page where you put the other one, put the data file where you have your data files, and put the blank.gif in the images folder.

http://support.milonic.com/ruth/selvan1.zip

Two things to note:

1. on the page you'll see an addition to your css codes. Look at the bottom where the div.Section1 is and you'll see two classes I created. Those were created to do borders around the items.

2. in the ruth_data.js file you'll see that off and on border has been removed and offclass and onclass have been added using those classes I created.

The reason for the creation of the classes is that the borders did not look right after I made the menu looks like the items were spaced apart. In order to get that look I had to add menubgcolor="transparent"; if you do not specify a color menubgcolor by default is same as the offbgcolor, so to get that spaced out look I made the menubgcolor transparent and added items of type=header so they wouldn't react on mouseover between each of the main menu items. Once I did that, the borders around the items didn't look as if there were borders since they were no longer sitting in that tan color. So, by creating css borders I could control the color of top right bottom left borders and I set the offclass border to outset so it looks kind of like a button and the onclass border to inset so it looks as if it depresses when you mouseover it.

I also but an outset border around the full menu, that is set in the style section and if you don't like showing the menu container border just change the borderwith in the style section to 0. You see, the border code refers to the actual menu container, while offborder, onborder or borders using offclass and onclass put borders around the items, not the menu.

Below are some links that are good references

1. this is an interactive demo where you can apply different transitions and filters to the menu on the page and see how they look.
http://support.milonic.com/demos/filters/index.htm

2. This is an explantion and examples of doing borders and the different looks you can get http://support.milonic.com/beginners/borders.htm

3. This is an explanation and some examples of using css to style the menu. At the bottom is a link to examples http://support.milonic.com/beginners/css_styling/

4. This is a beginners forum with explanations and samples on doing various things viewforum.php?f=14

Hope this helps

Ruth

[selvan777]

This is fantastic Ruth, I love it.

I can't wait to start playing with this.

Thank you ever so much.

[Andy]

I do not believe this, I lost everything I had written grrrr.

Don't you just hate it when that happens

If it's a long post I sometimes copy the text into a new temporary email box with Outlook Express, run spell check and leave it open until it's submitted correctly.

But it still gets me from time to time

[selvan777]

Hi,

Well, here it is on the test page with just a few minor changes for now. Tell me, if I use fontfamily="Verdana,Trebuchet MS,Helvetica"; would that be correct or do I need to change that code to accommodate this space after Trebuchet ?

It just too too bad that Firefox does not recognize these MS Filters.

http://members.lycos.co.uk/surfto/test/ruth_test.htm

[Ruth]

I have no idea about the Trebuchet, I don't know what space you mean. The menu will resize depending on the font and font size of the user. You can't really control what the user has as to font unless you use only images which isn't good for anyone who has vision issues.

Ruth

[selvan777]

I'm just asking whether or not that is correct coding as far as Milonic's ability to read the line? Being that I don't have an example to see that uses a font named with two words I'm concerned about a typo. Tried testing it locally but it's practically impossible.

It's my understanding that those are just font choices as in first, second and third of my choosing for the viewerr. If the viewer doesn't have Verdana installed it will attempt to use Trebuchet, if that's not installed, it will attempt the third choice and if that fails it will default to what ever is set locally if not forced to by the user to begin with anyway.

[selvan777]

Oops, I got it!

Changed my browser options to let pages choose their own fonts and it does display each of the three when rotated to the first choice.

Thanks.

[selvan777]

Just wanted to say that I've moved everything because my previous server is closing shop.
http://lastborns.esmartweb.com/test/ruth_test.htm

[selvan777]

Hi Ruth,

I've finally applied the code to my pages and they look great with that 3D looking buttons although I want to pick a better group of colors.

I have a question, is there a more MS Word friendly way of inserting those 2 Classes? As is, I always have to use the text editor to re-insert them.

Thanks.

[Ruth]

Hi,

I don't see the 3d look because I don't see the class on that link. The only one I see is a p.menubord using the li. And, the data file is not an li set up nor does it do paragraphs which is what the p stands for, I think. I don't know anything about MS Word so I can't help you there. You could of course create a separate style sheet and call it. That way your styles would be in a separate linked file. Or you could leave the style you have as it is and also make a separate style sheet with just the class for the menu in it and call that in the head of the document.

So, let's say you put this in a separate file, [or whatever you have it set up as]

Code: Select all

.menubord{border-top:3px solid #dddddd;border-right:3px solid #bcbcbc;border-bottom:3px solid #bcbcbc;border-left:3px solid #dddddd;}
.menubordOn{border-top:3px solid #316AC5;border-right:3px solid #eff4fc;border-bottom:3px solid #eff4fc;border-left:3px solid #316AC5;}

save the file as menuclass.css. Then on your page in the head section just call that style sheet

<LINK href="menuclass.css" type=text/css rel=stylesheet>

That's the only thing I can suggest you try since I don't know the MS word thingee.

Ruth

[selvan777]

Sorry, try going here and refresh the page a couple times and you should see it. It's the one you created for me but without the outset border around the full menu.

http://lastborns.esmartweb.com

Putting the 2 classes into a separate menuclass.css did the trick.

Thanks again Ruth.

[Ruth]

That did the trick, it looks great. Except you have a --> showing on the page at the top left just below the title. It's coming from a paragragh code on the page just below the div class=section1 area the code on the page is

Code: Select all

<p class=MsoNormal>--> </p>

and is showing that two dashes and arrow right line.

Ruth

[selvan777]

Oops, how'd that get in there!

Thanks again Ruth, I took care of it but could I ask you one more thing please?

I'm having a margin=4 problem on the sub Tweaks and XPProTweaks. When I restart my browser and first mouse over the main item Tweaks, the first level sub (Tweaks) shows with what looks like a margin of 25 but only to the right of the right-arrow and not the other 3 sides. I mouse off and back on and it's corrected to 4. The same happens to the second level sub (XPProTweaks) where there are right-arrows too.

Hmm, did I just answer my own question!

The right-arrow is 13 x 8 and the down is 8 x 13, is it necessary to have them both at 13 x 13 to prevent this? I would think not, right?

http://lastborns.esmartweb.com you might need to refresh it a couple times

[Ruth]

Hi,

No, the image sizes should have nothing to do with it. I'm not seeing the problem in IE, only in FF. You could try setting a menuwidth in that tweaks submenu, menuwidth=140; I think that is about right. Try that and see if it fixes the issue for you. That's the only thing I can think to do. Or add the buildAfterLoad=true up at the top, which means the menu won't be built until the page is fully loaded, but given you have ads on it, that means a long wait for the menu, I think.

Ruth

[selvan777]

Hi Ruth,

I applied the menuwidth=160; to take care of the white space after the arrow-right but now, since changing the color scheme, I also see a white space at the bottom (it was always there but hidden due to the color scheme). I tried using menuheight=60; but get a java error "null". How do I accomplish the same for the height of that sub "tweaks" (and any other)?

Thanks.

you may need to refresh it a couple times
http://lastborns.esmartweb.com

[Ruth]

Hi,

Instead of menuheight=60; try putting in itemheight=30; See if that fixes the issue

Ruth

[selvan777]

Hi,

I had to go all the way to 45 to get rid of the white space at the bottom of all 1st level subs. The 2nd and 3rd levels don't seem to have this problem.

I hope this is a bug that will be fixed for Firefox users because all that spacing sure makes for a not so attractive menu.

http://lastborns.esmartweb.com

Thanks

[Ruth]

Hi,

Is there a way that you can leave one of those so it shows the problem. I need to post it to Milonic since I cannot find a fix and they need to be able to see it.

Ruth