CSS Alignment

Poster: Streetwise
Dated: Monday January 10 2005 - 12:21:42 GMT

http://www.missionmeadows.org/new.php

I've gotten the menu to center fairly well (in FireFox) using CSS and 'auto' for right and left alignment, with a 700px width (same as the banner). However, it's still not quite right. How do I 'stretch' the nav to fit the space and have it perfectly centered?

When the page is looked at with IE6, it's absolutely dismal and very dissapointing. I don't know how you get the submenu items to stay with the placment of the menu?


Any suggestions? Is it possible to have it work with both FireFox and IE?

Thanks!

Dave Anderson

Poster: John
Dated: Monday January 10 2005 - 13:43:04 GMT

Have you looked at http://www.milonic.com/cssbasedmenus.php?

Poster: Streetwise
Dated: Monday January 10 2005 - 23:16:14 GMT

Okay, I'm starting to understand it all now. I found the 'howtobuild.txt' file and that's a great help with style objects! Looks like I can add many different parameters...

Also, I got the menu to look good in IE, with the exception of those dang sub-menus...

1) How do I fix the submenu placement in IE?
2) How do I fix the Z layer so that the menu is in front?

All looks great in FireFox...

Thanks

Dave

Poster: John
Dated: Tuesday January 11 2005 - 13:57:36 GMT

Z-layers tells me you have the menu in a div. It doesn't like that. Dump the div.

Poster: Streetwise
Dated: Wednesday January 12 2005 - 2:43:53 GMT

http://www.missionmeadows.org/new.php

Thanks for the help!

I moved the .js files to the body tag and it seems to work better. Here are a few more questions:

IE6:
Nav is not aligned properly, however submenus work great!

FireFox:
Nav is aligned perfectly. If I mess with alignement for IE6, then I will mess things up I'm afraid. Is there a happy medium somewhere?
Secondly, the submenu doesn't seem to work properly like IE does. The background colors are supposed to all be on when the menue expands. Instead, they only come on when moused over. I created a global substyle which seems to work good in IE6

edit: FireFox alignment looks different depending on if I have my browser's bookmarks viewable or not.

Here's my code for the global menu:

with(menuStyle=new mm_style()){
onclass="cssmouseon";
offclass="cssmouseoff";
onbgcolor="transparent";
oncolor="#FFFFFF";
offcolor="#990000";
offbgcolor="transparent";
bordercolor="#FFFFFF";
borderstyle="solid";
borderwidth=0;
separatorcolor="#000000";
separatorsize="1";
padding=5;
overfilter="Fade(duration=0.2);Alpha(opacity=70)";
outfilter="randomdissolve(duration=0.3)";
}



Thanks

Dave Anderson

Poster: Ruth
Dated: Wednesday January 12 2005 - 7:17:31 GMT

Well, you seem to have the call for the menus in a div at that link... so that may be some of the problem

Ruth

Poster: Streetwise
Dated: Wednesday January 12 2005 - 12:04:43 GMT

Yes, I do have the calls in an align=left div so that the submenus would be left justified. However, even without putting the calls into the div tag, it still has alignment issues like I described in my earlier post.

It almost sounds like the CSS approach is more trouble than it's worth? I'm still learning though!

Thanks

Dave

P.S. I think I may have found the issue. I have the banner graphic set to 'center'.

Is it possible to center the nav menu as well? I only see where you put in top and left cordinates in the menu_data.js file...

Thanks!

Poster: Streetwise
Dated: Thursday January 13 2005 - 2:38:48 GMT

Solved!

I discovered the issue:

Change this code:

with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=220;
left=101;
alwaysvisible=1;
orientation="horizontal";


to this:

with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=220;
alwaysvisible=1;
orientation="horizontal";
screenposition="center";

This centers the whole menu nicely in *both* IE, and FireFox.

Thanks All! (more questions to follow, I'm sure...)

Dave